Home  >  Article  >  Web Front-end  >  Analysis of the actual role of js constructor_javascript skills

Analysis of the actual role of js constructor_javascript skills

WBOY
WBOYOriginal
2016-05-16 17:59:351225browse
Copy code The code is as follows:

<script> Function.prototype.createInstance = function(){ <br>var T = function(){}; <br>T.prototype = this.prototype; <br>T.constructor = this; <br>var o = new T(); <br>this.apply(o , arguments); <br>return o; <br>}</script>

Tell me about the sentence T.constructor = this in the above code. I feel that this sentence has no practical meaning. Function,
T.constructor itself should be Function, why should it be set as an instance of Function,
Copy code The code is as follows:

<script> <br>Function.prototype.$extends = function(p){ <br>this.$super = p; <br>var fn = function (){}; <br>fn.prototype = p.prototype; <br>this.prototype = new fn(); <br>//I added this sentence myself to ensure that the constructor that constructs the subclass instance is still Pointing to the constructor function of the subclass <br>this.prototype.constructor=this; <br>//-------------------------- -- <br>return this; <br>}; <br>function Animal(){ <br>} <br>function Cat(){ <br>} <br>Cat.$extends(Animal); <br>var bb=new Cat(); <br>alert(bb.constructor); <br>//But (this.prototype.constructor=this) cannot return to the prototype of Animal through the bb object<br>//The following statement still returns the Cat function, not Animal <br>alert(bb.constructor.prototype.constructor) <br></script>

And the above code , I added a sentence myself, correcting that the subclass constructor still points to the subclass function, but the return of the object's prototype chain cannot reach the parent class prototype. The solution is to
remove this.prototype.constructor=this; both Instead of setting the constructor attribute for the prototype, set a constructor attribute for the instance, as shown in the following code
Copy the code The code is as follows:

<script> <br>Function.prototype.$extends = function(p){ <br>this.$super = p; <br>var fn = function(){}; <br> fn.prototype = p.prototype; <br>this.prototype = new fn(); <br>return this; <br>}; <br>function Animal(){ <br>} <br>function Cat() { <br>this.constructor= arguments.callee; <br>} <br>Cat.$extends(Animal); <br>var bb=new Cat(); <br>alert(bb.constructor); <br>//This approach can be traced back to the prototype of Animal through the bb object <br>alert(bb.constructor.prototype.constructor) <br></script>

Final analysis The actual function of constructor
Copy code The code is as follows:

<script> <br>//Define function <br>var f=function(){ <br>} <br>//It shows true here because the constructor of f is Function, inside f The prototype attribute _proto_ is assigned to the prototype of the constructor, which is the prototype of Function <br>//instanceof checks whether the _proto_ inside f has a common node with Function.prototype, and returns true if so <br> alert(f instanceof Function) <br>//obj is an instance of f<br>var obj=new f; <br>//The prototype attribute _proto_ inside obj is assigned to f.prototype when new f is used, obviously f.prototype and Function.prototype have no common nodes, so false is displayed <br>alert(obj instanceof Function) <br>//In order to make obj an instance of Function, (obj instanceof Function) is displayed as true <br>/ /Only f.prototype=Function.prototype <br>f.prototype=Function.prototype; <br>//But I do not recommend the above approach, because modifications to f.prototype will destroy Function.prototype, for example f.prototype.name="51js" will also add a name attribute to the Function prototype <br>//The correct approach should be as follows, so that modifications such as f.prototype.name will not destroy the Function prototype <br>f.prototype=new Function(); <br>f.prototype.name="zhouyang"; <br>/**The key is here, adjust the constructor attribute to f again, and maintain the constructor to ensure that obj can correctly return to the prototype chain. <br>* If we want to get the prototype chain inside obj, but we only know obj, we don’t know what obj is. How to instantiate it? Since the _proto_ attribute inside obj is not visible, then if we want to get the internal prototype of obj, we can only get the constructor through obj.constructor, and then get the prototype of the constructor <br>*1. If we Add the following sentence (f.prototype.constructor=f) to return to the obj prototype chain <br>* can only return to the 1-layer prototype chain, which is obj.constructor.prototype (subclass prototype) -->obj.constructor .prototype.constructor.prototype (still a subclass prototype), this can only return 1 layer of prototype chain<br>**/ <br>f.prototype.constructor=f; <br>obj=new f; <br>alert("Found subclass---" obj.constructor "n" <br> "Found still subclass, unable to find parent class---" obj.constructor.prototype. constructor) <br>alert(obj instanceof Function) <br>/**2. If we use the following method to set the constructor of the instance of f in the definition of f instead of the constructor of the prototype of f <br>*, we can return to the 2-layer prototype chain, which is obj.constructor.prototype (subclass prototype) - ->obj.constructor.prototype.constructor.prototype (parent class prototype) <br>*Obviously this situation is consistent with the object prototype inheritance chain<br>*/ <br>f=function(){ <br>this.constructor=arguments.callee; <br>} <br>f .prototype=new Function(); <br>f.prototype.name="zhouyang"; <br>obj=new f; <br>alert("Found subclass---" obj.constructor "n" <br> "Found the parent class---" obj.constructor.prototype.constructor) <br>alert(obj instanceof Function) <br></script>

Copy code The code is as follows:

<script> <br>//Define function <br>var f=function(){ <br>} <br>//It shows true here because the constructor of f is Function, inside f The prototype attribute _proto_ is assigned to the prototype of the constructor, which is the prototype of Function <br>//instanceof checks whether the _proto_ inside f has a common node with Function.prototype, and returns true if so <br> alert(f instanceof Function) <br>//obj is an instance of f<br>var obj=new f; <br>//The prototype attribute _proto_ inside obj is assigned to f.prototype when new f is used, obviously f.prototype and Function.prototype have no common nodes, so false is displayed <br>alert(obj instanceof Function) <br>//In order to make obj an instance of Function, (obj instanceof Function) is displayed as true <br>/ /Only f.prototype=Function.prototype <br>f.prototype=Function.prototype; <br>//But I do not recommend the above approach, because modifications to f.prototype will destroy Function.prototype, for example f.prototype.name="51js" will also add a name attribute to the Function prototype <br>//The correct approach should be as follows, so that modifications such as f.prototype.name will not destroy the Function prototype <br>f.prototype=new Function(); <br>f.prototype.name="zhouyang"; <br>/**The key is here, adjust the constructor attribute to f again, and maintain the constructor to ensure that obj can correctly return to the prototype chain. <br>* If we want to get the prototype chain inside obj, but we only know obj, we don’t know what obj is. How to instantiate it? Since the _proto_ attribute inside obj is not visible, then if we want to get the internal prototype of obj, we can only get the constructor through obj.constructor, and then get the prototype of the constructor <br>*1. If we Add the following sentence (f.prototype.constructor=f) to return to the obj prototype chain <br>* can only return to the 1-layer prototype chain, which is obj.constructor.prototype (subclass prototype) -->obj.constructor .prototype.constructor.prototype (still a subclass prototype), this can only return 1 layer of prototype chain<br>**/ <br>f.prototype.constructor=f; <br>obj=new f; <br>alert("Found subclass---" obj.constructor "n" <br> "Found still subclass, unable to find parent class---" obj.constructor.prototype. constructor) <br>alert(obj instanceof Function) <br>/**2. If we use the following method to set the constructor of the instance of f in the definition of f instead of the constructor of the prototype of f <br>*, we can return to the 2-layer prototype chain, which is obj.constructor.prototype (subclass prototype) - ->obj.constructor.prototype.constructor.prototype (parent class prototype) <br>*Obviously this situation is consistent with the object prototype inheritance chain<br>*/ <br>f=function(){ <br>this.constructor=arguments.callee; <br>} <br>f .prototype=new Function(); <br>f.prototype.name="zhouyang"; <br>obj=new f; <br>alert("Found subclass---" obj.constructor "n" <br> "Found the parent class---" obj.constructor.prototype.constructor) <br>alert(obj instanceof Function) <br></script>Conclusion The role of constructor is to maintain the prototype chain of the object

I would like to ask Guoguo and Winter for some advice. I wonder if their understanding is correct. In addition, I think what is the pollution of the prototype that everyone often refers to? ?
The following may explain the function
Copy code The code is as follows:

< script>
var f = function(x){}
f.prototype={};
alert((new f).constructor);
f.prototype.constructor=f;
alert((new f).constructor);

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn