Javascript 中 class、建構子、工廠函數詳解-js教程-PHP中文網

到了ES6時代，我們創建物件的手段又增加了，在不同的場景下我們可以選擇不同的方法來建立。現在就主要有三種方法來建構對象，class關鍵字，建構函數，工廠函數。他們都是創造物件的手段，但是卻又有不同的地方，平時開發時，也需要針對這不同來選擇。本文主要介紹了詳解Javascript 中的 class、建構函數、工廠函數,需要的朋友可以參考下，希望能幫助大家。

首先我們來看一下，這三種方法是怎樣的

// class 关键字，ES6新特性
class ClassCar {
 drive () {
  console.log(&#39;Vroom!&#39;);
 }
}
const car1 = new ClassCar();
console.log(car1.drive());
// 构造函数
function ConstructorCar () {}
ConstructorCar.prototype.drive = function () {
 console.log(&#39;Vroom!&#39;);
};
const car2 = new ConstructorCar();
console.log(car2.drive());
// 工厂函数
const proto = {
 drive () {
  console.log(&#39;Vroom!&#39;);
 }
};
function factoryCar () {
 return Object.create(proto);
}
const car3 = factoryCar();
console.log(car3.drive());

登入後複製

這些方法都是基於原型的創建，而且都支援在建構時函數中私有變數的實作。換句話說，這些函數擁有著大部分相同的特性，甚至在許多場景下，他們是等價的。

在 Javascript 中，每個函數都能傳回一個新的物件。當它不是構造函數或類別的時候，它就被稱為工廠函數。

ES6的類別其實是建構子的語法糖（至少現階段是這樣實行的），所以接下來討論的所有內容都適用於建構子的也適用於ES6類別：

class Foo {}
console.log(typeof Foo); // function

登入後複製

建構子和ES6類別的好處

大部分的書會教你去用類別和建構子
' this ' 是指向新的這個物件的。
有些人喜歡new 關鍵字的可讀性
#也許還會有一些很小的細節方面的差別，但是如果在開發過程中沒有問題的話，也不用太擔心。

建構子和ES6類別的壞處

##1. 你需要new 關鍵字

到了ES6，建構子和類別都需要帶new 關鍵字。

function Foo() {
 if (!(this instanceof Foo)) { return new Foo(); }
}

登入後複製

在ES6中，如果你嘗試呼叫類別函數沒有 new 關鍵字就會拋出一個任務。如果要個不用 new 關鍵字的話，就只能用工廠函數把它包起來。

2. 實例化過程中的細節暴露給了外界API

所有的呼叫都緊緊的關聯到了構造器的實現上，如果你需要自己在構造過程中動一些手腳，那就是一個非常麻煩的事情了。

3. 建構器沒有遵守 Open / Closed 法則

因為 new 關鍵字的細節處理，建構者違反 Open / Closed 法則：API應該開放拓展，避免修改。

我曾經質疑過，類別和工廠函數是那麼的相似，把類別函數升級為一個工廠函數也不會有什麼影響，不過在JavaScript裡面，的確有影響。

如果你開始寫著建構函數或類，但是寫著寫著，你發現需要工廠函數的靈活性，這時候你不能簡單的就改改簡單改改函數一走了之。

不幸的是，你是個JavaScript程式設計師，建構器改造成工廠函數是一個大手術：

// 原来的实现：
// class Car {
//  drive () {
//   console.log(&#39;Vroom!&#39;);
//  }
// }
// const AutoMaker = { Car };
// 工厂函数改变的实现：
const AutoMaker = {
 Car (bundle) {
  return Object.create(this.bundle[bundle]);
 },
 bundle: {
  premium: {
   drive () {
    console.log(&#39;Vrooom!&#39;);
   },
   getOptions: function () {
    return [&#39;leather&#39;, &#39;wood&#39;, &#39;pearl&#39;];
   }
  }
 }
};
// 期望中的用法是：
const newCar = AutoMaker.Car(&#39;premium&#39;);
newCar.drive(); // &#39;Vrooom!&#39;
// 但是因为他是一个库
// 许多地方依然这样用:
const oldCar = new AutoMaker.Car();
// 如此就会导致:
// TypeError: Cannot read property &#39;undefined&#39; of
// undefined at new AutoMaker.Car

登入後複製

在上面例子裡面，我們從一個類別開始，最後把它改成來一個可以根據特定的原型來創建物件的工廠函數，這樣的函數可以廣泛應用於介面抽象和特殊需求自訂。

4. 使用建構器讓 instanceof 有可乘之機

建構子和工廠函式的差異就是 instanceof 運算子，很多人使用 instanceof 來確保自己程式碼的正確性。但說實話，這是有很大問題的，建議避免 instanceof 的使用。

instanceof 會說謊。

// instanceof 是一个原型链检查
// 不是一个类型检查
// 这意味着这个检查是取决于执行上下文的,
// 当原型被动态的重新关联,
// 你就会得到这样令人费解的情况
function foo() {}
const bar = { a: &#39;a&#39;};
foo.prototype = bar;
// bar是一个foo的实例吗，显示不是
console.log(bar instanceof foo); // false
// 上面我们看到了，他的确不是一个foo实例
// baz 显然也不是一个foo的实例，对吧?
const baz = Object.create(bar);
// ...不对.
console.log(baz instanceof foo); // true. oops.

登入後複製

instanceof 並不會像其他強型別語言那樣做檢查，他只是檢查了原型鏈上的物件。

在一些執行上下文中，他就會失效，例如你改變了 Constructor.prototype 的時候。

又例如你開始些的是一個建構函數或類，之後你又將它拓展為一個另一個對象，就像上面改寫成工廠函數的情況。這時候 instanceof 也會有問題。

總而言之， instanceof 是另一個建構子和工廠函式呼喚的大改變。

用類別的好處