A deep understanding of prototype and inheritance in javascript

Generally, an object in javascript is a pointer to prototype and a list of its own properties. Javascript adopts the concept of copy-on-write when creating objects.
Only the constructor has the prototype attribute. prototype inheritance creates a new pointer pointing to the prototype attribute of the constructor.
The prototype attribute is special because it is determined by the traversal mechanism when reading the attribute in javascript. Essentially, it is a common pointer.

Constructors include:
1. Object
2. Function
3. Array
4. Date
5. String

Here are some examples.
Copy codeThe Code is as follows:
<Script>
// Each function has a default prototype attribute, and the constructor of this prototype points to this function by default.
// Note that the Person. constructor is not equal to the Person. prototype. constructor. Function instance with the constructor attribute
Function Person (name ){
This. name = name;
};
Person. prototype. getName = function (){
Return this. name;
};
Var p = new Person ("ZhangSan ");

Console. log (Person. prototype. constructor = Person); // true
Console. log (p. constructor = Person); // true, this is because p itself does not contain the constructor attribute, so here actually calls Person. prototype. constructor
</Script>

Our purpose is to indicate
1. indicates that Person inherits from Animal
2. instance indicating p2 is Person

Let's modify the direction of the prototype attribute so that Person can obtain the method in the prototype attribute of Animal. That is, the Person inherits from Animal (the Person is a beast)

Copy codeThe Code is as follows:
<Script>
Function Person (name ){
This. name = name;
};
Person. prototype. getName = function (){
Return this. name;
};
Var p1 = new Person ("ZhangSan ");

Console. log (p. constructor === Person); // true
Console. log (Person. prototype. constructor = Person); // true

Function Animal (){}

Person. prototype = new Animal (); // The reason why Person. prototype = Animal. prototype is not used is because new has other functions.
Var p2 = new Person ("ZhangSan ");

// (P2-> Person. prototype-> Animal. prototype, so p2.constructor is actually Animal. prototype. constructor)

Console. log (p2.constructor = Person); // The output is false, but our intention is to be true here, indicating that p2 is an instance of Person. In this case, Objective 1 is achieved, and Objective 2 is not.
</Script>

But if we fix it like this
 
Person. prototype = new Animal ();
Person. prototype. constructor = Person;

In this case, p2.consturctor is correct and points to Person, indicating that p2 is an instance of the Person class, but a new problem occurs. In this case, Objective 2 is achieved, and Objective 1 is not.
Objective 1 and Objective 2 conflict with each other at this time because prototype expresses two conflicting meanings,
1 indicates who the parent class is.
2. Copy the instance as a prototype.

Therefore, we cannot directly use the prototype attribute to indicate who the parent class is. Instead, we use the getPrototypeOf () method to know who the parent class is.

Copy codeThe Code is as follows:
Person. prototype = new Animal ();

Person. prototype. constructor = Person;

Var p2 = new Person ("ZhangSan ");

P2.constructor // display function Person (){}

Object. getPrototypeOf (Person. prototype). constructor // display function Animal (){}

The two concepts are separated.

Summary:
When the code var p = new Person () is executed, new does the following:

Create a blank object

Create a pointer to Person. prototype

Pass this object to the constructor using the this keyword and execute the constructor.

If you use Person. prototype = Animal. prototype indicates that the Person inherits from Animal. The instanceof method also shows that p is also an Animal instance and returns true. this method is not used for the following two reasons:

1. A new object is created to avoid setting Person. prototype. constructor = Person also causes Animal. prototype. the value of constructor is changed to Person, but a constructor instance attribute is dynamically assigned to the newly created object, so that the attribute constructor on the instance overwrites Animal. prototype. constructor, such as Person. prototype. constructor and Animal. prototype. contructor is separated.

2. attributes of this object of Animal cannot be passed to Person.

By using the hasOwnProperty () method, it is clear when the instance attribute is accessed and when the prototype attribute is accessed.