Some thoughts on prototypal inheritance in JavaScript_javascript skills

Let’s first look at a piece of traditional inheritance code:

Copy code The code is as follows:

//Definition Super class
function Father(){
this.name = "Father";
}
Father.prototype.theSuperValue = ["NO1","NO2"];
//Definition Subclass
function Child(){
}
//Implement inheritance
Child.prototype = new Father();
//Modify the shared array
Child.prototype.theSuperValue. push("Modify");
//Create a subclass instance
var theChild = new Child();
console.log(theChild.theSuperValue); //["NO1","NO2", "Modify"]
//Create a parent class instance
var theFather = new Father();
console.log(theFather.theSuperValue); //["NO1","NO2","Modify" ]

Through the above code, we pay attention to the "red" code. The prototype object of the subclass Child is an instance of the parent class Father (new Father()). Here we call new TheSuperValue attribute in the Father() object, because there is no such attribute in the new Father() object (only the name attribute), it will be searched along the prototype chain to its prototype object (Father.prototype). After finding it, it is found that it is a Array, and it is a reference type. At this time, we add a string "modification" to this array.

After that, we created a new Child instance object theChild. When theChild calls theSuperValue attribute, first it does not have this attribute in itself, so it will go to its prototype object (new Father) to find it. Unfortunately, there is no such thing here. No, then we will go to the prototype of new Father() to find it. OK, we found this array in Father.prototype and found that it is ["NO1", "NO2", "Modify"].

Then, we created the Father instance object theFather. As above, we found this reference type array ["NO1", "NO2", "Modify"] in Father.prototype. (Of course, arrays are all reference types!)

Through the above description, friends who already understand the concept of prototype chain think it is nonsense. In fact, I do too. Next, let’s look at a similar example:

Copy code The code is as follows:

//Define super class
function Father() {
this.name = "Father";
}
Father.prototype.theSuperValue = ["NO1", "NO2"];
//Define subclass
function Child() {
}
//Implement inheritance
Child.prototype = new Father();
//Modify the shared array
Child.prototype.theSuperValue = ["I am covering the code"]
//Create a subclass instance
var theChild = new Child();
console.log(theChild.theSuperValue);
//Create a parent class instance
var theFather = new Father() ;
console.log(theFather.theSuperValue);

Let’s take a look at the above code. I marked the difference between this code and the previous code in a special purple color. Small difference, but the result is a "huge" change, see the screenshot below:

Why I say it’s a huge change is because we have transitioned from “reusing public attributes” to “overwriting public attributes and creating our own unique attributes”! I am using an array to demonstrate here. In fact, the second case is often used in Function, using the methods of the subclass to override the methods of the parent class.

In the second piece of code, what we need to pay attention to is the "=" sign before the purple code, which is the assignment operator. If we call this assignment operator on the Child.prototype and new Father() objects, we will "create" a new attribute on this object. When theSuperValue is called on the Child instance below, of course the new attribute value will be returned. ["I am covering code"].

But when we create a new parent class instance theFather object and call theSuperValue property on the object, we will find that there is no such property on the object. Why is this? Because what we just covered is the Father object new Father(); instead of the Father class, the new object theFather created through the Fater() constructor does not contain the newly created attributes. Of course, everyone will understand the next thing. Looking up the prototype chain, OK, we found it in Father.prototype, which is the array we defined at the beginning.

Through the above two examples, when we use the inheritance function provided by prototypes in JS, especially when using sub-objects to operate prototype methods and objects, remember that the "=" sign assignment and reference call are two different things. operations, as they will bring about completely different results.