Javascript learning notes (9) prototype in javascript and Inheritance of prototype chains

When using object-oriented programming, the inheritance relationships between objects are indispensable! Prototype is an important method to implement javascript inheritance!
Let's take a look at the following code:
Copy codeThe Code is as follows:
Function person (name, age ){
This. name = name;
This. age = age;
}
Person. prototype. getInfo = function (){
Alert ("My name is" + this. name + ", and I have" + this. age + "years old ");
}
Var zhangchen = new person ("zhangchen", 23 );
Zhangchen. getInfo (); // output My name is zhangchen, and I have 23 years old;

From the running results, we can see that the zhangchen object created by the keyword new inherits the getInfo () method defined by the prototype in person. Next, let's take a look at how the newly created zhangchen object inherits the attributes and methods of the person object.
Prototype: In object-oriented programming using JavaScript, prototype objects are a core concept. In JavaScript, an object is created as a copy of an existing example (prototype) object. This name comes from this concept. Any attributes and methods of this prototype object are displayed as attributes and methods of the object created from the prototype constructor. It can be said that these objects inherit attributes and methods from their prototype. When creating a zhangchen object:
Copy codeThe Code is as follows:
Var zhangchen = new company ("zhangchen", 23 );

The object referenced by zhangchen will inherit the attributes and methods from its prototype. The prototype of the object zhangchen comes from the attributes of the constructor (in this case, the function person.

In JavaScript, each function has a property named prototype, which is used to reference a prototype object. This prototype object is also known as the constructor attribute, which references the function itself in turn. This is a type of circular reference, which better illustrates this type of circular relationship.

Figure 1 Cyclic relationship

Now, when an object is created using a function (person in the preceding example) using the new operator, the obtained object inherits the property of person. prototype. In, we can see that the person. prototype object has a constructor attribute pointing back to the person function. In this way, each person object (inherited from person. prototype) has a constructor attribute pointing back to the person function.

We can use the following code to verify whether the loop is correct:
Copy codeThe Code is as follows:
Function person (name, age ){
This. name = name;
This. age = age;
}

Person. prototype. getInfo = function (){
Alert ("My name is" + this. name + ", and I have" + this. age + "years old ");
}
Var zhangchen = new person ("zhangchen", 23 );
Alert (zhangchen. constructor = person. prototype. constructor); // output true
Alert (zhangchen. constructor = person); // output true
Alert (person. prototype. isPrototypeOf (zhangchen); // output true

In the above Code, where does the call to the "isPrototypeOf ()" method come from? Is it from the person. prototype object? No, in fact, other methods can be called in the person. prototype and person instances, such as toString, toLocaleString, and valueOf, but they are not from person. prototype. It comes from Object. prototype in JavaScript, which is the final basic prototype of All prototypes. (The prototype of Object. prototype is null .)

In the preceding example, zhangchen. prototype is an object. It is created by calling the Object constructor (though invisible) and is equivalent to executing the following sub-code:
Copy codeThe Code is as follows:
Zhangchen. prototype = new Object ();

Therefore, just as the person instance inherits person. prototype, zhangchen. prototype inherits Object. prototype. This allows all the zhangchen instances to inherit the methods and attributes of Object. prototype.

Prototype chain:Each JavaScript Object inherits a prototype chain, and all prototype ends with Object. prototype. Note that this inheritance is an inheritance between active objects. It is different from the common concept of inheritance. The latter refers to the inheritance between classes when classes are declared. Therefore, JavaScript inheritance is more dynamic. It uses a simple algorithm to achieve this, as shown below: when you try to access the object's attributes/methods, JavaScript will check whether the attributes/methods are defined in the object. If not, check the prototype of the object. If not, check the prototype of the Object's prototype. The parsing process is described as follows:

Figure 2 parsing process of the toString () method

In the above parsing process, if property/method X is defined in the object, the prototype of the object will hide the property/method with the same name. For example, by defining the toString method in person. prototype, you can rewrite the toString method of Object. prototype.

Let's look at the following code:
Copy codeThe Code is as follows:
Function person (name, age ){
This. name = name;
This. age = age;
}
Person. prototype. getInfo = function (){
Alert ("My name is" + this. name + ", and I have" + this. age + "years old ");
}
Var zhangchen = new person ("zhangchen", 23 );
Var luomi = new person ("luomi", 23 );
Zhangchen. getInfo (); // output My name is zhangchen, and I have 23 years old;
Luomi. getInfo (); // output My name is luomi, and I have 23 years old;
Luomi. getInfo = function (){
Alert ("here can rewrite the function of getInfo! ");
}
Luomi. getInfo (); // here can rewrite the function of getInfo!
Zhangchen. getInfo (); // output My name is zhangchen, and I have 23 years old;

From the running result, we can see that although every instance of person inherits the person. methods In prototype, but we can also redefine the methods in the prototype object in the instantiated object, without affecting other instances!

The above is your understanding of the prototype and prototype chain inheritance method. For more information, see (JavaScript: using object-oriented technology to create advanced Web applications!