原文出處
JavaScript深入之創(chuàng)建對(duì)象的多種方式以及優(yōu)缺點(diǎn)
JavaScript高級(jí)程序設(shè)計(jì)（第3版）
1.工廠模式
function createPerson(name, age, job) {
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function () {
alert(this.name);
}
return o;
}
var person1 = createPerson("Nicholas", 29, "Software Engineer");
var person2 = createPerson("Greg", 27, "Doctor");
console.log(person1.__proto__ === Object.prototype); // true
console.log(person2.__proto__ === Object.prototype); // true
缺點(diǎn)：對(duì)象無法識(shí)別，因?yàn)樗械膶?shí)例的類型都是Object
2.構(gòu)建函數(shù)模式
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.sayName = function () {
alert(this.name);
}
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
console.log(person1 instanceof Person); // true
console.log(person2 instanceof Person); // true
console.log(person1.sayName === person2.sayName); // false
優(yōu)點(diǎn)：實(shí)例可以識(shí)別為一個(gè)特定的類型
缺點(diǎn)：每次創(chuàng)建實(shí)例時(shí)，每個(gè)方法都要被創(chuàng)建一次
2.1 構(gòu)造函數(shù)優(yōu)化
function Person(name) {
this.name = name;
this.getName = getName;
}
function getName() {
console.log(this.name);
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
console.log(person1.sayName === person2.sayName); // true
優(yōu)點(diǎn)：解決了每個(gè)方法都要被重新創(chuàng)建的問題
缺點(diǎn)：封裝不好
3.原型模式
function Person(name, age, job) {}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function() {
alert(this.name);
};
var person1 = new Person();
person1.sayName(); //"Nicholas"
var person2 = new Person();
person2.sayName(); //"Nicholas"
console.log(person1.sayName == person2.sayName); //true
優(yōu)點(diǎn): 方法不會(huì)重新創(chuàng)建
缺點(diǎn): 1. 所有的屬性和方法都共享 2. 不能初始化參數(shù)
3.1 原型模式優(yōu)化
function Person() {}
Person.prototype = {
name: "Nicholas",
age: 29,
job: "Software Engineer",
sayName: function () {
alert(this.name);
}
};
var person1 = new Person();
console.log(person1.__proto__.constructor === Object); //true
優(yōu)點(diǎn)：封裝好一點(diǎn)
缺點(diǎn)：之前的所有缺點(diǎn)都還存在，并且構(gòu)建函數(shù)的原型對(duì)象的constructor屬性已經(jīng)丟失
3.2 原型模式優(yōu)化
function Person() {}
var friend = new Person();
Person.prototype = {
constructor: Person,
name: "Nicholas",
age: 29,
sayName: function () {
alert(this.name);
}
};
console.log(Person.prototype.constructor === Person); //true
console.log(friend.__proto__.constructor === Person); //true
優(yōu)點(diǎn): 在上一次優(yōu)化的基礎(chǔ)上修復(fù)了constructor屬性丟失的問題
缺點(diǎn): 之前的所有缺點(diǎn)都還存在
4組合模式
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.friends = ["Shelby", "Court"];
}
Person.prototype = {
constructor: Person,
sayName: function () {
alert(this.name);
}
};
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
console.log(person1.friends === person2.friends); //false
console.log(person1.sayName === person2.sayName); //true
優(yōu)點(diǎn): 可以初始化參數(shù)，且該共享的共享，該私有的私有，是使用最廣泛的方式
缺點(diǎn)：有的人就是希望全部都寫在一起，即更好的封裝性
4.1 動(dòng)態(tài)原型模式
function Person(name, age, job) {
//屬性
this.name = name;
this.age = age;
this.job = job;
this.friends = [1, 2, 3]
//方法
if (typeof this.sayName != "function") {
Person.prototype.sayName = function () {
alert(this.name);
}
};
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
console.log(person1.sayName === person2.sayName); //true
console.log(person1.friends === person2.friends); //false
優(yōu)點(diǎn): 擁有上面的所有優(yōu)點(diǎn)，且封裝比上面好
注意：使用動(dòng)態(tài)原型模式時(shí)，不能用對(duì)象字面量重寫原型
看下面代碼：
function Person(name) {
if (typeof this.getName != "function") {
Person.prototype = {
constructor: Person,
name: "Nicholas",
age: 29,
job: "Software Engineer",
sayName: function () {
console.log(this.name);
}
}
}
}
var friend = new Person('kevin');
// 報(bào)錯(cuò) 并沒有該方法
friend.sayName();
在這個(gè)例子中，我們先創(chuàng)建了Person的一個(gè)實(shí)例，然后又重寫了其原型對(duì)象，然后在調(diào)用friend.sayName()時(shí)發(fā)生了錯(cuò)誤，因?yàn)閒riend指向的原型中不包含以該名字命名的屬性。，過程如下圖所示:
5.寄生構(gòu)造函數(shù)模式
function Person(name, age, job) {
var o = new Object();
o.age = age;
o.name = name;
o.job = job;
o.sayName = function () {
alert(this.name);
};
return o;
}
var friend = new Person("Nicholas", 29, "Software Engineer");
console.log(friend instanceof Person); //false
console.log(friend.__proto__ === Object.prototype); //true
缺點(diǎn): 無法確定對(duì)象類型，建議在可以使用其他模式的情況下，不要使用這種模式
優(yōu)點(diǎn): 這樣方法可以在特殊情況下使用。比如我們想創(chuàng)建一個(gè)具有額外方法的特殊數(shù)組，但是又不想直接修改Array構(gòu)造函數(shù)，如下
function SpecialArray() {
//創(chuàng)建數(shù)組
var values = new Array();
//添加值
values.push.apply(values, arguments);
//添加方法
values.toPipedString = function () {
return this.join("|");
};
//返回?cái)?shù)組
return values;
}
var colors = new SpecialArray("red", "blue", "green");
alert(colors.toPipedString()); //"red|blue|green"
6.穩(wěn)妥構(gòu)造函數(shù)模式
function Person(name, age, job) {
var o = new Object();
o.sayName = function () {
console.log(name);
};
return o;
}
var friend = Person("Nicholas", 29, "Software Engineer");
friend.sayName(); //Nicholas
優(yōu)點(diǎn)：安全，除了調(diào)用 sayName() 方法外，沒有別的方式可以訪問其name屬性
缺點(diǎn)：無法識(shí)別對(duì)象所屬類型
穩(wěn)妥構(gòu)造函數(shù)遵循與寄生構(gòu)造函數(shù)類似的模式，但有兩點(diǎn)不同：
1. 是新創(chuàng)建對(duì)象的實(shí)例方法不引用 this ；
2. 是不使用 new 操作符調(diào)用構(gòu)造函數(shù)
