創(chuàng)建對(duì)象的方式(二)

上回說(shuō)到創(chuàng)建對(duì)象最常用的三個(gè)方式。工廠模式陷寝、構(gòu)造函數(shù)模式和原型模式锅很。工廠模式不去準(zhǔn)確確定對(duì)象的類型,構(gòu)造函數(shù)模式封裝性不好凤跑,對(duì)此爆安,第三種模式華麗誕生~這就是原型模式。
三饶火、原型模式
我們創(chuàng)建的每個(gè)函數(shù)都有一個(gè)prototype屬性鹏控,這個(gè)屬性是一個(gè)指針致扯,指向一個(gè)對(duì)象肤寝,而這個(gè)對(duì)象的用途是包含可以由特定類型的所有實(shí)例共享的屬性和方法。如果按照字面意思來(lái)理解抖僵,那么prototype就是通過(guò)調(diào)用構(gòu)造函數(shù)而創(chuàng)建的那個(gè)對(duì)象實(shí)例的原型對(duì)象鲤看。使用原型對(duì)象的好處是可以讓所有對(duì)象實(shí)例共享它所包含的屬性和方法。換句話說(shuō)耍群,不必在構(gòu)造函數(shù)中定義對(duì)象實(shí)例的信息义桂,而是可以將這些信息直接添加到原型對(duì)象中。

function Person () {
    //console.log(this);
}
Person.prototype.name = 'Nico';
Person.prototype.age = 23;
Person.prototype.job = 'FE';
Person.prototype.sayName = function () {
    console.log(this); // obj
    console.log(this.name);
}

var p1 = new Person();
p1.sayName();
var p2 = new Person();
p2.sayName();

每一個(gè)構(gòu)造函數(shù)都有ptototype原型對(duì)象蹈垢,而構(gòu)造函數(shù)創(chuàng)建的每一個(gè)實(shí)例都具有一個(gè)__proto__屬性慷吊,指向構(gòu)造函數(shù)的原型對(duì)象,即

p1.__proto__ === Person.prototype

以上說(shuō)明這個(gè)連接存在于實(shí)例與構(gòu)造函數(shù)的原型對(duì)象之間曹抬,而不是存在于實(shí)例與構(gòu)造函數(shù)之間溉瓶。
因?yàn)榇藭r(shí)實(shí)例并沒(méi)有屬性,而是通過(guò)原型鏈的方式共享原型對(duì)象的屬性。因而堰酿,sayName()方法對(duì)實(shí)例對(duì)象來(lái)說(shuō)疾宏,是調(diào)用的原型對(duì)象的方法。因触创,

console.log(p1.sayName() === p2.sayName()); // true

當(dāng)為對(duì)象實(shí)例添加一個(gè)屬性時(shí)坎藐,這個(gè)屬性就會(huì)屏蔽原型對(duì)象中保存的同名屬性;換句話說(shuō)哼绑,添加這個(gè)屬性只會(huì)阻止我們?cè)L問(wèn)原型中的那個(gè)屬性岩馍,但不會(huì)對(duì)其進(jìn)行修改。即使將這個(gè)屬性設(shè)置為null凌那,也只會(huì)在實(shí)例中設(shè)置兼雄,不會(huì)恢復(fù)其指向原型的鏈接。

function Person () {}
Person.prototype.name = 'Nico';
Person.prototype.age = 23;
Person.prototype.job = 'FE';
Person.prototype.sayName = function () {
    console.log(this.name);
}

var p1 = new Person();
p1.name = 'Ann';
p1.sayName(); // 'Ann'
var p2 = new Person();
p2.sayName(); // 'Nico'
console.log(p1.sayName === p2.sayName); // true

原因還是因?yàn)槊钡?dāng)給實(shí)例賦屬性時(shí)赦肋,當(dāng)實(shí)例具有該屬性時(shí),自然不會(huì)向上追溯原型鏈励稳,也不會(huì)對(duì)原型鏈有什么改變佃乘。
但是如果這種方式想刪除屬性,需要用delete關(guān)鍵字驹尼。

delete p1.name;
p1.sayName(); // 'Nico'

重寫原型
為了從視覺(jué)上更舒服趣避,以及寫代碼的時(shí)候更省力。一般用一個(gè)包含所有屬性和方法的對(duì)象來(lái)重寫整個(gè)原型對(duì)象新翎。

function Person () {}
Person.prototype = {
    constructor: Person,
    name: 'Ann',
    age: 23,
    job: 'FE'
};

但這種方法相當(dāng)于對(duì)原型對(duì)象進(jìn)行重寫程帕,比較明顯的一個(gè)變化就是,constructor屬性指向的不是Person地啰,而是Object愁拭。

var f1 = new Person();
console.log(f1.constructor == Person); // false
console.log(f1.constructor == Object); // true

原因,
此時(shí)用字面量方式重寫原型對(duì)象亏吝,相當(dāng)于走了以下幾步岭埠。

