ES6 class 關鍵字- JavaScript (JS) 教學Tutorial - Fooish 程式技術

JavaScript ES6 class 關鍵字. 在ES6 中，引入了Class (類別) 這個新的概念(如果寫過C++ 或Java 等傳統語言應該非常熟悉)，透過 class 這新的關鍵字， ... JavaScript教學JavaScript如何使用JavaScript語法JavaScript變數JavaScript資料型態JavaScript運算子JavaScript流程控制JavaScriptifelseJavaScriptswitchJavaScriptforJavaScriptwhileJavaScriptlabelJavaScriptFunctionJavaScript例外處理JavaScriptObjectJavaScriptNumberJavaScriptBooleanJavaScriptStringJavaScriptArrayJavaScriptDateJavaScriptMathJavaScriptRegExpJavaScriptJSONJavaScriptBOMJavaScriptwindowJavaScriptscreenJavaScriptlocationJavaScripthistoryJavaScriptnavigatorJavaScriptPopupJavaScriptTimerJavaScriptCookieJavaScriptDOMDOM查找元素DOM節點屬性DOM節點操作DOMHTML屬性DOMCSSDOM事件處理JavaScriptES6介紹ES6BlockScopeletconstES6ArrowFunctionsES6DefaultFunctionParametersES6Spread/RestOperatorES6ObjectLiteralExtensionsES6OctalBinaryLiteralsES6DestructuringES6super關鍵字ES6TemplateLiteralsES6for...of迴圈ES6Map/WeakMap物件ES6Set/WeakSet物件ES6class關鍵字ES6Symbol資料型態ES6Iterables/Iterators迭代器ES6Generator生成器ES6Promise物件JavaScriptAJAXJavaScript物件導向JavaScriptthisJavaScriptIIFEJavaScriptClosureJavaScriptHoistingJavaScriptES6class關鍵字在ES6中，引入了Class(類別)這個新的概念(如果寫過C++或Java等傳統語言應該非常熟悉)，透過class這新的關鍵字，可以定義類別。

另外還引入了一些其他的新語法，來讓你更簡單直觀的用JavaScript寫OOP(物件導向)程式，但大多數語法只是語法糖(syntacticalsugar)，並不是重新設計一套物件繼承模型(object-orientedinheritancemodel)，只是讓你更方便操作JavaScript既有的原型繼承模型(prototype-basedinheritance)。

在ES6你可以用class語法定義一個類別：classAnimal{ constructor(name){ this.name=name; } speak(){ console.log(this.name+'makesanoise.'); } } 上面我們定義了一個Animal類別：其中constructor方法用來定義類別的建構子(constructor)方法(method)的定義也有新語法，我們在Animal類別中定義了speak()方法，你可以看到新語法省略了function關鍵字和冒號:我們說過新語法只是語法糖，底層還是prototype-based的關係：leta=newAnimal('Elephant'); //true a.constructor===Animal.prototype.constructor; //true a.speak===Animal.prototype.speak; //true Animal.prototype.constructor===Animal; //"function" typeofAnimal; extendsextends關鍵字用作類別繼承：classAnimal{ constructor(name){ this.name=name; } speak(){ console.log(this.name+'makesanoise.'); } } classDogextendsAnimal{ speak(){ console.log(this.name+'barks.'); } } vard=newDog('Mitzie'); //顯示Mitziebarks. d.speak(); super如果子類別(sub-class)有定義自己的constructor，必須在constructor方法中顯示地調用super()，來調用父類別的constructor，否則會出現錯誤-ReferenceError:thisisnotdefined。

而且在sub-classconstructor中，必須先執行完super()後，才能引用this關鍵字，否則也會出現錯誤-ReferenceError:thisisnotdefined。

這是因為在ES6中，是先建立父類別(parentclass)的物件實例this(所以必須先執行super())，然後再用子類別的constructor修改this。

classCar{ constructor(){ console.log('Creatinganewcar'); } } classPorscheextendsCar{ constructor(){ super(); console.log('CreatingPorsche'); } } letc=newPorsche(); //依序顯示 //Creatinganewcar //CreatingPorsche super關鍵字有兩種用法：當作函數super()，只能在子類別的constructor中使用，在其他地方用會報錯-SyntaxError:'super'keywordunexpectedhere當作物件super，在一般方法中使用，用來引用父類別的方法和屬性classCat{ constructor(name){ this.name=name; } speak(){ console.log(this.name+'makesanoise.'); } } classLionextendsCat{ speak(){ super.speak(); console.log(this.name+'roars.'); } } letbigCat=newLion('Hoo'); bigCat.speak(); //依序顯示 //Hoomakesanoise. //Hooroars. 另外，透過super調用父類別的方法時，super會綁定子類別的this(而不是父類別的this)：classA{ constructor(){ this.x=1; } print(){ console.log(this.x); } } classBextendsA{ constructor(){ super(); this.x=2; } foo(){ super.print(); } } letb=newB(); //顯示2而不是1 b.foo(); staticstatic關鍵字用來定義靜態方法(staticmethod)。

classStaticMethodCall{ staticstaticMethod(){ return'Staticmethodhasbeencalled'; } staticanotherStaticMethod(){ //你可以用this來調用其他的staticmethod returnthis.staticMethod()+'fromanotherstaticmethod'; } } //顯示Staticmethodhasbeencalled StaticMethodCall.staticMethod(); //顯示Staticmethodhasbeencalledfromanotherstaticmethod StaticMethodCall.anotherStaticMethod(); 父類別上的靜態方法也可以透過super來調用：classTriple{ statictriple(n){ if(n===undefined){ n=1; } returnn*3; } } classBiggerTripleextendsTriple{ statictriple(n){ returnsuper.triple(n)*super.triple(n); } } //3 console.log(Triple.triple()); //18 console.log(Triple.triple(6)); vartp=newTriple(); //81 console.log(BiggerTriple.triple(3)); //報錯 //TypeError:tp.tripleisnotafunction console.log(tp.triple());