Shulou(Shulou.com)06/01 Report--

What are the differences between es5 and es6 inheritance? most people do not understand the knowledge points of this article, so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this article, "what are the differences between es5 and es6 inheritance?"

The difference between es5 and es6 inheritance is that es5 first creates a subclass, instantiates the parent class and adds it to the subclass this to achieve inheritance, while es6 first creates the parent class, and the instantiated subset accesses the parent class by calling the super method, and then implements inheritance by modifying this.

This tutorial operating environment: windows10 system, ECMAScript version 6. 0, Dell G3 computer.

What is the difference between inheritance of es5 and es6

In essence, the inheritance of ES5 is to create an instance object of the subclass, and then add the method of the parent class to this (Parent.apply (this)).

The inheritance mechanism of ES6 is completely different, essentially creating an instance object this of the parent class (so you must first call the super () method of the parent class), and then modify the this with the constructor of the subclass.

The inheritance of ES5 is realized by prototype or constructor mechanism.

ES6 defines classes through the class keyword, which has constructors, and classes inherit through the extends keyword. The subclass must call the super method in the constructor method, otherwise the new instance reports an error. Because the subclass does not have its own this object, it inherits the parent class's this object and processes it. If you do not call the super method, the subclass will not get the this object.

Inheritance in ES6

In traditional JS, the generation object is generated by creating the constructor and then defining the generation object

Function parent (a this.a b) {this.a = a; this.b = b;}

Then add the corresponding methods or properties through prototype

Parent.prototype.methods = function () {return 'this is test methods';} parent.prototype.attr =' this is test attr'

ES6 introduces the concept of class, that is, class. Use the keyword class to define the object.

Class is a key word, language candy, so that you can read the created object more clearly.

Receive the parameters passed by the control method through the property constructor. If you do not write this property, there will be no parameters by default.

Class parent {curstructor (afort b) {this.a = a; this.b = b;}}

Inheritance in ES6 is based on inheritance between class classes. It is realized through the keyword extends.

Invokes the parent class through super instantiation

Class parent {constructor (a) {this.a = a; this.b = b;} parentMethods () {return this.a + this.b}} class child extends parent {constructor (a) (b) {super (a); this.c = c } childMethods () {return this.c +','+ super.parentMethods ()} const point = new child; alert (point.childMethods ())

The above code is a simple set of ES6 parent-child class inheritance.

I believe we have already seen it, although the obvious difference is that in ES6, the parent component is activated by the super method, not the new instantiation, that is, the instance object of the parent class is created first, and then the this perfect prototype object in the constructor of the subclass is modified.

The above is about the content of this article on "what are the differences between the inheritance of es5 and es6". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.