class類 · 程序員開發筆記

[TOC] #### class類 ? ES6 提供了更接近傳統語言的寫法，引入了 Class（類）這個概念，作為對象的模板。通過class關鍵字，可以定義類。 ? 基本上，ES6 的class可以看作只是一個語法糖，它的絕大部分功能，ES5 都可以做到，新的class寫法只是讓對象原型的寫法更加清晰、更像面向對象編程的語法而已。類的示例： //定義類 class Computer { constructor(color, size) { this.color = color; this.size = size; } playgame() { console.log(this.size+'寸的'+this.color+'顏色電腦可以吃雞'); } } #### 類的實例對象： ? 生成類的實例對象的寫法，與 ES5 完全一樣，也是使用new命令。前面說過，如果忘記加上new，像函數那樣調用Class，將會報錯。 class Point { // ... } // 報錯 var point = Point(2, 3); // 正確 var point = new Point(2, 3); #### class表達式 ? 與函數一樣，類也可以使用表達式的形式定義。 const MyClass = class Me { getClassName() { return Me.name; } }; ? 上面代碼使用表達式定義了一個類。需要注意的是，這個類的名字是MyClass而不是Me，Me只在 Class 的內部代碼可用，指代當前類。 ? 如果類的內部沒用到的話，可以省略Me，也就是可以寫成下面的形式 const MyClass = class { /* ... */ }; #### 類的繼承 ? Class 可以通過extends關鍵字實現繼承 class Point { } class ColorPoint extends Point { } 上面代碼定義了一個ColorPoint類，該類通過extends關鍵字，繼承了Point類的所有屬性和方法。但是由于沒有部署任何代碼，所以這兩個類完全一樣，等于復制了一個Point類。 #### super關鍵字 ? super這個關鍵字，既可以當作函數使用，也可以當作對象使用。在這兩種情況下，它的用法完全不同。 ? 第一種情況，super作為函數調用時，代表父類的構造函數。ES6 要求，子類的構造函數必須執行一次super函數。 class A {} class B extends A { constructor() { super(); } } ? 上面代碼中，子類B的構造函數之中的super()，代表調用父類的構造函數。這是必須的，否則 JavaScript 引擎會報錯。 ? 第二種情況，super作為對象時，在普通方法中，指向父類的原型對象；在靜態方法中，指向父類。 class A { p() { return 2; } } class B extends A { constructor() { super(); console.log(super.p()); // 2 } } let b = new B(); 例子： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> class animal{ //類的構造函數 constructor(){ this.weight = '重量'; this.color = '顏色'; } move(){ console.log('能動'); } } //類的繼承 class fish extends animal{ constructor(){ super(); //super當做對象的話,指向的是父類的原型(prototype) this.sai = '魚鰓'; this.lin = '魚鱗片'; super.move(); //console.log(super.color); } //給子類添加特有方法 moveabout(){ console.log('能游動'); } } var goldfish = new fish; console.log(goldfish.sai); </script> </head> <body> </body> </html>