詳解Javascript 中的 class、構造函數、工廠函數

2024-05-06 16:41:30

字體：大中小

來源：轉載

供稿：網友

到了ES6時代，我們創建對象的手段又增加了，在不同的場景下我們可以選擇不同的方法來建立。現在就主要有三種方法來構建對象，class關鍵字，構造函數，工廠函數。他們都是創建對象的手段，但是卻又有不同的地方，平時開發時，也需要針對這不同來選擇。

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

// class 關鍵字，ES6新特性class ClassCar { drive () {  console.log('Vroom!'); }}const car1 = new ClassCar();console.log(car1.drive());// 構造函數function ConstructorCar () {}ConstructorCar.prototype.drive = function () { console.log('Vroom!');};const car2 = new ConstructorCar();console.log(car2.drive());// 工廠函數const proto = { drive () {  console.log('Vroom!'); }};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('Vroom!');//  }// }// const AutoMaker = { Car };// 工廠函數改變的實現：const AutoMaker = { Car (bundle) {  return Object.create(this.bundle[bundle]); }, bundle: {  premium: {   drive () {    console.log('Vrooom!');   },   getOptions: function () {    return ['leather', 'wood', 'pearl'];   }  } }};// 期望中的用法是：const newCar = AutoMaker.Car('premium');newCar.drive(); // 'Vrooom!'// 但是因為他是一個庫// 許多地方依然這樣用:const oldCar = new AutoMaker.Car();// 如此就會導致:// TypeError: Cannot read property 'undefined' of// undefined at new AutoMaker.Car

在上面例子里面，我們從一個類開始，最后把它改成來一個可以根據特定的原型來創建對象的工廠函數，這樣的函數可以廣泛應用于接口抽象和特殊需求定制。

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

構造函數和工廠函數的不同就是 instanceof 操作符，很多人使用 instanceof 來確保自己代碼的正確性。但是說實話，這是有很大問題的，建議避免 instanceof 的使用。

instanceof 會說謊。

// instanceof 是一個原型鏈檢查// 不是一個類型檢查// 這意味著這個檢查是取決于執行上下文的,// 當原型被動態的重新關聯,// 你就會得到這樣令人費解的情況function foo() {}const bar = { a: 'a'};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 是另一個構造函數和工廠函數呼喚的大改變。

用類的好處

一個方便的，自包含的關鍵字
一個唯一的權威性方法在JavaScript來實現類。
對于其他有class的語言開發經驗的開發者有很好的體驗。

用類的壞處

構造器所有的壞處, 加上:

使用 extends 關鍵字創建一個有問題的類，對于用戶是一個很大的誘惑。
類的層級繼承會造成很多有名的問題，包括 fragile base class（基礎類會因為繼承被破壞），gorilla banana problem（對象混雜著復雜的上下文環境），duplication by necessity（類在繼承多樣化時需要時時修改）等等。

雖然其他兩種方法也有可能讓你陷入這些問題，但是在使用 extend 關鍵字的時候，環境使然，就會把你引導上這條路。換句話說，他引導你向著一個不靈活的關系編寫代碼，而不是更有復用性的代碼。

使用工廠函數的好處

工廠函數比起類和構造函數都更加的靈活，也不會把人引向錯誤的道路。也不會讓你陷入深深的繼承鏈中。你可以使用很多手段來模擬繼承

1. 用任意的原型返回任意的對象

舉個例子，你可以通過同一個實現來創建不同的實例，一個媒體播放器可以針對不同的媒體格式來創建實例，使用不同的API，或者一個事件庫可以是針對DOM時間的或者ws事件。

工廠函數也可以通過執行上下文來實例化對象，可以從對象池中得到好處，也可以更加靈活的繼承模型。

2. 沒有復雜重構的擔憂

你永遠不會有把工廠函數轉換成構造函數這樣的需求，所以重構也沒必要。

3. 沒有 new

你不用new關鍵字來新建對象，自己可以掌握這個過程。

4. 標準的 this 行為

this 就是你熟悉的哪個this，你可以用它來獲取父對象。舉個例子來說，在 player.create() 中，this指向的是player，也可以通過call和apply來綁定其他this。