There is a prototype attribute in all function in JavaScript, and the prototype property is an object of type objects, all objects constructed by that function have attributes on this prototype. That is, the properties and methods on the prototype can be accessed directly using the constructed object.
The following code shows how prototype is used:
Copy Code code 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 ();
Running the program as above, we know that the properties and methods on prototype can be invoked between the objects created and, more importantly, that the properties and methods in prototype are shared among objects of the same type.
Copy Code code as follows:
Alert (Staff1.say = = Staff2.say);
Prototype another commonly used feature is the object-oriented mechanism of JavaScript, which is often said to simulate object-oriented inheritance by prototype the inheritance of the object, by assigning the base class object to the prototype of the subclass. The following code snippet illustrates the inheritance of an object by using this attribute:
Copy Code code 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 an inheritance relationship
var manStaff1 = new Manstaff ("Hunter", 22);
var manStaff2 = new Manstaff ("Dangjian", 32);
Manstaff1.say ();
Manstaff2.say ();
The running code shows that the Manstaff object has the say method in the base class staff, which is implemented through the prototype chain in JavaScript. You may be familiar with the above prototype usage, but as a programmer, we should not only know its usage, we should understand it is prototype internal mechanism. Here we analyze the principle of prototype and the implementation of the prototype chain.
To understand the prototype mechanism, you must understand how function is created in JavaScript.
When code executes to function Staff (name) {this.name = name;} , the equivalent of executing the var Staff = new Function ("name", "this.name = name") interpreter will use the predefined function () constructor to create an object of the function type. namely staff.
You then add the __proto__ property to the created Staff object and assign it to the prototype of the constructor of the function, which is a step in all object creation, in the execution of a similar var x = new X (), Will assign the prototype of X to the __proto__ of X, similar to the following assignment:
Copy Code code as follows:
staff.__proto__ = Function.prototype;
Next, you create the prototype property for staff, which is the step to create the object of the function type, and the procedure is created with the following pseudo code:
Copy Code code as follows:
var o = new Object ();
O.constructor = Base;
Staff.prototype = O;
As we can see from the analysis, when you create an object, you create a private property __proto__, which creates a prototype property when the function is created. Because staff is an object of a function type, it has both properties.
These two properties are key attributes for building a prototype chain. Let's analyze how the prototype is passed when executing code var staff1 = new Staff ("Hunter").
According to the analysis above, 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, staff1.__proto__. __proto__ = = Object.prototype, this is the prototype chain, when you want to read the properties of an object, JS first find whether the object itself has this attribute, if not will follow the prototype chain has been looking for this attribute.
Knowing the fundamentals of the prototype chain, it's easy to build the object inheritance in JavaScript based on this principle.
From the analysis above, we know that the top of the prototype chain is Object.prototype, which means that object is the base class for all objects in the build inheritance relationship, and you can run the following code validation.
Copy Code code as follows:
Object.prototype.location = "the";
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 run results know that object is the base class for staff, so how do you build a staff subclass?
Understanding the principle of the above function, we can easily write the following code:
Copy Code code 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 an inheritance relationship
var ManStaff1 = new Manstaff ("Hunter", 22);
var ManStaff2 = new Manstaff ("Dangjian", 32);
Manstaff1.say ();
Manstaff2.say ();
It is this sentence that establishes the inheritance relation: 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; manstaff1.__proto__.__proto__.__proto__ = = Object.prototype.
This kind of inheritance relationship in JavaScript is more loosely related to traditional object-oriented inheritance, and the construction is more difficult to understand, but as a scripting language, its functionality is already very powerful.
