Understanding of several key concepts in JavaScript - construction of prototype chain_javascript skills

All functions in Javascript have a prototype attribute, and this prototype attribute is an object type object. All objects constructed by this function have the characteristics of this prototype, which means that the constructed object can be used to directly access the prototype. properties and methods on.
The following code demonstrates how to use prototype:

Copy the code The code is as follows:

function Staff(name) {
this.name = name;
}
Staff.prototype.say = function() {
alert(this.name " say hello");
}
var staff1 = new Staff("hunter");
var staff2 = new Staff("dangjian");
staff1.say();
staff2.say();

Run the above program. It can be seen that the properties and methods on the prototype can be called between created objects. More importantly, the properties and methods in the prototype are shared among objects of the same type

Copy code The code is as follows:

alert( staff1.say == staff2.say);

Another commonly used feature of prototype is to construct the inheritance relationship of objects through prototype. By assigning the base class object to the prototype of the subclass, the inheritance relationship in object-oriented can be simulated. This is what everyone often calls the object-oriented mechanism of JavaScript. . The following code snippet demonstrates the inheritance relationship of constructing objects using this feature:

Copy the code The code is as follows:

function Staff(name) { // Base class
this.name = name;
}
Staff.prototype.say = function() {
alert(this.name " say hello");
}
function ManStaff(name, age) { // Subclass
this.name = name;
this.age = age;
}
ManStaff. prototype = new Staff(); // Establish inheritance relationship
var manStaff1 = new ManStaff("hunter", 22);
var manStaff2 = new ManStaff("dangjian", 32);
manStaff1.say ();
manStaff2.say();

Running the code shows that the ManStaff object has the Say method in the base class Staff. This inheritance method is through the prototype chain in JavaScript. realized. You may be familiar with the above usage of prototype, but as programmers, we not only need to know its usage, we should also understand that it is the internal mechanism of prototype. Let's analyze the principle of prototype and the implementation of prototype chain.
To understand the mechanism of prototype, you must understand how functions are created in JavaScript.
When the code is executed to function Staff(name) {this.name = name;}, it is equivalent to executing var Staff = new Function("name", "this.name = name"). The interpreter will use the predefined Function() constructor to create a function type object, namely Staff.

Then add the __proto__ attribute to the created Staff object and assign it to the prototype of the Function constructor. This step is a step in all object creation processes. When executing something like var x = new X () method is to assign the prototype of X to the __proto__ of :

Staff.__proto__ = Function.prototype; Next, create the prototype attribute for Staff. This step is to create a function type object with the steps and creation process The following pseudo code:

Copy code

The code is as follows:

var o = new Object(); o.constructor = Base; Staff.prototype = o;
From the above analysis, we can see that when an object is created, a private attribute __proto__ is created, and when a function is created, a prototype attribute is created. Because Staff is a function type object, it will have both properties.
These two properties are key properties for building a prototype chain. Let's analyze how the prototype is passed when executing the code var staff1 = new Staff("hunter").
According to the above analysis, staff1.__proto__ = Staff.prototype, and Staff.prototype is an object created by Object, that is, Staff.prototype.__proto__ = Object.prototype, so staff1.__proto__ .__proto__ points to Object. prototype, that is, staff1.__proto__ .__proto__ == Object.prototype, this is the prototype chain. When you want to read the properties of an object, JS first looks for whether the object itself has this property. If not, it will continue to search along the prototype chain. this property.
If you know the principle of prototype chain, it is easy to build object inheritance in Javascript based on this principle.
From the above analysis, we know that the top of the prototype chain is Object.prototype, which means that Object is the base class of all objects in the built inheritance relationship. You can run the following code verification.

Copy code The code is as follows:

Object.prototype.location = "China";
function Staff(name) { // Base class
this.name = name;
}
Staff.prototype.say = function() {
alert(this.name " say hello") ;
}
var ManStaff1 = new Staff("hunter");
var ManStaff2 = new Staff("dangjian");
alert(ManStaff1.location);
alert(ManStaff2. location);

The running results show that Object is the base class of Staff, so how to build a subclass of Staff?
Understanding the establishment principle of the above function, we can easily write the following code:

Copy the code The code is as follows:

function Staff(name) { // Base class
this.name = name;
}
Staff.prototype.say = function() {
alert(this .name " say hello");
}
function ManStaff(name, age) { // Subclass
Staff.call(this,name);
this.age = age;
}
ManStaff.prototype = new Staff(); // Establish inheritance relationship
var ManStaff1 = new ManStaff("hunter", 22);
var ManStaff2 = new ManStaff("dangjian", 32) ;
ManStaff1.say();
ManStaff2.say();

This is the sentence that establishes the inheritance relationship: ManStaff.prototype = new Staff(); , the inheritance relationship is calculated as follows ：ManStaff1.__proto__ = =ManStaff.prototype, ManStaff.prototype.__proto__ = Staff.prototype, Staff.prototype.__proto__ == Object.prototype; then ManStaff1.__proto__.__proto__.__proto__ == Object.prototype.
This inheritance relationship in JavaScript is looser than the traditional object-oriented inheritance relationship, and the construction method is more difficult to understand, but as a scripting language, its functions are already very powerful.