JS的class、構(gòu)造函數(shù)、工廠函數(shù)使用方法

這次給大家?guī)?lái)JS的class、構(gòu)造函數(shù)、工廠函數(shù)使用方法，使用JSclass、構(gòu)造函數(shù)、工廠函數(shù)的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來(lái)看一下。

到了ES6時(shí)代，我們創(chuàng)建對(duì)象的手段又增加了，在不同的場(chǎng)景下我們可以選擇不同的方法來(lái)建立?，F(xiàn)在就主要有三種方法來(lái)構(gòu)建對(duì)象，class關(guān)鍵字，構(gòu)造函數(shù)，工廠函數(shù)。他們都是創(chuàng)建對(duì)象的手段，但是卻又有不同的地方，平時(shí)開(kāi)發(fā)時(shí)，也需要針對(duì)這不同來(lái)選擇。

首先我們來(lái)看一下，這三種方法是怎樣的

// class 關(guān)鍵字，ES6新特性
class ClassCar {
 drive () {
 console.log('Vroom!');
 }
}
const car1 = new ClassCar();
console.log(car1.drive());
// 構(gòu)造函數(shù)
function ConstructorCar () {}
ConstructorCar.prototype.drive = function () {
 console.log('Vroom!');
};
const car2 = new ConstructorCar();
console.log(car2.drive());
// 工廠函數(shù)
const proto = {
 drive () {
 console.log('Vroom!');
 }
};
function factoryCar () {
 return Object.create(proto);
}
const car3 = factoryCar();
console.log(car3.drive());

這些方法都是基于原型的創(chuàng)建，而且都支持在構(gòu)造時(shí)函數(shù)中私有變量的實(shí)現(xiàn)。換句話(huà)來(lái)說(shuō)，這些函數(shù)擁有著大部分相同的特性，甚至在很多場(chǎng)景下，他們是等價(jià)的。

在 Javascript 中，每一個(gè)函數(shù)都能返回一個(gè)新的對(duì)象。當(dāng)它不是構(gòu)造函數(shù)或者類(lèi)的時(shí)候，它就被稱(chēng)作工廠函數(shù)。

ES6的類(lèi)其實(shí)是構(gòu)造函數(shù)的語(yǔ)法糖（至少現(xiàn)階段是這樣實(shí)行的），所以接下來(lái)討論的所有內(nèi)容都適用于構(gòu)造函數(shù)的也適用于ES6類(lèi)：

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

構(gòu)造函數(shù)和ES6類(lèi)的好處

構(gòu)造函數(shù)和ES6類(lèi)的壞處

1. 你需要 new 關(guān)鍵字

到了ES6，構(gòu)造函數(shù)和類(lèi)都需要帶 new 關(guān)鍵字。

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

在ES6中，如果你嘗試調(diào)用類(lèi)函數(shù)沒(méi)有 new 關(guān)鍵字就會(huì)拋出一個(gè)任務(wù)。如果你要個(gè)不用 new 關(guān)鍵字的話(huà)，就只能使用工廠函數(shù)把它包起來(lái)。

2. 實(shí)例化過(guò)程中的細(xì)節(jié)暴露給了外界API

所有的調(diào)用都緊緊的關(guān)聯(lián)到了構(gòu)造器的實(shí)現(xiàn)上，如果你需要自己在構(gòu)造過(guò)程中動(dòng)一些手腳，那就是一個(gè)非常麻煩的事情了。

3. 構(gòu)造器沒(méi)有遵守 Open / Closed 法則

因?yàn)?new 關(guān)鍵字的細(xì)節(jié)處理，構(gòu)造器違反 Open / Closed 法則：API應(yīng)該開(kāi)放拓展，避免修改。

我曾經(jīng)質(zhì)疑過(guò)，類(lèi)和工廠函數(shù)是那么的相似，把類(lèi)函數(shù)升級(jí)為一個(gè)工廠函數(shù)也不會(huì)有什么影響，不過(guò)在JavaScript里面，的確有影響。

如果你開(kāi)始寫(xiě)著構(gòu)造函數(shù)或者類(lèi)，但是寫(xiě)著寫(xiě)著，你發(fā)現(xiàn)需要工廠函數(shù)的靈活性，這個(gè)時(shí)候你不能簡(jiǎn)單的就改改簡(jiǎn)單改改函數(shù)一走了之。

不幸的是，你是個(gè)JavaScript程序員，構(gòu)造器改造成工廠函數(shù)是一個(gè)大手術(shù)：

// 原來(lái)的實(shí)現(xiàn)：
// class Car {
// drive () {
// console.log('Vroom!');
// }
// }
// const AutoMaker = { Car };
// 工廠函數(shù)改變的實(shí)現(xiàn)：
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!'
// 但是因?yàn)樗且粋€(gè)庫(kù)
// 許多地方依然這樣用:
const oldCar = new AutoMaker.Car();
// 如此就會(huì)導(dǎo)致:
// TypeError: Cannot read property 'undefined' of
// undefined at new AutoMaker.Car

在上面例子里面，我們從一個(gè)類(lèi)開(kāi)始，最后把它改成來(lái)一個(gè)可以根據(jù)特定的原型來(lái)創(chuàng)建對(duì)象的工廠函數(shù)，這樣的函數(shù)可以廣泛應(yīng)用于接口抽象和特殊需求定制。

4. 使用構(gòu)造器讓 instanceof 有可乘之機(jī)

構(gòu)造函數(shù)和工廠函數(shù)的不同就是 instanceof 操作符，很多人使用 instanceof 來(lái)確保自己代碼的正確性。但是說(shuō)實(shí)話(huà)，這是有很大問(wèn)題的，建議避免 instanceof 的使用。

