ES6中class關鍵字
1 、介紹 |
//定義類 class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return ‘(‘ + this.x + ‘, ‘ + this.y + ‘)‘; } }
Point類除了構造方法,還定義了一個toString方法。註意,定義“類”的方法的時候,前面不需要加上function這個關鍵字,直接把函數定義放進去了就可以了。另外,方法之間不需要逗號分隔,加了會報錯。
//類的數據類型就是函數,類本身就指向構造函數。用的時候,也是直接對類使用new命令,跟構造函數的用法完全一致。 class Bar { doStuff() { console.log(‘stuff‘); } } var b = new Bar(); b.doStuff() // "stuff"
2、嚴格模式 |
類和模塊的內部,默認就是嚴格模式,所以不需要使用use strict指定運行模式。只要你的代碼寫在類或模塊之中,就只有嚴格模式可用
3、constructor 方法 |
constructor方法是類的默認方法,通過new命令生成對象實例時,自動調用該方法。一個類必須有constructor方法,如果沒有顯式定義,一個空的constructor方法會被默認添加。
class Point { } // 等同於 class Point { constructor() {}//constructor方法默認返回實例對象(即this),完全可以指定返回另外一個對象。 }//註意:類必須使用new調用,否則會報錯。這是它跟普通構造函數的一個主要區別,後者不用new也可以執行。
4、類的實例對象 |
生成類的實例對象的寫法,使用new命令。
實例的屬性除非顯式定義在其本身(即定義在this對象上),否則都是定義在原型上(即定義在class上)。
class Point { // ... } // 報錯 var point = Point(2, 3); // 正確 var point = new Point(2, 3);
5、Class 表達式 |
下面代碼使用表達式定義了一個類。需要註意的是,這個類的名字是MyClass而不是Me,Me只在 Class 的內部代碼可用,指代當前類。
const MyClass = class Me { getClassName() { return Me.name; } }; //采用 Class 表達式,可以寫出立即執行的 Class。 var person = new class { constructor(name) { this.name = name; } sayName() { console.log(this.name); } }(‘張三‘); person.sayName(); // "張三"
6、不存在變量提升 |
類不存在變量提升(hoist)
下面代碼中,Foo類使用在前,定義在後,這樣會報錯,因為 ES6 不會把類的聲明提升到代碼頭部。這種規定的原因與下文要提到的繼承有關,必須保證子類在父類之後定義。
new Foo(); // ReferenceError class Foo {}
7、私有方法 |
私有方法是常見需求,但 ES6 不提供,只能通過變通方法模擬實現。
添加私有方法辦法
①在命名上加以區別。
②利用Symbol值的唯一性,將私有方法的名字命名為一個Symbol值。
/*命名上加以區別*/ class Widget { // 公有方法 foo (baz) { this._bar(baz); } // 私有方法 _bar(baz) { return this.snaf = baz; } // ... } /*利用Symbol*/ const bar = Symbol(‘bar‘); const snaf = Symbol(‘snaf‘); export default class myClass{ // 公有方法 foo(baz) { this[bar](baz); } // 私有方法 [bar](baz) { return this[snaf] = baz; } // ... };
8、私有屬性 |
與私有方法一樣,ES6 不支持私有屬性。目前,有一個提案,為class加了私有屬性。方法是在屬性名之前,使用#表示。
class Point { #x; constructor(x = 0) { #x = +x; // 寫成 this.#x 亦可 } get x() { return #x } set x(value) { #x = +value } }
9、this 的指向 |
類的方法內部如果含有this,它默認指向類的實例。
一旦單獨使用該方法,很可能報錯。
class Logger { printName(name = ‘there‘) { this.print(`Hello ${name}`); } print(text) { console.log(text); } } const logger = new Logger(); const { printName } = logger; printName(); //上面代碼中,printName方法中的this,默認指向Logger類的實例。但是,如果將這個方法提取出來單獨使用,this會指向該方法運行時所在的環境,因為找不到print方法而導致報錯。 /*解決方法是,在構造方法中綁定this,這樣就不會找不到print方法了。*/ class Logger { constructor() { this.printName = this.printName.bind(this); } // ... }
10、name 屬性 |
由於本質上,ES6 的類只是 ES5 的構造函數的一層包裝,所以函數的許多特性都被Class繼承,包括name屬性。
name屬性總是返回緊跟在class關鍵字後面的類名。
class Point {} Point.name // "Point"
ES6中class關鍵字