Thoughts on the original inheritance in JavaScript

Let's first look at a piece of traditional inheritance code:
Copy codeThe Code is as follows:
// Define a superclass
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. 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 code of "adding red". The prototype object of Child is an instance of the parent Father class (new Father ()), here we call the theSuperValue attribute in the new Father () object, because the new Father () object does not have this attribute (only the name attribute ), therefore, the prototype object (Father. prototype), find it and find it is an array, and it is a reference type, then we add a string "modify" to this array ".

Then, we created the Instance Object theChild of the Child instance. When theChild calls the theSuperValue attribute, it first does not have this attribute in itself, and it will go to its prototype object (new Father) but it is not found here. I will go to the new Father () prototype to find it. OK, in Father. this array is found in prototype and found to be ["NO1", "NO2", "modify"].

Then, we created the Father Instance Object theFather. the array ["NO1", "NO2", "modify"] of this reference type is found in prototype. (Of course, arrays are of reference type !)

Through the above repeat, friends who have already understood the concept of prototype chain think it is a waste of things. In fact, I am also Haha. Next we will look at a similar example:
Copy codeThe Code is as follows:
// Define a superclass
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 overwrite 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 code above. I used a special purple annotation to mark the small difference between this code and the code above, but the result was a "huge" change. See the following:

Why is it a huge change? It is because we have transitioned from "reusing public attributes" to "overwriting public attributes and building our own special attributes! Here I use Arrays for demonstration. In fact, the second case is often used in functions, and the subclass method is used to overwrite the parent class method.

In the second code, we need to pay attention to the "=" before the purple code, which is the value assignment operator. If. when the prototype and new Father () Objects call this assignment operator, we "CREATE" an attribute on this object. When theSuperValue is called on the theChild instance below, the returned value is of course the new property value ["I am overwriting the code"].

But when we create a new parent class instance theFather object and call the theSuperValue attribute on the object, we will find that the object does not exist. Why? Because we have covered the Father object new Father () instead of the Father class, theFather, a new object created by the Fater () constructor, does not contain the new attributes. Of course, the next thing everyone understands is to look up the prototype chain, OK, in Father. the array defined at the beginning is found in prototype.

In the above two examples, when we use the inheritance function provided by the prototype in JS, especially when we use sub-objects to operate prototype methods and objects, remember the two different operations, "=" and "Reference call", because they bring completely different results.