我來重新學習 javascript 的面向對象（part 3）

Elle 發布于2019-08-23 11:30 / 2405人閱讀

摘要：二動態原型模式動態原型模式的特點是，在構造函數里面增加判斷處理是否添加原型對象屬性。他依然有一個嚴重的問題，就是原型對象和實例和構造函數之間沒辦法關聯，這樣不適合在有一定規模復雜度的程序開發中使用。

續上一集內容，有一些數據不需要共享的時候，但是又想實現共享數據處理，魚與熊掌，都要兼得（老板就是這么霸氣），那么經過工程師們的智慧交流，他們發現現實并非那么殘酷，還有一些辦法可取的，也就是組合使用構造函數模式和原型模式 和 動態原型模式

一、組合使用構造函數模式和原型模式

組合使用構造函數模式和原型模式的特點主要體現在：

構造函數模式用于定義實例屬性

原型模式用于定義方法和共享屬性

效果就是，每個實例對象都會有自己的一份實例屬性，但又同時又共享著對方法的引用，既節省了資源也滿足了業務要求。

// 構造函數用于定義實例屬性
function Food(name) {
  this.name = name;
  this.place = ["巴西", "印度"];
}
// 原型模式用于定義方法和共享屬性
Food.prototype = {
  constructor: Food,
  sayName: function() {
    console.log("我是" + this.name);
  }
};

var food1 = new Food("蘋果");
var food2 = new Food("蘋果");
console.log(food1.place == food2.place); // 返回 false
food2.place.push("俄羅斯");
console.log(food1.place); // 返回 [ "巴西", "印度" ]
console.log(food2.place); // 返回 [ "巴西", "印度", "俄羅斯" ]

可以看到 palce 數組并不是同一個，并且通過對 food2的 place 數組賦值之后也不會影響 food1的 palce 數組的值，證明他們是互相獨立的。

之所以有這么屌炸天的效果，就是因為利用了構造函數和原型模式各自的特點，互相補充。

二、動態原型模式

動態原型模式的特點是，在構造函數里面增加判斷處理是否添加原型對象屬性。

function Food(name, place) {
  this.name = name;
  this.place = place;
  if (typeof this.sayName !== "function") {
    Food.prototype.sayName = function() {
      console.log("我是" + this.name);
    };
  }
}

var food1 = new Food("蘋果", ["巴西", "印度"]);
food1.sayName(); // 返回 我是蘋果

通過在構造函數執行的時候來判斷是否將共享的東西添加到原型對象里面，這樣就不怕之前出現的先 new 實例化對象，然后再添加原型對象的屬性的問題了（回想一下原型對象被重寫之后，原型對象丟失，實例無法使用原來的原型對象的數據的問題）。

更符合 OOP 開發習慣，不需要將構造函數和原型對象分開多帶帶處理，可以寫在一起。

動態原型模式和組合使用構造函數模式和原型模式的原理其實很類似，都是各自利用了構造函數和原型模式的獨特的特點來實現的，不過在實現的過程中用了一些取巧，所以導致了他們的分別，細細回想一下就明白了。

三、寄生構造函數模式

這個只是了解一下即可，因為實際中用得不多，但是需要擴大知識面，無論從裝逼還是裝逼都還是需要的。

寄生這個詞其實不太好理解，英文原文是叫 parasitic 直接翻譯過來就是寄生了。如果硬要理解，就是創建的實例對象其實是依附上去的，跟構造函數和原型對象本身并沒有任何關系，就好像寄生蟲和動物，他們僅僅只是寄生在上面而已。

function Food(name) {
  var o = new Object(); 
  o.name = name;
  o.sayName = function() {
    console.log("我是" + this.name);
  };
  return o; // 重寫返回值
}

var food1 = new Food("蘋果");
console.log(food1.name); // 返回 蘋果
food1.sayName(); // 返回 我是蘋果

這里跟工廠模式極其相似，但這里使用了 new 進行實例化，換言之，也就是執行了構造函數來進行實例化。

構造函數在不返回值的情況下，默認會返回新對象實例，而通過構造函數的末尾添加一個 return 語句，可以重寫這個返回值。

因為每次都是new Object(); ，而且構造函數的返回值被重寫了，也就是說這個返回的新對象跟構造函數，跟原型對象是沒有關系的，他們同時具有工廠函數和構造函數的缺點。

這里能夠訪問 name，因為這里的 name 屬性是暴露到返回的對象上面了，成為返回的對象的屬性，就跟 sayName 方法一樣，可以被外部訪問了。

他有一個嚴重的問題，就是原型對象和實例和構造函數之間沒辦法關聯，這樣不適合在有一定規模復雜度的程序開發中使用。（因為他每次都會new Object()，重置原型對象的信息）

四、穩妥構造函數模式

這個只是了解一下即可，因為實際中我還沒用過，但是需要擴大知識面，無論從裝逼還是裝逼都還是需要的。

