Inheritance and Super

A small sum, following three main issues: inheritance ES5, the difference inherited ES5 and ES6 of inheritance, several ES6 use of super, and where this point.

From http://supermaryy.com

A, ES5 inheritance

JS inheritance in several ways

MDN | Object.create | with  Object.create implementation class inherits formula

Inheritance Inheritance can be divided into object instance inheritance, class

Two, ES6 inheritance

Class B extends A {} A may be in a class, there may also be a function prototype property

Three, ES5 and ES6 inherited inherited differences

1. The difference between this

   ES5 inheritance, in essence, is the first instance of an object to create a sub-class  this , and then add the parent class to  this the top ( Parent.apply(this) ). ES6 inheritance mechanism is completely different, in essence, properties and methods of the parent class object instance first added to  this the above (it must call the  super method), then with constructor subclass modification  this .

2. There are two prototype chain ES6

   class A { } class B extends A { } B.__proto__ === A // true B.prototype.__proto__ === A.prototype // true

   This results because the class inheritance is implemented according to the following mode.

   class A { } class B { } Example A // B inherits instance Object . setPrototypeOf ( B . the prototype , A . the prototype ); // B inherits A static property Object . setPrototypeOf ( B , A ); const B = new new B (); internal implementation // setPrototypeOf Object . setPrototypeOf = function ( obj , proto ) { obj              . __Proto__ = proto ; return obj ; } // but setPrototypeOf have performance problems, usually recommended Object.create   

3. ES6 can inherit the original constructor, but not ES5

   1. Native constructor has: Boolean (), Number (), String (), Array (), Date (), Function (), RegExp (), Error (), Object ()

   2. the reason:

      • ES5 is to create a new instance of an object subclass  this , and then added to the properties of the parent class subclasses, since the internal properties of the parent class can not be obtained, resulting in not inherit native constructor.

      • Inheritance allows ES6 native constructor defines subclasses, since ES6 new instance of an object is the first parent class  this , then the subclass constructor then modified  this , so that all the parent class behavior can be inherited.

   3. Inheriting  Object subclass, there is a  difference in behavior  .

      class NewObj extends Object{ constructor(){ super(...arguments); } } var o = new NewObj({attr: true}); o.attr === true // false

      The above code,  NewObj inherited  Object , but not by  super the method of the parent class  Object parameter passing. This is because the ES6 change the  Object behavior of the constructor, if it is found  Object methods are not  new Object() this form call, ES6 provisions  Object constructor parameter is ignored.

Four, ES6 the super and this

1. As a function of: the sub-class constructor call  super() , super corresponds to the parent class constructor

2. As an object:

   • In the sub-class constructor or a normal function  super.methodA() , super class prototype corresponds to the parent

     At this point methodA in this subclass instance

   • Using subclass static method  super.methodB() , not the parent class prototype Super point, in this case of a static methodB parent class methodB

     At this point methodB in this subclass, the only access to static methods and properties through this subclass

3. Use super subclasses assigns them  super.father_prop = 1 , corresponding to this subclass this.father_prop=1

   class A {
     constructor() { this.x = 1; } } class B extends A { constructor() { super(); this.x = 2; super.x = 3; console.log(super.x); // undefined console.log(this.x); // 3 } change(){ super.x = 4 console.log(super.x); //undefined console.log(this.x); // 4 } } let b = new B(); b.change()

4. The use of  super time, must be explicitly specified as a function, or as an object, otherwise it will error.

   class A {}
   
   class B extends A { constructor() { super(); console.log(super); // 报错 } }