constructor(JavaScript中的constructor屬性怎么使用)

constructor屬性始終指向創建當前對象的構造函數。比如下面例子:

//等價于varfoo=newArray(1,56,34,12);vararr=[1,56,34,12];console.log(arr.constructor===Array);//true//等價于varfoo=newFunction();varFoo=function(){};console.log(Foo.constructor===Function);//true//由構造函數實例化一個obj對象varobj=newFoo();console.log(obj.constructor===Foo);//true//將上面兩段代碼合起來,就得到下面的結論console.log(obj.constructor.constructor===Function);//true

但是當constructor遇到prototype時,有趣的事情就發生了。

我們知道每個函數都有一個默認的屬性prototype,而這個prototype的constructor默認指向這個函數。如下例所示:

functionPerson(name){this.name=name;};Person.prototype.getName=function(){returnthis.name;};varp=newPerson("ZhangSan");console.log(p.constructor===Person);//trueconsole.log(Person.prototype.constructor===Person);//true//將上兩行代碼合并就得到如下結果console.log(p.constructor.prototype.constructor===Person);//true

當時當我們重新定義函數的prototype時(注意:和上例的區別,這里不是修改而是覆蓋),constructor屬性的行為就有點奇怪了,如下示例:

functionPerson(name){this.name=name;};Person.prototype={getName:function(){returnthis.name;}};varp=newPerson("ZhangSan");console.log(p.constructor===Person);//falseconsole.log(Person.prototype.constructor===Person);//falseconsole.log(p.constructor.prototype.constructor===Person);//false

為什么呢?

原來是因為覆蓋Person.prototype時,等價于進行如下代碼操作:

Person.prototype=newObject({getName:function(){returnthis.name;}});

而constructor屬性始終指向創建自身的構造函數,所以此時Person.prototype.constructor === Object,即是:

functionPerson(name){this.name=name;};Person.prototype={getName:function(){returnthis.name;}};varp=newPerson("ZhangSan");console.log(p.constructor===Object);//trueconsole.log(Person.prototype.constructor===Object);//trueconsole.log(p.constructor.prototype.constructor===Object);//true

怎么修正這種問題呢?方法也很簡單,重新覆蓋Person.prototype.constructor即可:

functionPerson(name){this.name=name;};Person.prototype=newObject({getName:function(){returnthis.name;}});Person.prototype.constructor=Person;varp=newPerson("ZhangSan");console.log(p.constructor===Person);//trueconsole.log(Person.prototype.constructor===Person);//trueconsole.log(p.constructor.prototype.constructor===Person);//true

“JavaScript中的constructor屬性怎么使用”的內容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業相關的知識可以關注本站網站,小編將為大家輸出更多高質量的實用文章!