Detailed description of JavaScript code reuse Mode

Detailed description of JavaScript code reuse Mode

Code reuse and principles

Code reuse, as its name implies, is to reuse some or even all of the Code that has been written to build new programs. When talking about code reuse, We can first think of inheritance. The principle of code reuse is:

Object combination is preferred, rather than class inheritance

In js, because there is no class concept, the concept of an instance is meaningless. Objects in js are simple key-value pairs, which can be dynamically created and modified.

However, in js, we can use constructors and new operators to instantiate an object, which is similar to other programming languages that use classes in syntax.

For example:

var trigkit4 = new Person();

Js seems to be a class when calling the constructor Person, but it is actually still a function, which gives us some development ideas and inheritance modes on the basis of classes, we can call it the class inheritance mode ".

The traditional inheritance mode requires the class keyword. We assume that the above class inheritance mode is the modern inheritance mode, which does not need to be considered by class.

Class inheritance mode

See the following two constructor Parent () and Child () Examples:

<Script type = "text/javascript">
Function Parent (name ){
This. name = name | 'allen ';
}
Parent. prototype. say = function (){
Return this. name;
}
Function Child (name ){}
// Create an object using the Parent constructor and assign the object to the Child prototype for inheritance
Function inherit (C, P ){
C. prototype = new P (); // The prototype attribute should point to an object instead of a function.
}
// Call the declared inherited function
Inherit (Child, Parent );
</Script>

When an object is created using the new Child () statement, it obtains its functions from the Parent () instance through the prototype, for example:

var kid = new Child();kid.say();//Allen

Prototype chain

Let's discuss the working principle of the prototype chain in the class inheritance mode. We regard the object as a block somewhere in the memory. The memory block contains data and references pointing to other blocks. When you use the new Parent () statement to create an object, a block such as the block on the left is created. This block stores the name attribute. If you want to access the say () method, by pointing to the implicit link _ proto __of the prototype (prototype) attribute of the constructor Parent (), you can access the Parent block on the right. prototype.

So what happens when var kid = new Child () is used to create a new object? For example:

Except for the implicit link _ proto _, the object created using the new Child () Statement is almost empty. In this case, __proto _ points to the object created using the new Parent () Statement in the inherit () function.

When you run kid. because the block object in the lower-left corner does not have the say () method, It queries the block object in the middle through the prototype chain. However, the block object in the middle does not have the say () method, so He queries the rightmost block object along the prototype chain, and the object has the say () method. Are you finished?

The execution is not complete. this is referenced in the say () method. name, this points to the object created by the constructor. Here, it points to the block new Child (). However, there is no name attribute in new Child (). Therefore, the intermediate block is queried, and the intermediate block has the name attribute. At this point, the prototype chain is queried.

Sharing prototype

The rule of this mode is that reusable members should be transferred to the prototype rather than placed in this. Therefore, for the purpose of inheritance, anything worthy of inheritance should be implemented in the prototype. Therefore, you can set the prototype of the sub-object to the same as that of the parent object, as shown in the following example:

function inherit(C,P){
    C.prototype = P.prototype;
}

The sub-object shares the same prototype with the parent object and can access the say () method in the same way. However, sub-objects do not inherit the name attribute.

Prototype inheritance

Prototype inheritance is a "modern" non-class inheritance mode. See the following example:

<Script type = "text/javascript">
// Object to be inherited
Var parent = {
Name: "Jack" // there cannot be a semicolon
}; // New object
Var child = Object (parent); alert (child. name); // Jack
</Script>

In prototype mode, you do not need to use the object literal to create the parent object. As shown in the following code, the constructor can be used to create the parent object. In this case, the attributes of the constructor and the prototype attributes of the constructor will be inherited.

<Script type = "text/javascript">
// Parent Constructor
Function Person (){
This. name = "trigkit4 ";
}
// Attributes added to the prototype
Person. prototype. getName = function (){
Return this. name;
};
// Create a new Person Class Object
Var obj = new Person ();
// Inherit
Var kid = Object (obj );
Alert (kid. getName (); // trigkit4
</Script>

In this mode, you can select to inherit only the prototype object of the existing constructor. The object inherits from the object, regardless of how the parent object is created, as shown in the following example:

<Script type = "text/javascript">
// Parent Constructor
Function Person (){
This. name = "trigkit4 ";
}
// Attributes added to the prototype
Person. prototype. getName = function (){
Return this. name;
};
// Create a new Person Class Object
Var obj = new Person ();
// Inherit
Var kid = Object (Person. prototype );
Console. log (typeof kid. getName); // function, because it is in the prototype
Console. log (typeof kid. name); // undefined, because only the prototype is inherited
</Script>