所謂穩妥對象，是指沒有公共屬性，而且其方法也不引用 this 對象，而且也不能被篡改，穩得一逼。

function Food(name) {
  var o = new Object();
  var color = "red";
  o.sayName = function() {
    console.log("我是" + name);
    console.log("顏色是" + color);
  };
  return o;
}

var food1 = Food("蘋果");
console.log(food1.name); // 返回 undefined
console.log(food1.color); // 返回 undefined
food1.sayName(); // 返回 我是蘋果，顏色是red

可以看到這里不使用this，也不使用 new 來實例化對象。

不能通過其他方式訪問 name 屬性，因為沒有name 屬性沒有被暴露出來。

只能通過暴露出來的方法來訪問對象內部的屬性，間接保護了內部私有屬性。

穩妥模式適合在一些安全環境（禁止使用 this，并且也需要保護私有屬性）里面使用。
 他依然有一個嚴重的問題，就是原型對象和實例和構造函數之間沒辦法關聯，這樣不適合在有一定規模復雜度的程序開發中使用。（因為他每次都會new Object()，重置原型對象的信息）

五、文末我們又遇到新問題了

公司業務越來越大了，公司的產品需要做一些分類，例如動物要分肉食動物，菜食動物，食物要分水果和蔬菜和肉類等，水果下面還要分蘋果，香蕉等等，要是按照現在的模式，看來是要有多少種就要寫多少種，然后還可能會導致一些種類屬性重復，老司機一眼就看出來，需要做一些種類繼承了，但是要怎么做呢？

參考內容

紅寶書，javascript 高級程序設計第三版

淺談穩妥構造函數模式的實現原理與機制

版權信息

作者: 慫如鼠
網站: https://www.whynotbetter.com
本作品著作權歸作者所有，商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/97053.html

我來重新學習 javascript 的面向對象（part 1）

摘要：其實在之前的工廠模式里面，也存在這個問題，不過工廠模式更徹底，直接完全創建一個新對象，而構造函數模式的話只是方法會被重新創建。我來重新學習 javascript 的面向對象（part 1）很多job 的描述都說要求精通 javascript 面向對象編程，但是根據一般的套路，寫精通其實就是熟練，寫熟練其實就是一般，寫一般其實就是懵逼！ showImg(https://segment...

myshell 2019-08-26 12:19 評論0 收藏0
我來重新學習js的面向對象（part 4）

摘要：我是的可以改變函數的對象的指向拋出異常，沒有這個因為子類和超類都是構造函數，那么就會有之前說的，構造函數在的時候，里面的方法函數會重復創建實例，導致資源浪費。我來重新學習js 的面向對象（part 4）續上一篇，隨著業務越來越大，要考慮一些繼承的玩意了，大千世界，各種東西我們要認識和甄別是需要靠大智慧去分門別類，生物學中把動植物按界、門、綱、目、科、屬、種進行分類的方法可能是最有代...

MAX_zuo 2019-08-23 12:19 評論0 收藏0
我來重新學習 javascript 的面向對象（part 2）

摘要：先來說其實構造函數也有，原型對象有，實例有也有，或者更加籠統的說，所有對象都是有的。構造函數的原型對象上的會指向構造函數。由于屬性是可以變更的，所以未必真的指向對象的構造函數，只是一個提示。續上一集內容，通過構造函數的方式，成功地更新了生產技術，老板笑呵呵，工人少奔波，只是問題總比辦法多，又遇到一個新問題，就是會造成一些資源的重復和浪費，那么經過工程師們的智慧交流，他們產生了一個新技...

silvertheo 2019-08-26 12:19 評論0 收藏0
我來重新學習js 的面向對象（part 5）

摘要：無限增殖返回蘋果返回香蕉返回返回使用的新語法方法會創建一個新對象，使用現有的對象來提供新創建的對象的。是新增的，用來規范原型式繼承。這里將返回的新對象放到子類的原型對象里面，這樣子類就擁有了父類的原型對象，也就實現了方法的繼承。這是最后的最后了，我會順便總結一下各種繼承方式的學習和理解。（老板要求什么的，管他呢）一、繼承-組合繼承、偽經典繼承 showImg(https://seg...

BicycleWarrior 2019-08-23 12:20 評論0 收藏0
2017年最好的javascript 書籍

摘要：請記住，這些書中的一些可能不是最新的，但概念和基礎仍應適用。是最好的老師之一。的秘密由部分組成。在你完成這些書后，查看書籍和最好的本土書籍。我看過三本，第1本，第二本，第四本。第一本買的的實體書，其他兩本看的是電子書。第一本是大名鼎鼎老道寫的，書很薄，但是非常經典。javascirpt忍者秘籍是jquery的作者寫的，也是非常經典。you dont kown js系列也是非常好。看了...

mingzhong 2019-08-20 15:05 評論0 收藏0