Analysis on page 1/2 of Javascript prototype inheritance recommendation

JS does not provide the so-called class inheritance. It is said that this inheritance method should be added to 2.0, but it will certainly take N years for all browsers to achieve the 2.0 feature. Yesterday I saw a video from crockford, which explains the Inheritance Method of JS. According to the PPT, there are three categories: Prototypal, pseudo doclassical, and Parasitic Inheritance.

The following describes prototype inheritance: When a function object is created, it is given a prototype member which is an object containing a constructor member which is a reference to the function object.

Here we will first differentiate what is the prototype attribute and the constructor attribute. That is, to distinguish between constructors, functions, and object instances.


In JS, the constructor is a function, and the function is the constructor. The object instance is an instance created through var obj = new function. The difference is prototype and constructor. As can be seen from the above English, prototype is an object, which defines a constructor. we can infer that constructor is the attribute of the object instance! Instead of the function (constructor) attribute. Prototype is a function (constructor) attribute, not an instance attribute!
Copy codeThe Code is as follows:
// In the following code example, MyObj is a function (constructor) and obj is an instance.
Function MyObj (id ){
This. id = id;
}
Var obj = new MyObj (1 );
Alert (MyObj. constructor) // local code
Alert (obj. constructor) // MyObj. toString ()
Alert (MyObj. prototype) // [object Object]
Alert (obj. prototype) // undefined

We can see that MyObj does not have the constructor attribute in the JS sense. Why. Alert (MyObj. constructor) This line of code still has something:

This is because MyObj is a Function, so its constructor is a local Function object, that is, MyObj is constructed by Function. But this is of little significance to us, because it is no longer on the JS layer. So here we can think that MyObj does not have the constrcutor attribute in the JS sense.

Alert (obj. prototype) through this line, we can see that the obj instance does not have the prototype attribute. OK. Now the difference is clear. You can see that the prototype inherits. If you do not know the difference, I am afraid the following will be very dizzy.
Copy codeThe Code is as follows:
Function Gizmo (id ){
This. id = id;
}
Gizmo. prototype. toString = function (){
Return "gizmo" + this. id;
};

Function Hoozit (id ){
This. id = id;
}
Hoozit. prototype = new Gizmo ();
Hoozit. prototype. test = function (id ){
Return this. id = id;
};

Note This line: Hoozit. prototype = new Gizmo (); this line is the core code of prototype inheritance.

Note that other methods such as test can be added only after new Gizmo (). This order cannot be reversed! If you first add methods such as test and then in new Gizmo (), the methods added will not be found. The specific reason is as follows.
Copy codeThe Code is as follows:
Hoozit. prototype. test = function (id ){
Return this. id = id;
};

Hoozit. prototype = new Gizmo (2 );

Var h = new Hoozit ();
Alert (h. test (3); // an error is reported here !!


Take a closer look at the figure above. This is the prototype inheritance graph. New Hoozit (stirng) in the lower left corner represents a new object. For the convenience of the following statement, we call it objH1. The gray arrow on the rightmost is the prototype inheritance chain.

According to the English section at the beginning of the article, we know that each function has a prototype, which is an object and contains a constructor attribute. Objects, Gizmo, and Hoozit are functions. We can see that there is a prototype item in it, and this prototype points to another Object, which has a constructor attribute, constructor refers to itself.

Copy codeThe Code is as follows:
Alert (Gizmo. prototype. constructo === Gizmo) // true

But here is an accident. We found that the Hoozit prototype object does not have the constructor attribute, but there is an empty object on the right of this function, which contains a constructor attribute? Why?
This problem occurs in the prototype inheritance process. This is mainly because of Hoozit. prototype = new Gizmo. This is a prototype that creates a Gizmo object and assigns it to Hoozit! So, let's take a closer look. Is the original prototype object of Hoozit broken ?? That's right. So the empty object with the constructor attribute can no longer be accessed!
Now I have another question: After this line of code, where does Hoozit. prototype = new Gizmo () Point Hoozit. prototype. constructor? It's easy. Do you know where (new Gizmo (). constructor points? The figure above clearly shows that it points to the Gizmo function. So we decided that the current Hoozit. prototype. constructor also points to it!
Copy codeThe Code is as follows:
Alert (Hoozit. prototype. constructor === Gizmo); // true

The above line of code verifies our guess! OK. After the above, we have finished the function (constructor side), and then let's talk about the Instance Object side: each instance object has a constructor attribute and points to the constructor (function ). In addition, each new instance is an instance of a prototype constructor:
Copy codeThe Code is as follows:
Var objG1 = new Gizmo ()
Alert (objG1 instanceof Gizmo. prototype. constructor) // true
Alert (Gizmo. prototype. constructor === objG1.constructor); // true

Why didn't we take objH1 as an example above, because his constructor is not his own, but a Gizmo object, so let's verify it:
Copy codeThe Code is as follows:
Alert (objH1.constructor === objG1.constructor) // true
Alert (objH1 instanceof Gizmo. prototype. constructor) // true

Have you seen it? In fact, this problem is not a big problem. If you do not want to use instanceof to check the parent object or use constructor for prototype backtracking, this problem will not be solved. What should I do if I want to solve this problem? A method is provided in the Class. create method of Prototype framework. For details, refer to: http://blog.csdn.net/kittyjie/archive/2009/07/13/4345568.aspx.
Below are two simple methods: