Handwriting together! The inheritance mechanism of ES5 and ES6!

prototype

Execute codevar o = new Object();

At this time, a pointer is stored inside the object. This pointer points to Object.prototype. When executing o.toString()other methods (or accessing other properties), o will first check whether it has the method or property. If not, it will be stored along the internal To find the Object.prototypeobject, and then check Object.prototypewhether the object has a method or property with the corresponding name, and if so, call Object.prototypethe method or property.

We call this pointer the prototype of the o object.

The ES3 specification defines the Object.prototype.isPrototypeOf () method, which can determine whether an object is the prototype of another object. Object.prototype.isPrototypeOf(o)Returning a true value determines that Object.prototype is the prototype of the o object.

In the ES3 specification, the prototype of the o object cannot be read directly, that is, the prototype of the o object is invisible and intangible. The ES5.1 specification defines the Object.getPrototypeOf () method, through which you can get the prototype of the object. We can Object.getPrototypeOf(o) === Object.prototypeverify that Object.prototype is the prototype of the o object again.

The ES6 specification is more direct, adding an __proto__attribute to the object , through which you can get the prototype of the object, so it will also return true in supported __proto__browsers o.__proto__ === Object.prototype.

When we execute var x = new X();, the browser will execute x.__proto__ = X.prototype, setting the prototype of the instantiated object to the prototype object of the corresponding class, which is very important.

Prototype chain 

We execute the following code:

function Person(){};
var p = new Person();

p .__ proto__ points to Person.prototype, the prototype of Person.prototype is Person.prototype .__ proto__, which points to Object.prototype, Object.prototype .__ proto__ is null

The following chain structure is formed through __proto__ upward tracking:

p -> Person.prototype -> Object.prototype -> null

The chain structure of this prototype is called the prototype chain. The prototype of Object.prototype is null, which means there is no prototype of Object.prototype.

JavaScript objects have a chain that points to a prototype object. When trying to access the properties of an object, it not only searches on the object, but also searches for the prototype of the object and the prototype of the object's prototype, and searches upwards in this layer until it finds a property with a matching name or reaches The end of the prototype chain.

Inheritance in JavaScript is achieved through prototypes. Although classkeywords are introduced in ES6 , it is just syntactic sugar for prototypes. JavaScript inheritance is still based on prototypes. 

 

ES5 parasitic combination inheritance (a method advocated in the industry)

That is, by inheriting properties with the help of a constructor, inheriting methods through the hybrid form of the prototype chain.

The basic idea behind it is: there is no need to call the supertype constructor in order to specify the prototype of the subtype, all we need is a copy of the supertype prototype. Essentially, it is to use parasitic inheritance to inherit the supertype's prototype, and then assign the result to the subtype's prototype.

function inserit(son, father) {
    var obj = Object.create(father.prototype);
    son.prototype = obj;
    obj.constructor = son
}

function SuperType(name, colors) {
    this.name = name;
    this.colors = colors;
}
SuperType.prototype.sayName = function () {
    return this.name;
}

function SubType(job, name, color) {
    SuperType.call(this, name, color);
    this.job = job;
}
// The core method 
insertit (SubType, SuperType);
SubType.prototype.sayjob = function () {
    return this.job;
}
var instance = new SubType("doctor", "John", ["red", "green"]);
console.log(instance.sayjob(), instance.sayName()) //doctor,John

ES6 inheritance

ES6Support inheritance through classes, the method is relatively simple, the code is as follows

class Point {
    constructor (x, y) {
        this.x = x
        this.y = y
    }
    
    toString() {
        return this.x + '' + this.y
    }
}

class ColorPoint extends Point {
    constructor (x, y, color) {
        super (x, y) // Call the parent's constructor (x, y) 
        this .color = color
    }
    
    toString() {
        return  this .color + '' + super.toString () // Call toString () of parent class 
    }
}

var colorPoint = new ColorPoint('1', '2', 'red')

console.log(colorPoint.toString())  // red 12