摘要:與寄生構造函數模式有兩點不同新創建的實例方法不引用不使用操作符調用構造函數穩妥對象最適合在一些安全的環境中。穩妥構造函數模式也跟工廠模式一樣,無法識別對象所屬類型。
1. 工廠模式
function createPerson(name) { var o = new Object(); o.name = name; o.getName = function () { console.log(this.name); }; return o; } var person1 = createPerson("kevin");
缺點:對象無法識別,因為所有的實例都指向一個原型object
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. 不能初始化參數
補充:
Person.prototype.isPrototypeOf(person1) 判斷原型和對象的關系
Object.getPrototypeOf(person1) 獲取實例的原型
原型鏈 - 實例屬性覆蓋原型屬性
“name” in person1 對象是否能夠訪問該屬性,無論是實例還是原型中
Person1.hasOwnProperty(“name”) 是否為實例屬性
For…in… 能夠通過對象訪問,可枚舉的屬性 實例+原型
object.keys() 所有可枚舉的實例屬性
Object.getOwnPropertyNames() 所有實力屬性,無論是否可枚舉
3.1 原型模式優化
function Person(name) { } Person.prototype = { name: "kevin", getName: function () { console.log(this.name); } }; var person1 = new Person();
優點:封裝性好了一點
缺點:重寫了原型,丟失了constructor屬性,此時constructor指向object的構造函數
Instanceof 仍然可以
3.2 原型模式優化
function Person(name) { } Person.prototype = { constructor: Person, name: "kevin", getName: function () { console.log(this.name); } }; var person1 = new Person();
優點:實例可以通過constructor屬性找到所屬構造函數
缺點:原型模式該有的缺點還是有
還可以再優化:constructor屬性應該是不可枚舉的
Object.defineProperty(Person.prototype, “constructor”, {
Enumerable: false, Value: Person
})
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 的對象。
與寄生構造函數模式有兩點不同:
新創建的實例方法不引用 this
不使用 new 操作符調用構造函數
穩妥對象最適合在一些安全的環境中。
穩妥構造函數模式也跟工廠模式一樣,無法識別對象所屬類型。intsanceof無意義
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/98244.html
摘要:深入系列第七篇,結合之前所講的四篇文章,以權威指南的為例,具體講解當函數執行的時候,執行上下文棧變量對象作用域鏈是如何變化的。前言在深入之執行上下文棧中講到,當代碼執行一段可執行代碼時,會創建對應的執行上下文。 JavaScript深入系列第七篇,結合之前所講的四篇文章,以權威指南的demo為例,具體講解當函數執行的時候,執行上下文棧、變量對象、作用域鏈是如何變化的。 前言 在《Jav...
摘要:下面,讓我們以一個函數的創建和激活兩個時期來講解作用域鏈是如何創建和變化的。這時候執行上下文的作用域鏈,我們命名為至此,作用域鏈創建完畢。 JavaScript深入系列第五篇,講述作用鏈的創建過程,最后結合著變量對象,執行上下文棧,讓我們一起捋一捋函數創建和執行的過程中到底發生了什么? 前言 在《JavaScript深入之執行上下文棧》中講到,當JavaScript代碼執行一段可執行代...
摘要:深入系列第四篇,具體講解執行上下文中的變量對象與活動對象。下一篇文章深入之作用域鏈本文相關鏈接深入之執行上下文棧深入系列深入系列目錄地址。 JavaScript深入系列第四篇,具體講解執行上下文中的變量對象與活動對象。全局上下文下的變量對象是什么?函數上下文下的活動對象是如何分析和執行的?還有兩個思考題幫你加深印象,快來看看吧! 前言 在上篇《JavaScript深入之執行上下文棧》中...
摘要:深入系列第十四篇,講解創建對象的各種方式,以及優缺點。也就是說打著構造函數的幌子掛羊頭賣狗肉,你看創建的實例使用都無法指向構造函數這樣方法可以在特殊情況下使用。 JavaScript深入系列第十四篇,講解創建對象的各種方式,以及優缺點。 寫在前面 這篇文章講解創建對象的各種方式,以及優缺點。 但是注意: 這篇文章更像是筆記,因為《JavaScript高級程序設計》寫得真是太好了! 1....
摘要:深入系列第八篇,介紹理論上的閉包和實踐上的閉包,以及從作用域鏈的角度解析經典的閉包題。定義對閉包的定義為閉包是指那些能夠訪問自由變量的函數。 JavaScript深入系列第八篇,介紹理論上的閉包和實踐上的閉包,以及從作用域鏈的角度解析經典的閉包題。 定義 MDN 對閉包的定義為: 閉包是指那些能夠訪問自由變量的函數。 那什么是自由變量呢? 自由變量是指在函數中使用的,但既不是函數參數也...
摘要:本計劃一共期,每期重點攻克一個面試重難點,如果你還不了解本進階計劃,點擊查看前端進階的破冰之旅本期推薦文章深入之執行上下文棧和深入之變量對象,由于微信不能訪問外鏈,點擊閱讀原文就可以啦。 (關注福利,關注本公眾號回復[資料]領取優質前端視頻,包括Vue、React、Node源碼和實戰、面試指導) 本周正式開始前端進階的第一期,本周的主題是調用堆棧,今天是第二天。 本計劃一共28期,每期...
閱讀 1944·2021-10-12 10:12
閱讀 3072·2019-08-30 15:44
閱讀 843·2019-08-30 15:43
閱讀 2994·2019-08-30 14:02
閱讀 2076·2019-08-30 12:54
閱讀 3497·2019-08-26 17:05
閱讀 1980·2019-08-26 13:34
閱讀 1051·2019-08-26 11:54