instanceof 會(huì)說(shuō)謊。

// instanceof 是一個(gè)原型鏈檢查
// 不是一個(gè)類(lèi)型檢查
// 這意味著這個(gè)檢查是取決于執(zhí)行上下文的,
// 當(dāng)原型被動(dòng)態(tài)的重新關(guān)聯(lián),
// 你就會(huì)得到這樣令人費(fèi)解的情況
function foo() {}
const bar = { a: 'a'};
foo.prototype = bar;
// bar是一個(gè)foo的實(shí)例嗎，顯示不是
console.log(bar instanceof foo); // false
// 上面我們看到了，他的確不是一個(gè)foo實(shí)例
// baz 顯然也不是一個(gè)foo的實(shí)例，對(duì)吧?
const baz = Object.create(bar);
// ...不對(duì).
console.log(baz instanceof foo); // true. oops.

instanceof 并不會(huì)像其他強(qiáng)類(lèi)型語(yǔ)言那樣做檢查，他只是檢查了原型鏈上的對(duì)象。

在一些執(zhí)行上下文中，他就會(huì)失效，比如你改變了 Constructor.prototype 的時(shí)候。

又比如你開(kāi)始些的是一個(gè)構(gòu)造函數(shù)或者類(lèi)，之后你又將它拓展為一個(gè)另一個(gè)對(duì)象，就像上面改寫(xiě)成工廠函數(shù)的情況。這時(shí)候 instanceof 也會(huì)有問(wèn)題。

總而言之， instanceof 是另一個(gè)構(gòu)造函數(shù)和工廠函數(shù)呼喚的大改變。

用類(lèi)的好處

用類(lèi)的壞處

構(gòu)造器所有的壞處, 加上:

使用 extends 關(guān)鍵字創(chuàng)建一個(gè)有問(wèn)題的類(lèi)，對(duì)于用戶(hù)是一個(gè)很大的誘惑。
類(lèi)的層級(jí)繼承會(huì)造成很多有名的問(wèn)題，包括 fragile base class（基礎(chǔ)類(lèi)會(huì)因?yàn)槔^承被破壞），gorilla banana problem（對(duì)象混雜著復(fù)雜的上下文環(huán)境），duplication by necessity（類(lèi)在繼承多樣化時(shí)需要時(shí)時(shí)修改）等等。

雖然其他兩種方法也有可能讓你陷入這些問(wèn)題，但是在使用 extend 關(guān)鍵字的時(shí)候，環(huán)境使然，就會(huì)把你引導(dǎo)上這條路。換句話(huà)說(shuō)，他引導(dǎo)你向著一個(gè)不靈活的關(guān)系編寫(xiě)代碼，而不是更有復(fù)用性的代碼。

使用工廠函數(shù)的好處

工廠函數(shù)比起類(lèi)和構(gòu)造函數(shù)都更加的靈活，也不會(huì)把人引向錯(cuò)誤的道路。也不會(huì)讓你陷入深深的繼承鏈中。你可以使用很多手段來(lái)模擬繼承

1. 用任意的原型返回任意的對(duì)象

舉個(gè)例子，你可以通過(guò)同一個(gè)實(shí)現(xiàn)來(lái)創(chuàng)建不同的實(shí)例，一個(gè)媒體播放器可以針對(duì)不同的媒體格式來(lái)創(chuàng)建實(shí)例，使用不同的API，或者一個(gè)事件庫(kù)可以是針對(duì)DOM時(shí)間的或者ws事件。

工廠函數(shù)也可以通過(guò)執(zhí)行上下文來(lái)實(shí)例化對(duì)象，可以從對(duì)象池中得到好處，也可以更加靈活的繼承模型。

2. 沒(méi)有復(fù)雜重構(gòu)的擔(dān)憂(yōu)

你永遠(yuǎn)不會(huì)有把工廠函數(shù)轉(zhuǎn)換成構(gòu)造函數(shù)這樣的需求，所以重構(gòu)也沒(méi)必要。

3. 沒(méi)有 new

你不用new關(guān)鍵字來(lái)新建對(duì)象，自己可以掌握這個(gè)過(guò)程。

4. 標(biāo)準(zhǔn)的 this 行為

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

5. 沒(méi)有 instanceof 的煩惱

6. 有些人喜歡直接不帶new的寫(xiě)法的可讀直觀性。

工廠函數(shù)的壞處

結(jié)論

在我看來(lái)，類(lèi)也許是一個(gè)方便的關(guān)鍵字，但是也不能掩飾他會(huì)把毫無(wú)防備的用戶(hù)引向繼承深坑。另一個(gè)風(fēng)險(xiǎn)在于未來(lái)的你想要使用工廠函數(shù)的可能性，你要做非常大的改變。

如果你是在一個(gè)比較大的團(tuán)隊(duì)協(xié)作里面，如果要修改一個(gè)公共的API，你可能干擾到你并不能接觸到的代碼，所以你不能對(duì)改裝函數(shù)的影響視而不見(jiàn)。

工廠模式很棒的一個(gè)地方在于，他不僅僅更加強(qiáng)大，更加靈活，也可以鼓勵(lì)整個(gè)隊(duì)伍來(lái)讓API更加簡(jiǎn)單，安全，輕便。

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注Gxl網(wǎng)其它相關(guān)文章！

推薦閱讀：

使用nodejs在微信中調(diào)用收貨地址

keep-alive在vue2中應(yīng)該怎樣使用

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com