js-創建對象的多種方式

1. 工廠模式

function createPerson(name) { var o = new Object(); o.name = name; o.getName = function () { console.log(this.name); }; return o; } var person1 = createPerson('kevin');

缺點:對象無法識別,因為所有的實例都指向一個原型

2. 構造函數模式

function Person(name) { this.name = name; this.getName = function () { console.log(this.name); }; } var person1 = new Person('kevin');

優點:實例可以識別為一個特定的類型

缺點:每次創建實例時,每個方法都要被創建一次

2.1 構造函數模式優化

function Person(name) { this.name = name; this.getName = getName; } function getName() { console.log(this.name); } var person1 = new Person('kevin');

優點:解決了每個方法都要被重新創建的問題

缺點:這叫啥封裝……

3. 原型模式

function Person(name) { } Person.prototype.name = 'keivn'; Person.prototype.getName = function () { console.log(this.name); }; var person1 = new Person();

優點:方法不會重新創建

缺點:1. 所有的屬性和方法都共享 2. 不能初始化參數

3.1 原型模式優化

function Person(name) { } Person.prototype = { name: 'kevin', getName: function () { console.log(this.name); } }; var person1 = new Person();

優點:封裝性好了一點

缺點:重寫了原型,丟失了constructor屬性

3.2 原型模式優化

function Person(name) { } Person.prototype = { constructor: Person, name: 'kevin', getName: function () { console.log(this.name); } }; var person1 = new Person();

優點:實例可以通過constructor屬性找到所屬構造函數

缺點:原型模式該有的缺點還是有

4. 組合模式

構造函數模式與原型模式雙劍合璧。

function Person(name) { this.name = name; } Person.prototype = { constructor: Person, getName: function () { console.log(this.name); } }; var person1 = new Person();

優點:該共享的共享,該私有的私有,使用最廣泛的方式

缺點:有的人就是希望全部都寫在一起,即更好的封裝性

4.1 動態原型模式

function Person(name) { this.name = name; if (typeof this.getName != "function") { Person.prototype.getName = function () { console.log(this.name); } } } var person1 = new Person();

注意:使用動態原型模式時,不能用對象字面量重寫原型

解釋下為什麼:

function Person(name) { this.name = name; if (typeof this.getName != "function") { Person.prototype = { constructor: Person, getName: function () { console.log(this.name); } } } } var person1 = new Person('kevin'); var person2 = new Person('daisy'); // 報錯 並沒有該方法 person1.getName(); // 註釋掉上面的代碼,這句是可以執行的。 person2.getName();

為了解釋這個問題,假設開始執行var person1 = new Person('kevin')。

如果對 new 和 apply 的底層執行過程不是很熟悉,可以閱讀底部相關鏈接中的文章。

我們回顧下 new 的實現步驟:

首先新建一個對象然後將對象的原型指向 Person.prototype然後 Person.apply(obj)返回這個對象

注意這個時候,回顧下 apply 的實現步驟,會執行 obj.Person 方法,這個時候就會執行 if 語句裡的內容,注意構造函數的 prototype 屬性指向了實例的原型,使用字面量方式直接覆蓋 Person.prototype,並不會更改實例的原型的值,person1 依然是指向了以前的原型,而不是 Person.prototype。而之前的原型是沒有 getName 方法的,所以就報錯了!

如果你就是想用字面量方式寫代碼,可以嘗試下這種:

function Person(name) { this.name = name; if (typeof this.getName != "function") { Person.prototype = { constructor: Person, getName: function () { console.log(this.name); } } return new Person(name); } } var person1 = new Person('kevin'); var person2 = new Person('daisy'); person1.getName(); // kevin person2.getName(); // daisy

5.1 寄生構造函數模式

function Person(name) { var o = new Object(); o.name = name; o.getName = function () { console.log(this.name); }; return o; } var person1 = new Person('kevin'); console.log(person1 instanceof Person) // false console.log(person1 instanceof Object) // true

寄生構造函數模式,我個人認為應該這樣讀:

寄生-構造函數-模式,也就是說寄生在構造函數的一種方法。

也就是說打著構造函數的幌子掛羊頭賣狗肉,你看創建的實例使用 instanceof 都無法指向構造函數!

這樣方法可以在特殊情況下使用。比如我們想創建一個具有額外方法的特殊數組,但是又不想直接修改Array構造函數,我們可以這樣寫:

function SpecialArray() { var values = new Array(); for (var i = 0, len = arguments.length; i < len; i++) { values.push(arguments[i]); } values.toPipedString = function () { return this.join("|"); }; return values; } var colors = new SpecialArray('red', 'blue', 'green'); var colors2 = SpecialArray('red2', 'blue2', 'green2'); console.log(colors); console.log(colors.toPipedString()); // red|blue|green console.log(colors2); console.log(colors2.toPipedString()); // red2|blue2|green2

你會發現,其實所謂的寄生構造函數模式就是比工廠模式在創建對象的時候,多使用了一個new,實際上兩者的結果是一樣的。

但是作者可能是希望能像使用普通 Array 一樣使用 SpecialArray,雖然把 SpecialArray 當成函數也一樣能用,但是這並不是作者的本意,也變得不優雅。

在可以使用其他模式的情況下,不要使用這種模式。

但是值得一提的是,上面例子中的循環:

for (var i = 0, len = arguments.length; i < len; i++) { values.push(arguments[i]); }

可以替換成:

values.push.apply(values, arguments);

5.2 穩妥構造函數模式

function person(name){ var o = new Object(); o.sayName = function(){ console.log(name); }; return o; } var person1 = person('kevin'); person1.sayName(); // kevin person1.name = "daisy"; person1.sayName(); // kevin console.log(person1.name); // daisy

所謂穩妥對象,指的是沒有公共屬性,而且其方法也不引用 this 的對象。