摘要:深入系列第十四篇,講解創建對象的各種方式,以及優缺點。也就是說打著構造函數的幌子掛羊頭賣狗肉,你看創建的實例使用都無法指向構造函數這樣方法可以在特殊情況下使用。
寫在前面JavaScript深入系列第十四篇,講解創建對象的各種方式,以及優缺點。
這篇文章講解創建對象的各種方式,以及優缺點。
但是注意:
這篇文章更像是筆記,因為《JavaScript高級程序設計》寫得真是太好了!
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(); // daisy5.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 操作符調用構造函數
穩妥對象最適合在一些安全的環境中。
穩妥構造函數模式也跟工廠模式一樣,無法識別對象所屬類型。
下一篇文章JavaScript深入之繼承的多種方式和優缺點
相關鏈接《JavaScript深入之從原型到原型鏈》
《JavaScript深入之new的模擬實現》
《JavaScript深入之call和apply的模擬實現》
深入系列JavaScript深入系列目錄地址:https://github.com/mqyqingfeng/Blog。
JavaScript深入系列預計寫十五篇左右,旨在幫大家捋順JavaScript底層知識,重點講解如原型、作用域、執行上下文、變量對象、this、閉包、按值傳遞、call、apply、bind、new、繼承等難點概念。
如果有錯誤或者不嚴謹的地方,請務必給予指正,十分感謝。如果喜歡或者有所啟發,歡迎star,對作者也是一種鼓勵。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/86979.html
摘要:寫在前面深入系列共計篇已經正式完結,這是一個旨在幫助大家,其實也是幫助自己捋順底層知識的系列。深入系列自月日發布第一篇文章,到月日發布最后一篇,感謝各位朋友的收藏點贊,鼓勵指正。 寫在前面 JavaScript 深入系列共計 15 篇已經正式完結,這是一個旨在幫助大家,其實也是幫助自己捋順 JavaScript 底層知識的系列。重點講解了如原型、作用域、執行上下文、變量對象、this、...
摘要:深入系列第十五篇,講解各種繼承方式和優缺點。優點融合原型鏈繼承和構造函數的優點,是中最常用的繼承模式。寄生組合式繼承為了方便大家閱讀,在這里重復一下組合繼承的代碼組合繼承最大的缺點是會調用兩次父構造函數。 JavaScript深入系列第十五篇,講解JavaScript各種繼承方式和優缺點。 寫在前面 本文講解JavaScript各種繼承方式和優缺點。 但是注意: 這篇文章更像是筆記,哎...
摘要:深入之繼承的多種方式和優缺點深入系列第十五篇,講解各種繼承方式和優缺點。對于解釋型語言例如來說,通過詞法分析語法分析語法樹,就可以開始解釋執行了。 JavaScript深入之繼承的多種方式和優缺點 JavaScript深入系列第十五篇,講解JavaScript各種繼承方式和優缺點。 寫在前面 本文講解JavaScript各種繼承方式和優缺點。 但是注意: 這篇文章更像是筆記,哎,再讓我...
摘要:在客戶端中,一些方法等也返回類數組對象。對象接下來重點講講對象。在函數體中,指代該函數的對象。下一篇文章深入之創建對象的多種方式以及優缺點深入系列深入系列目錄地址。 JavaScript深入系列第十三篇,講解類數組對象與對象的相似與差異以及arguments的注意要點 類數組對象 所謂的類數組對象: 擁有一個 length 屬性和若干索引屬性的對象 舉個例子: var array = ...
摘要:在他的重學前端課程中提到到現在為止,前端工程師已經成為研發體系中的重要崗位之一。大部分前端工程師的知識,其實都是來自于實踐和工作中零散的學習。一基礎前端工程師吃飯的家伙,深度廣度一樣都不能差。 開篇 前端開發是一個非常特殊的行業,它的歷史實際上不是很長,但是知識之繁雜,技術迭代速度之快是其他技術所不能比擬的。 winter在他的《重學前端》課程中提到: 到現在為止,前端工程師已經成為研...
閱讀 1376·2021-11-15 18:11
閱讀 2508·2021-08-19 10:56
閱讀 669·2021-08-09 13:42
閱讀 785·2019-08-30 15:53
閱讀 2078·2019-08-30 10:55
閱讀 3137·2019-08-29 17:18
閱讀 1427·2019-08-29 13:45
閱讀 537·2019-08-29 13:15