var obj = new Object();
// 實(shí)例對(duì)象obj是不具有constructor屬性的,它的隱式原型指向創(chuàng)建該對(duì)象函數(shù)的原型對(duì)象
obj.__proto__ = Object.prototype;
// 但是根據(jù)原型鏈上溯蔚鸥,obj的constructor屬性其實(shí)是Object原型對(duì)象的屬性
因而就有了console.log(f1.constructor == Object); // true

原型方式帶來(lái)的問(wèn)題
對(duì)于原型對(duì)象中包含引用類型值得屬性惜论,修改實(shí)例對(duì)象會(huì)影響到原型對(duì)象屬性值的變化。

function Person () {}
Person.prototype = {
    constructor: Person,
    name: 'Ann',
    friends: ['a', 'b']
};

var p1 = new Person();
var p2 = new Person();
var p3 = new Person();

p1.friends = ['a', 'b', 'v'];
p3.friends.push('z');
console.log(p1.friends); // ['a', 'b', 'v']
console.log(p1.hasOwnProperty('friends')); // true
console.log(p3.friends); // ['a', 'b', 'z']
console.log(p3.hasOwnProperty('friends')); // false
console.log(p2.friends); // ['a', 'b', 'z']
console.log(p2.hasOwnProperty('friends')); // false

可以看出止喷,p1在自己的實(shí)例中真正創(chuàng)建了friends屬性馆类,而p3并不具有該屬性,因而它的操作是直接在原型對(duì)象上操作的弹谁。
四乾巧、組合使用構(gòu)造函數(shù)模式和原型模式
構(gòu)造函數(shù)模式用于定義實(shí)例屬性技羔,而原型模式用于定義方法和共享的屬性。

function Person (name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.friends = ['r', 'g', 'b'];
}

Person.prototype = {
    constructor: Person,
    sayName: function () {
        console.log(this.name);
    }
}

var p1 = new Person('Nico', 23, 'FE');
var p2 = new Person('Ann', 24, 'RD');

p1.friends.push('y');
console.log(p1.friends); // ['r', 'g', 'b', 'y']
console.log(p2.friends); // ['r', 'g', 'b']
console.log(p1.friends === p2.friends); // false
console.log(p1.sayName === p2.sayName); // true
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末卧抗,一起剝皮案震驚了整個(gè)濱河市藤滥,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌社裆,老刑警劉巖拙绊,帶你破解...
    沈念sama閱讀 211,265評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異泳秀,居然都是意外死亡标沪,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,078評(píng)論 2 385
  • 文/潘曉璐 我一進(jìn)店門嗜傅,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)金句,“玉大人,你說(shuō)我怎么就攤上這事吕嘀∥ツ” “怎么了?”我有些...
    開封第一講書人閱讀 156,852評(píng)論 0 347
  • 文/不壞的土叔 我叫張陵偶房,是天一觀的道長(zhǎng)趁曼。 經(jīng)常有香客問(wèn)我,道長(zhǎng)棕洋,這世上最難降的妖魔是什么挡闰? 我笑而不...
    開封第一講書人閱讀 56,408評(píng)論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮掰盘,結(jié)果婚禮上摄悯,老公的妹妹穿的比我還像新娘。我一直安慰自己愧捕,他們只是感情好奢驯,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,445評(píng)論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著晃财,像睡著了一般叨橱。 火紅的嫁衣襯著肌膚如雪典蜕。 梳的紋絲不亂的頭發(fā)上断盛,一...
    開封第一講書人閱讀 49,772評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音愉舔,去河邊找鬼钢猛。 笑死,一個(gè)胖子當(dāng)著我的面吹牛轩缤,可吹牛的內(nèi)容都是我干的命迈。 我是一名探鬼主播贩绕,決...
    沈念sama閱讀 38,921評(píng)論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼壶愤!你這毒婦竟也來(lái)了淑倾?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,688評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤征椒,失蹤者是張志新(化名)和其女友劉穎娇哆,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體勃救,經(jīng)...
    沈念sama閱讀 44,130評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡领曼,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,467評(píng)論 2 325
  • 正文 我和宋清朗相戀三年唧喉,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,617評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡肺樟,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出贵白,到底是詐尸還是另有隱情墩新,我是刑警寧澤,帶...
    沈念sama閱讀 34,276評(píng)論 4 329
  • 正文 年R本政府宣布瓢省,位于F島的核電站锻梳,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏净捅。R本人自食惡果不足惜疑枯,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,882評(píng)論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望蛔六。 院中可真熱鬧荆永,春花似錦、人聲如沸国章。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,740評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)液兽。三九已至骂删,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間四啰,已是汗流浹背宁玫。 一陣腳步聲響...
    開封第一講書人閱讀 31,967評(píng)論 1 265
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留柑晒,地道東北人欧瘪。 一個(gè)月前我還...
    沈念sama閱讀 46,315評(píng)論 2 360
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像匙赞,于是被迫代替她去往敵國(guó)和親佛掖。 傳聞我的和親對(duì)象是個(gè)殘疾皇子妖碉,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,486評(píng)論 2 348

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