上回說(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