構(gòu)造函數(shù)創(chuàng)建對象

你可以使用{...}直接創(chuàng)建對象

也可以通過Function關(guān)鍵詞構(gòu)造的函數(shù)來創(chuàng)建對象让腹。

本篇內(nèi)容所指的函數(shù),均已將箭頭函數(shù)排除在外领追。因為箭頭函數(shù)不能用來構(gòu)造函數(shù)笤闯。箭頭函數(shù)沒有綁定this,arguments咆课,super,new.target末誓。

  • 使用new關(guān)鍵字來調(diào)用一個函數(shù),就是使用構(gòu)造函數(shù)創(chuàng)建對象了书蚪。如果不使用new關(guān)鍵字喇澡,那就是一個普通的函數(shù);
  • 一般構(gòu)造函數(shù)名使用大寫;

定義一個構(gòu)造函數(shù)

function Student(name) {
    this.name = name;
    this.hello = function () {
        alert('Hello, ' + this.name + '!');
    }
}

長的跟普通函數(shù)一樣,不使用new關(guān)鍵詞調(diào)用善炫,就是普通函數(shù)撩幽,使用new關(guān)鍵詞調(diào)用就是構(gòu)造函數(shù)了。

使用new關(guān)鍵字調(diào)用函數(shù)箩艺,它綁定的this指向新創(chuàng)建的對象窜醉,并默認返回this,也就是說 不需要再構(gòu)造函數(shù)最后寫 return this

使用構(gòu)造函數(shù)創(chuàng)建對象

var xiaoming = new Student('小明');
xiaoming.name; // '小明'
xiaoming.hello(); // Hello, 小明!

JavaScript創(chuàng)建的每一個對象都會設(shè)置一個原型艺谆,指向它的原型對象

當我們使用obj.xxx 訪問對象屬性時榨惰,JavaScript引擎現(xiàn)在當前對象上查找該屬性,如果沒有找到静汤,就在其原型對象上找琅催,如果沒有找到就一直上溯到Object.prototype對象居凶,最后,如果還沒有找到藤抡,就只能返回undefined侠碧。

例如創(chuàng)建一個數(shù)組 var a = [1,2,3]; 它的原型鏈如下

a -> Array.prototype -> Object.prototype -> null

因為在Array.Prototype上定義了push方法,所以在可以使用 a.push()

在這里 xiaoming 的原型鏈就是:

xiaoming -> Student.prototype -> Object.prototype -> null

但是xiaoming可沒有prototype屬性缠黍,不過可以用__proto__非標準語法查看弄兜,

Student.prototype 指向的就是xiaoming的原型對象,默認是個Student類型的空對象,這個原型對象還有一個屬性constructor指向Student函數(shù)本身

Student.prototype中屬性 constructor 也就可以使用了 比如xiaoming也就擁有了 constructor 屬性瓷式,其實就是Student.prototype.constructor 也就是 Student函數(shù)本身替饿。

因此 xiaoming.constructor === Student.prototype.constructor === Student

如果我們通過new Student()創(chuàng)建了很多對象,這些對象的hello函數(shù)實際上只需要共享同一個函數(shù)就可以了贸典,這樣可以節(jié)省很多內(nèi)存视卢。

根據(jù)對象的屬性查找原則,我們只要把hello函數(shù)移動到 這些對象的共同的原型上就可以了廊驼。

function Student(name) {
    this.name = name;
}

Student.prototype.hello = function () {
    alert('Hello, ' + this.name + '!');
};

而如果你直接給prototype 賦值据过,那么就會一不小心改變 Student 的原型 比如:

Student.prototype = {
  hello: function () {
    alert('Hello, ' + this.name + '!');
  },
  play:function(){
    alert('play with me');
  }
} 

上面的代碼是賦值操作,而不是在原來的prototype對上增加屬性值蔬充,

原來的 Student.prototype 對象是 Student 類型的 {} 其打印結(jié)果是 Student {} 它的constructor 是Student函數(shù)本身

而直接賦值的這個 {...} 默認是 Object 類型的對象蝶俱,這個Object對象的 prototype.constructor 也就是自然指向了它的構(gòu)造函數(shù) [Function: Object]

