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

This article is about the difference between es6 inheritance and es5 inheritance. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

The difference between es5 and es6 inheritance: ES5 inherits through a prototype or constructor mechanism; it first creates a subclass, then instantiates the parent class and adds it to the subclass this. ES6 first creates the parent class, then instantiates the child set to access the parent by calling the super method, and then implements inheritance by modifying the this.

The operating environment of this tutorial: windows7 system, ECMAScript 5&&ECMAScript version 6, Dell G3 computer.

The difference between es6 inheritance and es5 inheritance

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 through 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.

Note that the super keyword refers to an instance of the parent class, that is, the this object of the parent class.

Note: in the subclass constructor, the this keyword cannot be used until super is called, otherwise an error will be reported.

1. Inheritance in es5:

Function parent (a this b) {this a = a; this b = b;} function child (c) {this c = c}

Inherit the parent through a subset:

Parent.call (child,1,2)

If you look at the underlying method of call, you can see that the process of inheritance is through the prototype attribute.

Child.prototype = new parent (1mai 2)

It can be seen that the essence of ES5 inheritance is to first create an instance object of the subclass element child, and then assign the attributes in the prototype object of the parent class element parent to the instance object of the subclass element child, thus realizing the inheritance.

2. 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.

Summary:

The biggest difference between ES5 and ES6 inheritance is:

ES5 first creates a subclass, instantiates the parent class and adds it to the subclass this

ES6 first creates the parent class. After the parent is accessed by calling the super method in the instantiated subset, inheritance is realized by modifying the this.

Thank you for reading! This is the end of this article on "what's the difference between es6 inheritance and es5 inheritance". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!

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.