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

myshell 發布于2019-08-26 12:19 / 2946人閱讀

摘要：其實在之前的工廠模式里面，也存在這個問題，不過工廠模式更徹底，直接完全創建一個新對象，而構造函數模式的話只是方法會被重新創建。

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

很多job 的描述都說要求精通 javascript 面向對象編程，但是根據一般的套路，寫精通其實就是熟練，寫熟練其實就是一般，寫一般其實就是懵逼！

雖然話說如此，但是我們還是要熟練使用 javascript 面向對象編程的，畢竟這是js社會高能人才的其中一個標準，這里我就用一個鮮活的例子來說明和理解我們應該如何使用javascript 面向對象的方式來編程。

一、野蠻方式構建對象

剛開始最初，我們創建對象的方式是這樣的：

// 。。。。每次都要寫上面的一大段代碼，只是為了創建一個 food
var food = new Object();
food.name = "蘋果";

food.sayName = function() {
  console.log("我是" + this.name);
};

但是這樣創建起來很麻煩，寫的代碼也是很長，如果要創建好多對象，例如我制造了10000個食物，就要寫10000次這一大段代碼了，所以后來聰明的工程師改為了這樣寫：

// 起碼比之前的少了幾行，也整潔了一些
var food = {
  name: "蘋果",
  sayName: function() {
    console.log("我是" + this.name);
  }
};

起碼代碼少了一些，但是還是沒辦法很好解決我要寫100000段代碼的問題，所以再后來的人們就開始使用一些高級玩意來解決這個問題。

二、使用工廠模式構建對象

通過抽象出創建具體對象的過程，用函數來進行封裝，換句話來說，就是抽象了一個 food 的工廠，然后通過對這個工廠傳入不同的材料，來生成不同的食物。

function createFood(name) {
  var o = new Object();
  o.name = name;
  o.sayName = function() {
    console.log("我是" + this.name);
  };
  return o;
}

var food1 = createFood("蘋果");
var food2 = createFood("蘋果");

這里可以看到food1，food2 就是這樣被制造出來的，然后只需要少量的代碼（預先定義好一個生產工廠函數），就可以完成大量的事情，徹底解決了問題，實現了多快好爽的新局面。但是用了一段時間之后，隨之而來發現一個新問題，當食物多起來的時候，老板貌似不知道哪些食物是屬于那些分類的（假設老板是 zz），那怎么辦呢？

// 都統一返回是[Function: Object]，沒辦法用區分識別（賣個關子，你不用管那個constructor）
console.log(food1.constructor) // 返回[Function: Object]
console.log(food2.constructor) // 返回[Function: Object]

三、使用構造函數模式來區分自己人

經過一番智慧交流之后，聰明的人們想出了一個方法，使用一個在對象里面的 constructor 函數來識別那些不一樣的對象，類似使用部門工牌來標記這個人是是屬于哪個部門的。

function Food(name) {
  this.name = name;
  this.sayName = function() {
    console.log("我是" + this.name);
  };
}

var food1 = new Food("蘋果");
var food2 = new Food("蘋果");

// 假設這里有一個其他的食物，可能是冒充的
var food3 = new otherFood("蘋果");

因為要實現類似工牌的方式來識別，所以在創建food的工廠里做一些調整：

沒有顯式的創建對象，例如：var o = new Object();

直接將屬性和方法付給了 this 對象

沒有 return 語句

函數使用了大寫字母開頭（這里只是為了區分這個函數的特別，按照慣例，大寫字母開頭的，一般都是 class 或者構造函數）

使用了 new 來創建Food`對象

做了以上的改變之后，整個創建對象的模式被改變了：

首先定義了一個 Food 的構造函數（其實就是之前的工廠函數createFood，但是現在升級了）

通過 new 來創建一個對象（現在的 Food 用 new 來先創建）

將構造函數的作用域賦值給新對象，將this指向這個新對象（將升級版的工廠送給這個用 new 創建的 food）

執行構造函數的中的代碼（升級版的工廠會自動將里面的零件和機器放到新的 Food 上，相當于組裝放在了食物本身身上）

不需要主動 return，自動返回新對象（升級版的工廠會自動返回構造好的 food 對象）

通過這種方式，我們制造出來的食物都會有一個 constructor 為 Food 的標記來標識，如果看到不是的話，那肯定就不是我們制造的。

console.log(food1.constructor) // 返回[Function: Food]
console.log(food2.constructor) // 返回[Function: Food]
console.log(food3.constructor) // 返回[Function: OtherFood]

// 檢驗的方式有兩種
console.log(food1.constructor == Food) // 返回 true
console.log(food2.constructor == Food) // 返回 true
console.log(food3.constructor == Food) // 返回 false ，這個不是我們制造的食物

console.log(food1 instanceof Food) // 返回 true
console.log(food3 instanceof Food) // 返回 false，這個不是我們制造的食物

可以看到，使用了新技術（constructor模式技術）之后，在沒有增加工作量的情況下，解決了令人頭痛的問題，簡直是完美，不過過了一段時間之后，發現好像還是有些瑕疵，使用構造函數constructor模式的時候，函數里面的每個方法都會在每個實例上重新創建一遍，那么最明顯的地方是：

console.log(food1.sayName == food2.sayName); // 返回 false

因為使用new來創建實例，new的話還會把構造函數里面的方法也一起創建，因為方法也是函數，而函數的實例化也會被new觸發：

// 省略了其他部分，只關注方法部分
this.sayName = function() {
    console.log("我是" + this.name);
};

this.sayName = new function() {
    console.log("我是" + this.name);
}();

這樣就會造成內存和時間和性能的浪費，明明不需要重新重建新的函數實例的。

其實在之前的工廠模式里面，也存在這個問題，不過工廠模式更徹底，直接完全創建一個新對象，而構造函數模式的話只是方法會被重新創建。

那怎么解決呢？會用到原型模式，下回分解。

參考內容

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

版權信息

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

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

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

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

摘要：二動態原型模式動態原型模式的特點是，在構造函數里面增加判斷處理是否添加原型對象屬性。他依然有一個嚴重的問題，就是原型對象和實例和構造函數之間沒辦法關聯，這樣不適合在有一定規模復雜度的程序開發中使用。續上一集內容，有一些數據不需要共享的時候，但是又想實現共享數據處理，魚與熊掌，都要兼得（老板就是這么霸氣），那么經過工程師們的智慧交流，他們發現現實并非那么殘酷，還有一些辦法可取的，也就是...

Elle 2019-08-23 11:30 評論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