成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

揭開(kāi)JS中constructor的秘密

MorePainMoreGain / 1482人閱讀

摘要:學(xué)習(xí)原型與繼承的時(shí)候,經(jīng)常會(huì)碰到,現(xiàn)在來(lái)揭開(kāi)神秘面紗描述所有對(duì)象都會(huì)從它的原型上繼承一個(gè)屬性繼承中的用于設(shè)置原型重新分配原始構(gòu)造函數(shù)現(xiàn)在不手動(dòng)重置構(gòu)造函數(shù)用于設(shè)置原型重新分配原始構(gòu)造函數(shù)可以看到除了的不同,重置不重置原始構(gòu)造函數(shù)對(duì)我們的繼承

學(xué)習(xí)js原型與繼承的時(shí)候,經(jīng)常會(huì)碰到constructor,現(xiàn)在來(lái)揭開(kāi)神秘面紗
描述:所有對(duì)象都會(huì)從它的原型上繼承一個(gè) constructor 屬性
var o = new Object;
o.constructor === Object; // true

var a = [];
a.constructor === Array; // true

var a = new Array;
a.constructor === Array // true

var n = new Number(3);
n.constructor === Number; // true
繼承中的constructor
function Person (name, age) {
  this.name = name,
  this.age = age
}
Person.prototype.setAge = function () {
  console.log("111")
}
function Student (name, age, price) {
  Person.call(this, name, age)
  this.price = price
  this.setScore = function () { }
}
Student.prototype = Object.create(Person.prototype)//用于設(shè)置原型
Student.prototype.constructor = Student//重新分配原始構(gòu)造函數(shù)
var s1 = new Student("Tom", 20, 15000)
console.log(s1 instanceof Student, s1 instanceof Person) // true true
s1.setAge() // 111
console.log(s1)  
console.log(s1.constructor) //Student

現(xiàn)在不手動(dòng)重置構(gòu)造函數(shù)

function Person (name, age) {
  this.name = name,
  this.age = age
}
Person.prototype.setAge = function () {
  console.log("111")
}
function Student (name, age, price) {
  Person.call(this, name, age)
  this.price = price
  this.setScore = function () { }
}
Student.prototype = Object.create(Person.prototype)//用于設(shè)置原型
// Student.prototype.constructor = Student//重新分配原始構(gòu)造函數(shù)
var s1 = new Student("Tom", 20, 15000)
console.log(s1 instanceof Student, s1 instanceof Person) // true true
s1.setAge() // 111
console.log(s1)  
console.log(s1.constructor) // Person


可以看到除了s1的constructor不同,重置不重置原始構(gòu)造函數(shù)對(duì)我們的繼承沒(méi)有影響。

結(jié)論就是:constructor是用于識(shí)別對(duì)象是由哪個(gè)構(gòu)造函數(shù)初始化的,對(duì)繼承沒(méi)影響
可以看這篇文章:JS constructor探討(一):為什么要設(shè)置prototype.constructor?

But!! 什么情況下要手動(dòng)重置構(gòu)造函數(shù)??? 那就是你要調(diào)用constructor()的時(shí)候!?。〈藭r(shí)constructor的指向就會(huì)產(chǎn)生影響

來(lái)一個(gè)MDN上的列子:

function Parent() {};
function CreatedConstructor() {}

CreatedConstructor.prototype = Object.create(Parent.prototype);

CreatedConstructor.prototype.create = function create() {
  return new this.constructor();
}

new CreatedConstructor().create().create(); 

為什么報(bào)錯(cuò),因?yàn)镃reatedConstructor.prototype.constructor為Parent,所以new CreatedConstructor().create()的結(jié)果是Parent{}這個(gè)對(duì)象,這個(gè)對(duì)象沒(méi)有create方法,所以報(bào)錯(cuò)了

解決辦法:

function Parent() {}; 
function CreatedConstructor() {} 

CreatedConstructor.prototype = Object.create(Parent.prototype); 
CreatedConstructor.prototype.constructor = CreatedConstructor; // set right constructor for further using

CreatedConstructor.prototype.create = function create() { 
  return new this.constructor();
} 

new CreatedConstructor().create().create(); // it"s pretty fine

這時(shí)候需要重置CreatedConstructor的構(gòu)造函數(shù),使constructor重新指向自己

參考文章:JS constructor探討(一):為什么要設(shè)置prototype.constructor?
Object?.prototype?.constructor

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/103611.html

相關(guān)文章

  • 源碼之下無(wú)秘密 ── 做最好 Netty 源碼分析教程

    摘要:背景在工作中雖然我經(jīng)常使用到庫(kù)但是很多時(shí)候?qū)Φ囊恍└拍钸€是處于知其然不知其所以然的狀態(tài)因此就萌生了學(xué)習(xí)源碼的想法剛開(kāi)始看源碼的時(shí)候自然是比較痛苦的主要原因有兩個(gè)第一網(wǎng)上沒(méi)有找到讓我滿意的詳盡的源碼分析的教程第二我也是第一次系統(tǒng)地學(xué)習(xí)這么大代 背景 在工作中, 雖然我經(jīng)常使用到 Netty 庫(kù), 但是很多時(shí)候?qū)?Netty 的一些概念還是處于知其然, 不知其所以然的狀態(tài), 因此就萌生了學(xué)...

    shenhualong 評(píng)論0 收藏0
  • ES6 探秘:Classes

    摘要:中的同名的實(shí)際上就是我們?cè)诘脑屠^承中使用的構(gòu)造函數(shù),所以中的是對(duì)中的構(gòu)造函數(shù)的一種包裝。我們發(fā)現(xiàn),在中設(shè)定的屬性被放在的構(gòu)造函數(shù)中,而方法則以鍵值對(duì)的形式傳入一個(gè)函數(shù)中。大家是不是對(duì)這種繼承模式似曾相識(shí)呢對(duì)了,這就是所謂的構(gòu)造函數(shù)竊取。 ES6中增加了一些新特性,但從底層的角度來(lái)說(shuō),只是一些語(yǔ)法糖。但是就我個(gè)人來(lái)說(shuō),如果不了解這些語(yǔ)法糖的本質(zhì),是用不安心的。那我們要如何揭開(kāi)這些語(yǔ)法糖...

    caoym 評(píng)論0 收藏0
  • 用React寫(xiě)一個(gè)數(shù)字華容道,你需要知道秘密

    摘要:還在上班很無(wú)聊數(shù)字華容道暢玩地址開(kāi)發(fā)源碼地址這個(gè)叫前言年末了。光隨機(jī)生成一個(gè)亂序數(shù)列是不夠的,還得保證這個(gè)數(shù)列的逆序數(shù)為偶數(shù),嗦嘎。所以,我們直接將交換的次數(shù),記為數(shù)列逆序數(shù)個(gè)數(shù),就達(dá)到了想要的效果。 還在上班?很無(wú)聊?數(shù)字華容道暢玩地址 開(kāi)發(fā)源碼地址 這個(gè)叫前言 年末了。哦,不,要過(guò)年了。以前只能一路站到公司的我,今早居然是坐著過(guò)來(lái)的。新的一年,總要學(xué)一個(gè)新東西來(lái)迎接新的未來(lái)吧,所以...

    Jason 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<