Detailed explanation of JavaScript prototype chain prototype properties and method instances

Any properties and methods of a prototype object are passed to all instances of that class. The prototype chain uses this function to implement the inheritance mechanism. If the classes in the previous examples are redefined using the prototype method, they will become the following forms:

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

The magic of the prototype method is 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:

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

You can test this code by running the following example:

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, instanceof The way operators operate is also unique. instanceof returns true for both ClassA and ClassB for all instances of ClassB. For example:

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

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

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

Because the prototype property of ClassB's prototype chain has been overwritten 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.

The above is the detailed content of Detailed explanation of JavaScript prototype chain prototype properties and method instances. For more information, please follow other related articles on the PHP Chinese website!