Inheritance of constructors in JavaScript prototype inheritance

Speaking of the basic mechanism of JavaScript prototype inheritance, this article details the inheritance of constructors.

From a simple example, create a People constructor that describes humans:Copy codeThe Code is as follows: function People (){
This. race = 'stupid human ';
}

Then, create the Yellow constructor that describes the Yellow race:Copy codeThe Code is as follows: function Yellow (name, skin ){
This. name = name;
This. skin = skin;
}

To enable the Yellow person Yellow to inherit human People objects, it can be simulated in JavaScript in multiple ways.

1. Object Masquerading)

Object impersonating is simply to use a constructor that defines an abstract class as a regular function to implement pseudo-inheritance:Copy codeThe Code is as follows: function Yellow (name, skin ){
This. _ extend = People;
This. _ extend ();
Delete this. _ extend; // delete a reference to People
This. name = name;
This. skin = skin;
}
// Instantiate yellow1
Var yellow1 = new Yellow ('xiaoming ', 'Yellow skin ');
Console. log (yellow1.name); // James
Console. log (yellow1.race); // stupid human

In this Code, add the private method _ extend for Yellow. Because the function only exists as a reference, the People method is automatically called during execution and the name parameter of the Yellow constructor is passed in. However, the properties and methods of the Yellow object must end with the above process, clear the reference to the external method, and then define it.

Note: Multi-inheritance can be achieved through object impersonating

2. call/apply Method

Using the call/apply method to implement inheritance may be simpler and requires no complicated operations:Copy codeThe 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', 'blackskin ')
Console. log (yellow2.name); // David
Console. log (yellow2.race); // stupid human
Here, the arguments Array is passed in for apply. You can also use the new Array or the 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 codeThe 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 ('little Wang ', 'Yellow skin ');
Console. log (yellow3.race); // stupid human

The above code can be understood in a reverse way. 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 the properties of a People object are written to the prototype, you do not need to instantiate them. You only need to point the prototype attribute of Yellow to the prototype attribute of People:Copy codeThe Code is as follows: function People (){};
People. prototype. race = 'stupid human ';
Yellow. prototype = People. prototype;
Yellow. prototype. constructor = Yellow;

In this way, the instance is not instantiated, but the pointer is changed, which is very environmentally friendly. However, because of the reference type, Yellow and People point to the same prototype object, that is, the modification to Yellow. prototype. constructor actually destroys the prototype object of People.

In this case, an empty relay object can be used to bypass the prototype of the parent class:Copy codeCode: var F = function (){};
F. prototype = People. prototype;
Yellow. prototype = new F ();
Yellow. prototype. constructor = Yellow;