所以班利,使用Student創(chuàng)建對象所繼承的constructor屬性 就不再是原來的 Student 函數(shù) 而是 Object 函數(shù)饥漫。

如果想讓constructor依然指向Student 修改原型對象的constructor的屬性就可以了。

解決方案就是在設(shè)置完prototype之后罗标,設(shè)置下constructor

Student.prototype = {
  hello: function () {
    alert('Hello, ' + this.name + '!');
  },
  play:function(){
    alert('play with me');
  }
};
Student.prototype.constructor = Student;

盡管可以這樣解決庸队,你也發(fā)現(xiàn)了,Student.prototype的打印結(jié)果已經(jīng)不是Student(Student {})的類型了闯割,而是默認對象Object 的類型彻消,然后又更改constructor(Student.prototype.constructor),不覺得有不一致的地方嗎宙拉?一個Student類型的原型指向了一個Object類型的對象宾尚,其constructor卻是Student函數(shù)。

所以我不推薦使用這種方法 給原型對象 增加 屬性或者方法谢澈。雖然沒有改變原型鏈煌贴,但是改變了原型的指向,稍不注意可能會有一些意外的問題發(fā)生锥忿。

我依然推崇直接在原來的原型對象上修改:

function Student(name) {
    this.name = name;
}

Student.prototype.hello = function () {
    alert('Hello, ' + this.name + '!');
};
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末牛郑,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子敬鬓,更是在濱河造成了極大的恐慌淹朋,老刑警劉巖笙各,帶你破解...
    沈念sama閱讀 217,509評論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異础芍,居然都是意外死亡杈抢,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,806評論 3 394
  • 文/潘曉璐 我一進店門仑性,熙熙樓的掌柜王于貴愁眉苦臉地迎上來春感,“玉大人,你說我怎么就攤上這事虏缸■昀粒” “怎么了?”我有些...
    開封第一講書人閱讀 163,875評論 0 354
  • 文/不壞的土叔 我叫張陵刽辙,是天一觀的道長窥岩。 經(jīng)常有香客問我,道長宰缤,這世上最難降的妖魔是什么颂翼? 我笑而不...
    開封第一講書人閱讀 58,441評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮慨灭,結(jié)果婚禮上朦乏,老公的妹妹穿的比我還像新娘。我一直安慰自己氧骤,他們只是感情好呻疹,可當我...
    茶點故事閱讀 67,488評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著筹陵,像睡著了一般刽锤。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上朦佩,一...
    開封第一講書人閱讀 51,365評論 1 302
  • 那天并思,我揣著相機與錄音,去河邊找鬼语稠。 笑死宋彼,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的仙畦。 我是一名探鬼主播输涕,決...
    沈念sama閱讀 40,190評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼议泵!你這毒婦竟也來了占贫?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,062評論 0 276
  • 序言:老撾萬榮一對情侶失蹤先口,失蹤者是張志新(化名)和其女友劉穎型奥,沒想到半個月后瞳收,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,500評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡厢汹,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,706評論 3 335
  • 正文 我和宋清朗相戀三年螟深,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片烫葬。...
    茶點故事閱讀 39,834評論 1 347
  • 序言:一個原本活蹦亂跳的男人離奇死亡界弧,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出搭综,到底是詐尸還是另有隱情垢箕,我是刑警寧澤,帶...
    沈念sama閱讀 35,559評論 5 345
  • 正文 年R本政府宣布兑巾,位于F島的核電站条获,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏蒋歌。R本人自食惡果不足惜帅掘,卻給世界環(huán)境...
    茶點故事閱讀 41,167評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望堂油。 院中可真熱鬧修档,春花似錦、人聲如沸府框。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,779評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽寓免。三九已至癣诱,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間袜香,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,912評論 1 269
  • 我被黑心中介騙來泰國打工鲫惶, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留蜈首,地道東北人。 一個月前我還...
    沈念sama閱讀 47,958評論 2 370
  • 正文 我出身青樓欠母,卻偏偏與公主長得像欢策,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子赏淌,可洞房花燭夜當晚...
    茶點故事閱讀 44,779評論 2 354

推薦閱讀更多精彩內(nèi)容