Detailed explanation of prototype chaining based on JavaScript implementation of inheritance mechanism_javascript skills

If you redefine the classes in the previous example using prototypes, they will become the following form:

Copy the code The code is as follows :

function ClassA() {
}

ClassA.prototype.color = "blue";
ClassA.prototype.sayColor = function () {
alert(this.color);
};

function ClassB() {
}

ClassB.prototype = new ClassA();

The magic of the prototype approach lies in the last line of code. Here, set the prototype property of ClassB to an instance of ClassA. This is interesting because you want all the properties and methods of ClassA, but you don't want to add them one by one to the prototype property of ClassB. Is there a better way than assigning an instance of ClassA to the prototype property?

Note: Call the constructor of ClassA without passing parameters to it. This is standard practice in prototype chains. Make sure the constructor doesn't have any parameters.

Similar to object impersonation, all properties and methods of the subclass must appear after the prototype property is assigned, because all methods assigned before it will be deleted. Why? Because the prototype property is replaced with the new object, the original object with the new method added will be destroyed. Therefore, the code to add the name attribute and sayName() method to the ClassB class is as follows:

Copy the code The code is as follows:

function ClassB() {
}

ClassB.prototype = new ClassA();

ClassB.prototype.name = "";
ClassB.prototype.sayName = function () {
alert(this.name);
};

Yes Test this code by running the following example:

Copy the code The code is as follows:

var objA = new ClassA();
var objB = new ClassB();
objA.color = "blue";
objB.color = "red";
objB.name = "John";
objA.sayColor();
objB.sayColor();
objB.sayName();

In addition, in the prototype chain, the instanceof operator operates also Very unique. instanceof returns true for both ClassA and ClassB for all instances of ClassB. For example:

Copy code The code is as follows:

var objB = new ClassB();
alert(objB instanceof ClassA); //Output "true"
alert(objB instanceof ClassB); //Output "true"

In the weakly typed world of ECMAScript, this is extremely Useful tool, but cannot be used when using object impersonation. However, since the prototype of the subclass is directly reassigned, the following situation occurs:

Copy code The code is as follows:

console.log(objB.__proto__===objB.constructor.prototype) //false

Because the prototype attribute of ClassB's prototype chain has been overridden by an object of another class . The output results show that objB.__proto__ still points to ClassB.prototype, not objB.constructor.prototype. This is also easy to understand. What is assigned to Person.prototype is an object literal new ClassA() instance. The constructor (constructor) of an object defined using the object literal method points to the root constructor Object. Object.prototype is a Empty object {}, {} is naturally different from ClassB.prototype.