JavaScript prototypal inheritance constructor inheritance_javascript skills

Last time we talked about "Basic Mechanism of JavaScript Prototypal Inheritance", this article will talk about constructor inheritance in detail.

Start with a simple example and create the People constructor that describes humans:

Copy the code The code is as follows:

function People(){
this.race = 'Stupid Human';
}

Then, create the Yellow constructor that describes the yellow race :

Copy code The code is as follows:

function Yellow(name, skin){
this.name = name;
this.skin = skin;
}

To enable Yellow to inherit the human People object, it can be simulated in JavaScript in many ways.

1. Object Masquerading

Object masquerading, simply put, is to use a constructor that defines an abstract class as a regular function to achieve pseudo-inheritance:

Copy code The code is as follows:

function Yellow(name, skin) {
this._extend = People;
this._extend();
delete this._extend; //Delete reference to People
this.name = name;
this.skin = skin;
}
/ /Instantiate yellow1
var yellow1 = new Yellow('Xiao Ming', 'Yellow Skin');
console.log(yellow1.name); //Xiao Ming
console.log(yellow1.race); //Stupid humans

In this code, add the private method _extend for Yellow. Since the function itself only exists in the form of a reference, the People method will be automatically called during execution and Yellow will be passed in. The name parameter of the constructor. The Yellow object's own properties and methods must be defined after the above process is completed and the references to external methods are cleared.

Note: Multiple inheritance can be achieved through object impersonation

2. Call/apply method

It may be simpler to implement inheritance through the call/apply method, without any tedious steps Operation:

Copy code The code is as follows:

function Yellow(name, skin) {
People.apply(this, arguments);
this.name = name;
this.skin = skin;
}
//Instantiate yellow2
var yellow2 = new Yellow(' David', 'dark skin')
console.log(yellow2.name); //David
console.log(yellow2.race); //Stupid human
here is the input of apply arguments array, you can also use new Array or literal array.

3. Prototype Chaining

The first prototype inheritance method is to point the prototype of the object to an instance of the parent class:

Copy code The code is as follows:

Yellow.prototype = new People();
Yellow.prototype.constructor = Yellow; //The initial prototype is completely cleared, so it is best to reset the constructor
var yellow3 = new Yellow('小王', '黄 Skin');
console.log(yellow3.race); // Stupid humans

The above code can be understood in reverse, the yellow3 instance itself cannot find the race attribute, and the race attribute on its prototype happens to be the race attribute of the instance of the People object.

If for the People object, its properties are written in the prototype, there is no need to instantiate, just point the prototype property of Yellow to the prototype property of People:

Copy code The code is as follows:

function People(){};
People.prototype.race = 'Stupid Humans';
Yellow.prototype = People.prototype;
Yellow.prototype.constructor = Yellow;

This does not perform instantiation operations, but only changes the pointer, which is very environmentally friendly. However, due to the reference type relationship, Yellow and People point to the same prototype object, which means that the modification to Yellow.prototype.constructor actually destroys the prototype object of People.

In this case, you can use an empty relay object to bypass the prototype of the parent class:

Copy codeThe code is as follows:

var F = function(){};
F.prototype = People.prototype;
Yellow.prototype = new F();
Yellow.prototype.constructor = Yellow;