JavaScript prototype inheritance constructor inheritance

Last time I talked about "The basic mechanism of JavaScript prototype inheritance》, this article will specifically talk about the inheritance of constructors.

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

Copy the codeThe code is as follows:

 
function People(){ 
= 'Silly Human';
} 

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

Copy the codeThe code is as follows:

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

To enable Yellow to inherit human People objects, it can be simulated and implemented in JavaScript in many ways.

1. Object Masquerading

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

Copy the codeThe code is as follows:

 
function Yellow(name, skin) { 
this._extend = People; 
this._extend(); 
delete this._extend; //Delete the reference to People
 = name; 
 = skin; 
} 
//Instantiate yellow1
var yellow1 = new Yellow('Xiao Ming', 'Yellow Skin');
(); //Xiao Ming
(); //Silly human

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

Note: Multiple inheritance can be achieved through object impersonation

2. Call / apply method

Implementing inheritance through the call/apply method may be easier and does not require any tedious operations:

Copy the codeThe code is as follows:

 
function Yellow(name, skin) { 
(this, arguments); 
 = name; 
 = skin; 
} 
//Instantiate yellow2
var yellow2 = new Yellow('David', 'black skin')
(); //David
(); //Silly human
Here, you can pass in arguments array for apply, or 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 the codeThe code is as follows:

 
 = new People(); 
= Yellow; //The initial prototype is completely cleared, so it is best to reset the constructor
var yellow3 = new Yellow('Xiao Wang', 'Yellow skin');
(); //Silly human

The above code can be understood in reverse like this. 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 a People object its properties are written to the prototype, there is no need to instantiate it, just point the Yellow prototype property to the People's prototype property:

Copy the codeThe code is as follows:

 
function People(){}; 
= 'Silly Human';
 = ; 
 = Yellow; 

This does not perform instantiation operations, it is just a change of pointers, 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 of , actually destroys People's prototype object.

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

Copy the codeThe code is as follows:

 
var F = function(){}; 
 = ; 
 = new F(); 
 = Yellow; 