1. 程式人生 > >ES6中class關鍵字

ES6中class關鍵字

不用 必須 var 單獨 ref 命令 solid 直接 ole

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關鍵字