你懂JavaScript 嗎？#21 ES6 Class | Summer。桑莫。夏天

關於ES6 Class，我們先再次檢視先前提過的Widget 與Button 範例。

class Widget { constructor(width, height) ... Summer。

桑莫。

夏天 前端工程師，喜歡蒐集明信片、設計簡單的小物、旅遊和看電影。

這裡紀錄了我的學習和開發筆記，歡迎交流(*´∀`)~♥ 關於我、所有文章和標籤列表 關於我 所有文章 標籤列表 ©2022.Allrightsreserved. 你懂JavaScript嗎？#21ES6Class 28Oct2018 You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎？ ES6 鐵人賽 You-Dont-Know-JS-this-and-Object-Prototypes 本文主要是探討ES6Class的美好與陷阱。

ES6Class 關於ES6Class，我們先再次檢視先前提過的Widget與Button範例。

classWidget{ constructor(width,height){ this.width=width||50; this.height=height||50; this.$elem=null; } render($where){ this.$elem&&this.$elem.css({ width:`${this.width}px`, height:`${this.height}px`, }).appendTo($where); } } classButtonextendsWidget{ constructor(width,height,label='Default'){ super(width,height); this.label=label; this.$elem=$('').text(this.label); } render($where){ super.render($where); this.$elem.click(this.onClick.bind(this)); } onClick(e){ console.log(`Button${this.label}cliked!`); } } … … 我知道大家都沒有在看程式碼XD一定就是很快地滑了過去 … … ES6的Class機制解決了什麼問題呢？ 使用簡潔的extends達到繼承的目的，而非雜亂的Object.create(..)、.__proto__、Object.setPrototypeOf(..)，這樣能讓開發者更順利的擴充功能。

使用簡潔的super達到相對多型的目的，因此能順利的往父層或更上一層參考同名方法，解決了.constructor可能會被更動的問題。

class語法只能指定方法，不能設定屬性，這避免開發者誤將屬性（狀態或資料）放在類別中造成的共用問題，這應該是內建的防呆機制。

… … 看起來Class一切都很美好！But？ 最重要的就是這個But！ 來看一些陷阱吧。

… … Class依舊是利用[[Prototype]]委派機制來實作的，它只是個語法糖而已，也就是說，Class並非如其他物件導向語言般在宣告時期靜態的複製定義，而只是物件間的連結，因此若不小心變更了父類別的方法或屬性，子類別與其實體都會受到影響。

如下，Dice類別用於擲骰子得到點數，在標註為(1)之處，d1骰出來的是小數，因此後續我們做了一些修正，希望後來新建立的物件d2能改成骰出正確的1-10的數字，結果改是改成功了，d2真的可以正常運作（標註(2)），但d1卻也被改到了（標註(3)） classDice{ constructor(){ this.num=Math.random(); } rand(){ console.log(`Random:${this.num}`); } } vard1=newDice(); d1.rand();//Random:0.9602558780625552(1) Dice.prototype.rand=function(){ constresult=Math.round(this.num*10+1); console.log(`Random:${result}`); }; vard2=newDice(); d2.rand();//Random:2(2) d1.rand();//Random:10(3) 我們還是得回歸到最初的委派機制，而無法期待JavaScript的Class能如其他物件導向語言般運作了。

… … 再來，JavaScript的Class語法無法宣告屬性，只能宣告方法，因此若想宣告屬性以追蹤共用狀態，就只能回歸到.prototype了，而這就失去了語法糖的意義了-洩露了底層的實作細節。

classDice{ constructor(){ this.num=Math.random(); Dice.prototype.count++; console.log(`Count:${Dice.prototype.count}`); } rand(){ constresult=Math.round(this.num*10+1); console.log(`Random:${result}`); } } Dice.prototype.count=0; vard1=newDice();//Count:1 vard2=newDice();//Count:2 d1.count===d2.count//true，的確是更新同一個值！ … … 最後要來看的是super-為了優化效能，super是在宣告時期靜態綁定的，在某些狀況下，綁定會失敗，因此必須手動綁定。

classP{ foo(){console.log('P.foo');} } classCextendsP{ foo(){ super.foo(); } } varc1=newC(); c1.foo();//"P.foo" varD={ foo:function(){console.log('D.foo');} }; varE={ foo:C.prototype.foo }; Object.setPrototypeOf(E,D);//將E連結到D以進行委派 E.foo();//"P.foo" 這程式碼看起來有點難理解，補個模型圖好了大概就是這個物件指向那個物件這樣。

… … 等等，執行E.foo()後，怎麼會是印出「P.foo」而不是「D.foo」！？ … … 仔細看原始碼與模型圖，E.foo()是連到C.prototype.foo，而C繼承P，因此就會呼叫P.foo()最後印出「P.foo」。

原先預期super能因E委派給D而動態調整，但由於super是靜態綁定的，並不會更新，因此只能手動修改。

改進如下。

classP{ foo(){console.log('P.foo');} } classCextendsP{ foo(){ super.foo(); } } varc1=newC(); c1.foo();//"P.foo" varD={ foo:function(){console.log('D.foo');} }; varE=Object.create(D);//將E連結到D以進行委派 E.foo=C.prototype.foo.toMethod(E,'foo'); E.foo();//"D.foo" [[HomeObject]]是類別的方法的內部屬性，用來儲存該方法所屬的物件，這個屬性是在宣告時就賦值了，並不會自動更新，因此，我們要手動修改這個部份。

使用Function.prototype.toMethod()來重新綁定foo的[[HomeObject]]為E，而E的[[Prototype]]是D。

有興趣的可以參考這裡。

… … 這本書的作者想要告訴我們…JavaScript與其他類別導向語言最大的不同之處在於，它是「動態」的，任何物件的定義都可以在稍後執行時做修改，強迫JavaScript背離本性，假裝自己是個靜態語言，根本只是逃避理解JavaScript的基礎原理而已（是在罵讀者不用功嗎XDDD）。

… … 老話一句，「加油，好嗎？」 回顧 看完這篇文章，我們到底有什麼收穫呢？藉由本文可以理解到… ES6Class雖然帶給我們簡潔的語法，但背後是有代價的，例如 若在執行時期不小心變更了父類別的方法或屬性，子類別與其實體都會受到影響。

Class語法無法宣告屬性，只能宣告方法，因此若想宣告屬性以追蹤共用狀態，就只能回歸到.prototype了，而這就失去了語法糖的意義-洩露了底層的實作細節。

為了優化效能，super是在宣告時期靜態綁定的，在某些狀況下，綁定會失敗，因此必須手動綁定。

References YouDon’tKnowJS:this&ObjectPrototypes,AppendixA:ES6class 同步發表於2019鐵人賽。

「你所不知道的JS」系列書的第二集「範疇與閉包/this與物件原型」終於讀完了！跟我一起歡呼吧！明天開始要進入第三集「非同步處理與效能」，敬請拭目以待(๑•̀ㅂ•́)و✧ … … 鐵人賽還有9天，加油加油加油！ … … p.s.感謝yvonne11友情出借愛書(*´∀`)~♥也推薦閱讀她的鐵人賽作品「React30天系列」，讚讚！ 標籤： You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎？ ES6 鐵人賽 You-Dont-Know-JS-this-and-Object-Prototypes commentspoweredbyDisqus RecentPosts 利用Chromatic+Storybook來做Component-Level的VisualTesting 04Mar2022 利用Cypress與Percy來做VisualTesting 26Feb2022 2021年度回顧 31Dec2021