The difference between the prototype chain of inheritance and succession es6

---

Before we begin, we need to know:

• Each object has a property that points to the interior __proto__ its prototype object constructor function, each function prototype property to it a prototype object. And every function is an object, it is a function of both __proto__ internal properties, but also the prototype property.
• Each instance has an internal property __proto__ prototype object point in its constructor .

Also I need to tell you. __proto__ the prototype is not the same . Differences are as follows

-		prototype
Existence	Each object has a __proto__ (including functions)	Only function only
meaning	__proto__ prototype object is a pointer to its constructor	Pointing to the prototype object function

?
Above may be somewhat difficult to understand

Explanation

Now it!

/*用es6的extends实现的继承*/
class Point1 {
}
class ColorPoint1 extends Point1 {
}

/*用es5中原型链实现的继承*/
function Point2(){
}
let p=new Point2();
function ColorPoint2(){}
ColorPoint2.prototype=p;

In es5, the base is achieved by modifying the prototype object constructor subclass, i.e. ColorPoint2.prototype=p, while in ES6, directly extendson the line. The following look at the difference.

ColorPoint1.__proto__ === Point1
//true
ColorPoint2.__proto__===Point2
//false
ColorPoint1.prototype.__proto__ === Point1.prototype
//true
ColorPoint2.prototype.__proto__ === Point2.prototype
//true

Distinction can be seen from the above code. Is the difference.ColorPoint2.proto===Point2ColorPoint2.prototype.proto === Point2.prototype

Why is this? Because es6 class inheritance is implemented in the following way.

class A {
}

class B {
}

// B 的实例继承 A 的实例
Object.setPrototypeOf(B.prototype, A.prototype);

// B 继承 A 的静态属性
Object.setPrototypeOf(B, A);

const b = new B();

Note that, setPrototypeOfprovided a property within the object __proto__to another object. As Object.setPrototypeOf(B, A)is set B .__ proto__ = A.

Next, we look at es6 FIG inherited prototype chain, as shown in FIG.

Inheritance is a schematic view of FIG. 1 es6

FIG., The blue line isObject.setPrototypeOf(ColorPoint1, Point1)

And es5 in schematic inheritance chain prototype implementation is shown in Fig.

2 es5 schematic diagram of the prototype chain inheritance

In the diagram es5 prototype implementation inheritance chain, the __proto__ subclass constructor is not treated, or pointing to the Object .__ proto__.

to sum up

ES6 using inheritance and extends es5 prototype implementation inheritance chain difference is that, ES6 provided inherited constructor, i.e. proto parent class constructor sub-class constructor . Specific code is below.

// ColorPoint1.prototype的proto继承Point1.prototype
Object.setPrototypeOf(ColorPoint1.prototype, Point1.prototype);
// ColorPoint1的proto继承point。
Object.setPrototypeOf(ColorPoint1, Point1);

references

Class inheritance
of all objects have javascript prototype or just have a function object prototype?