Speaking of "the basic mechanism of JavaScript archetype inheritance", this article will specifically say the inheritance of constructors.
Starting with a simple example, create a people constructor that describes humans:
Copy Code code as follows:
function people () {
This.race = ' stupid human ';
}
Then, create a yellow constructor that describes the yellow race:
Copy Code code as follows:
function yellow (name, skin) {
THIS.name = name;
This.skin = skin;
}
To make the yellow yellow can inherit human people objects, in JavaScript can be simulated in a variety of ways.
1. Object posing (objects masquerading)
Object posing, simply by using a constructor that defines an abstract class as a normal function to implement pseudo inheritance:
Copy Code code as follows:
function yellow (name, skin) {
This._extend = people;
This._extend ();
Delete This._extend; To delete a reference to a people
THIS.name = name;
This.skin = skin;
}
Instantiation of Yellow1
var yellow1 = new Yellow (' xiaoming ', ' yellow skin ');
Console.log (Yellow1.name); Xiao ming
Console.log (Yellow1.race); Stupid human.
In this code, add a private method for yellow _extend, because the function itself is only in the form of a reference, the people method is automatically invoked when it executes, and the name parameter of the yellow constructor is passed in. Instead, the yellow object's own properties and methods must be defined after the preceding procedure finishes, emptying the reference to the external method.
Note: Multiple inheritance can be achieved through object impersonation
2, Call/apply method
Implementing inheritance through the Call/apply method can be simpler and requires no tedious operation:
Copy Code code as follows:
function yellow (name, skin) {
People.apply (this, arguments);
THIS.name = name;
This.skin = skin;
}
Instantiation of Yellow2
var yellow2 = new Yellow (' David ', ' black skin ')
Console.log (Yellow2.name); David
Console.log (Yellow2.race); Stupid human.
Here you can pass in the arguments array for apply, or use the new array or literal array.
3. Prototype chain (Prototype chaining)
The first method of prototype inheritance is to point the object's prototype to an instance of the parent class:
Copy Code code as follows:
Yellow.prototype = new People ();
Yellow.prototype.constructor = yellow; The initial prototype is completely emptied, so it is best to reset the constructor
var yellow3 = new Yellow (' Xiao Wang ', ' yellow skin ');
Console.log (Yellow3.race); Stupid human.
The above code can be reversed to understand that the YELLOW3 instance itself cannot find the race property, and the race property on its prototype is exactly 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 the yellow's prototype property to the People prototype property:
Copy Code code as follows:
function people () {};
People.prototype.race = ' stupid human ';
Yellow.prototype = People.prototype;
Yellow.prototype.constructor = yellow;
This does not instantiate the operation, only the pointer changes, very green. However, because of the reference type relationship, yellow and people point to the same prototype object, which means that the modification of Yellow.prototype.constructor actually destroys the people prototype object.
That being the case, you can bypass the parent class's prototype by using an empty relay object:
Copy Code code as follows:
var F = function () {};
F.prototype = People.prototype;
Yellow.prototype = new F ();
Yellow.prototype.constructor = yellow;
