JS does not provide the so-called class inheritance, it is said that in 2.0 to join this way of inheritance, but to all browsers to achieve 2.0 of the characteristics that must be more than n years. Yesterday saw a video of Crockford, which explained the way JS inheritance, according to the PPT said, a total of three categories: Prototypal,pseudoclassical,parasitic inheritance.
The following is a brief introduction to prototype inheritance: When a function The object is created, the it is given a prototype member which be an object containing a constructor Member which are a reference to the function object.
Here is a distinction between what is the prototype property, and the constructor property. Which is to distinguish between constructors, functions, object instances.
In fact, in the JS constructor is a function, the function is the constructor, the object instance is through the Var obj=new function (), a new instance of this form. Distinguish these, in saying prototype and constructor. As can be seen from the English above, prototype is an object, which defines a constructor, then we can deduce that constructor is the property of an object instance! Rather than the properties of the function (constructor). Conversely, prototype is the property of the function (constructor), not the property of the instance!
Copy Code code 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 is not a JS sense of the constructor attribute, why say so. Alert (Myobj.constructor) This line of code still has something:
This is because MyObj is a function, so his constructor is the local function object, which means that myobj is constructed from function. But this does not mean a little to us, because this is no longer JS level. Therefore, it can be considered that myobj does not have the Constrcutor attribute in the JS sense.
Alert (obj.prototype) we can see from this line that the obj instance does not have a prototype attribute. OK, now the difference is clear, you can see the prototype inherited. If you do not distinguish between this, I am afraid the following will be very faint.
Copy Code code 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 the prototype inheritance.
Also note that only after the new Gizmo (), you can add test and other methods, this order can not be reversed! If you add a method such as test and then the new Gizmo (), then the methods you added will not be found. Specific reasons, the following analysis is over, it is clear.
Copy Code code as follows:
Hoozit.prototype.test = function (ID) {
return this.id = = ID;
};
Hoozit.prototype = new Gizmo (2);
var h=new hoozit ();
Alert (H.test (3)); There will be an error!!
Take a closer look at the above diagram, which is the prototype inheritance diagram. The lower left corner, new Hoozit (STIRNG), represents a newly created object. We call him objH1 for the convenience of the following statement. The rightmost Gray arrow 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 inside the object. Where Object,gizmo,hoozit is a function, you can see that there is a prototype, and this prototype point to an object, this object has a constructor attribute, constructor also refers to itself.
Copy Code code as follows:
Alert (Gizmo.prototype.constructo===gizmo)//true
But there was an accident, and we found that there was no constructor attribute in the Hoozit prototype object, and there was an empty object on the right side of the function that contained a constructor attribute. Why, then?
This problem will occur during the prototype inheritance process. It is mainly because hoozit.prototype = new Gizmo (), which is caused by this remark. The meaning of this sentence is to create a new Gizmo object and assign it to Hoozit's prototype! Well, then, think carefully, is not Hoozit original prototype object is disconnected?? Yes, that's it. So the empty object with the constructor attribute can no longer be accessed!
Now there is another question, through Hoozit.prototype = new Gizmo (), after this line of code, where does Hoozit.prototype.constructor point? Very simple, Know (new Gizmo ()). Where does constructor point? It is clear from the diagram above that the Gizmo function is pointed to. So we conclude that the Hoozit.prototype.constructor is also pointing to it!
Copy Code code as follows:
alert (Hoozit.prototype.constructor===gizmo); True
The above line of code validates our guesses! OK, it's finished with the function (the constructor side), and then we'll talk about the instance object here: Each instance object has a constructor property and points to the constructor (function). And each new instance is an instance of a prototype constructor:
Copy Code code as follows:
var objg1=new Gizmo ()
Alert (objG1 instanceof Gizmo.prototype.constructor)//true
alert (gizmo.prototype.constructor===objg1.constructor); True
The above why not take objH1 for example, because his constructor is not his own, but Gizmo object, then we verify:
Copy Code code as follows:
Alert (objh1.constructor===objg1.constructor)//true
Alert (objH1 instanceof Gizmo.prototype.constructor)//true
Did you see it? In fact, this problem is not a big problem, if you do not use instanceof to check the parent object or use constructor for prototype backtracking, this problem can not be solved. What if we want to solve this problem? In the Class.create method of prototype frame, a method is given, which can refer to: http://blog.csdn.net/kittyjie/archive/2009/07/13/4345568.aspx
Let me briefly say two ways:
Current 1/2 page
12 Next read the full text
