ES6經常使用但被忽略的方法（第八彈Class）

寫在開頭

• ES6經常使用但被忽略的方法 系列文章，整理做者認爲一些平常開發可能會用到的一些方法、使用技巧和一些應用場景，細節深刻請查看相關內容鏈接，歡迎補充交流。

相關文章

• ES6經常使用但被忽略的方法（第一彈解構賦值和數值）
• ES6經常使用但被忽略的方法（第二彈函數、數組和對象）
• ES6經常使用但被忽略的方法（第三彈Symbol、Set 和 Map ）
• ES6經常使用但被忽略的方法（第四彈Proxy和Reflect）
• ES6經常使用但被忽略的方法（第五彈Promise和Iterator）
• ES6經常使用但被忽略的方法（第六彈Generator ）
• ES6經常使用但被忽略的方法（第七彈async）
• ES6經常使用但被忽略的方法（第九彈Module）
• ES6經常使用但被忽略的方法（第十彈項目開發規範）
• ES6經常使用但被忽略的方法（第十一彈Decorator）

Class 函數

• ES6-Class

簡介

• class能夠看做只是一個語法糖，它的絕大部分功能，ES5 均可以作到。

// 傳統寫法
function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
};
var p = new Point(1, 2);

// class 寫法
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}
複製代碼

• 定義類的方法的時候，前面不須要加上function這個關鍵字，直接把函數定義放進去了就能夠了。方法之間不須要逗號分隔，加了會報錯。 類的全部方法都定義在類的prototype屬性上面。

class Point {
  constructor() {...}
  toString() {...}
  toValue() {...}
}
// 等同於
Point.prototype = {
  constructor() {},
  toString() {},
  toValue() {},
};

typeof Point // "function"
Point === Point.prototype.constructor // true
複製代碼

• 類的內部全部定義的方法，都是不可枚舉的（non-enumerable）。這與 ES5 的行爲不一致。

// es6
class Point {
  constructor(x, y) {...}
  toString() {...}
}

Object.keys(Point.prototype)
// []
Object.getOwnPropertyNames(Point.prototype)
// ["constructor","toString"]

// es5
var Point = function (x, y) {...};
Point.prototype.toString = function() {...};

Object.keys(Point.prototype)
// ["toString"]
Object.getOwnPropertyNames(Point.prototype)
// ["constructor","toString"]
複製代碼

constructor 方法

• constructor方法是類的默認方法，經過new命令生成對象實例時，自動調用該方法。一個類必須有constructor方法，若是沒有顯式定義，一個空的constructor方法會被默認添加。
• constructor方法默認返回實例對象（即this），徹底能夠指定返回另一個對象。

class Foo {
  constructor() {
    return Object.create(Object);
  }
}

new Foo() instanceof Foo // false
new Foo() instanceof Object // true
複製代碼

取值函數（getter）和存值函數（setter）

• 與 ES5 同樣，在「類」的內部可使用get和set關鍵字，對某個屬性設置存值函數和取值函數，攔截該屬性的存取行爲。存值函數和取值函數是設置在屬性的 Descriptor 對象上的。

class MyClass {
  constructor() {...}
  get prop() {
    return 'getter';
  }
  set prop(value) {
    console.log('setter: '+value);
  }
}

let inst = new MyClass();
inst.prop = 123; // setter: 123
inst.prop; // 'getter'

const descriptor = Object.getOwnPropertyDescriptor(
  MyClass.prototype, "prop"
);

"get" in descriptor  // true
"set" in descriptor  // true
複製代碼

表達式

1. 屬性表達式

   let methodName = 'getArea';
   
   class Square {
     constructor(length) {...}
     [methodName]() {...}
   }
   複製代碼

2. Class 表達式

   const MyClass = class Me {
     getClassName() {
       return Me.name;
     }
   };
   複製代碼

   • Class 表達式，能夠寫出當即執行的 Class。

   let person = new class {
     constructor(name) {
       this.name = name;
     }
     sayName() {
       console.log(this.name);
     }
   }('detanx');
   person.sayName(); // "detanx"
   複製代碼

注意點

1. 嚴格模式

   • 類和模塊的內部，默認就是嚴格模式，因此不須要使用use strict指定運行模式。

2. 不存在提高

   • 使用在前，定義在後，這樣會報錯。

   new Foo(); // ReferenceError
   class Foo {}
   複製代碼

3. name 屬性

   • 因爲本質上，ES6的類只是ES5 的構造函數的一層包裝，因此函數的許多特性都被Class繼承，包括name屬性。

   class Point {}
   Point.name // "Point"
   複製代碼

   • name屬性老是返回緊跟在class關鍵字後面的類名。

4. Generator 方法

   • 若是某個方法以前加上星號（*），就表示該方法是一個 Generator 函數。

5. this 的指向

   • 類的方法內部若是含有this，它默認指向類的實例。一旦單獨使用該方法，極可能報錯。

   class Logger {
     printName(name = 'there') {
       this.print(`Hello ${name}`);
     }
     print(text) {
       console.log(text);
     }
   }
   
   const logger = new Logger();
   const { printName } = logger;
   printName(); // TypeError: Cannot read property 'print' of undefined
   複製代碼

靜態方法

• 類至關於實例的原型，全部在類中定義的方法，都會被實例繼承。若是在一個方法前，加上static關鍵字，就表示該方法不會被實例繼承，而是直接經過類來調用，這就稱爲「靜態方法」。

class Foo {
  static classMethod() {
    return 'hello';
  }
}
Foo.classMethod() // 'hello'
var foo = new Foo();
foo.classMethod()
// TypeError: foo.classMethod is not a function
複製代碼

• 若是靜態方法包含this關鍵字，這個this指的是類，而不是實例。
• 父類的靜態方法，能夠被子類繼承。

class Foo {
  static classMethod() {
    return 'detanx';
  }
}
class Bar extends Foo {
}
Bar.classMethod() // 'detanx'
複製代碼

• 靜態方法也是能夠從super對象上調用的。

class Foo {
  static classMethod() {
    return 'hello';
  }
}
class Bar extends Foo {
  static classMethod() {
    return super.classMethod() + ', detanx';
  }
}
Bar.classMethod() // "hello, detanx"
複製代碼

實例屬性的新寫法

• 實例屬性除了定義在constructor()方法裏面的this上面，也能夠定義在類的最頂層。

class IncreasingCounter {
  _count = 0
  => // 或寫在constructor
  // constructor() {
  //  this._count = 0;
  // }
  get value() {
    console.log('Getting the current value!');
    return this._count;
  }
  increment() {
    this._count++;
  }
}
複製代碼

靜態屬性

• 靜態屬性指的是 Class 自己的屬性，即Class.propName，而不是定義在實例對象（this）上的屬性。

class Foo { }
Foo.prop = 1;
Foo.prop // 1
複製代碼

• 如今有一個 提案（目前處於stage 3） 提供了類的靜態屬性，寫法是在實例屬性的前面，加上static關鍵字。

// 新寫法
class Foo {
  static prop = 1;
}
複製代碼

私有方法和私有屬性

1. 現有的解決方案
   • 私有方法和私有屬性，是隻能在類的內部訪問的方法和屬性，外部不能訪問。這是常見需求，有利於代碼的封裝，但 ES6 不提供，只能經過變通方法模擬實現。
   1. 作法是在命名上加以區別。
      • 開發時約定以什麼開頭的屬性或方法爲私有屬性。例如以 _ 開頭或者 $ 開頭的爲私有。
   2. 將私有方法移出模塊

      class Widget {
        foo (baz) {
          bar.call(this, baz);
        }
      }
      function bar(baz) {
        return this.snaf = baz;
      }
      複製代碼

   3. 利用Symbol值的惟一性，將私有方法的名字命名爲一個Symbol值。ES6經常使用但被忽略的方法（第三彈Symbol、Set 和 Map ）之Symbol的應用

      const bar = Symbol('bar');
      const snaf = Symbol('snaf');
      
      export default class myClass{
        // 公有方法
        foo(baz) {
          this[bar](baz);
        }
        // 私有方法
        [bar](baz) {
          return this[snaf] = baz;
        }
      };
      複製代碼

      • 也不是絕對不行，Reflect.ownKeys()依然能夠拿到它們。

      const inst = new myClass();
      Reflect.ownKeys(myClass.prototype)
      // [ 'constructor', 'foo', Symbol(bar) ]
      複製代碼

2. 私有屬性的提案

• 目前，有一個 提案（Stage 3），爲class加了私有屬性和方法。方法是在屬性名和方法以前，使用 # 表示。私有屬性也能夠設置 getter 和 setter 方法。

class Counter {
  #xValue = 0;
  constructor() {
    super();
    // ...
  }
  get #x() { return #xValue; }
  set #x(value) {
    this.#xValue = value;
  }
}
複製代碼

• 私有屬性和私有方法前面，也能夠加上static關鍵字，表示這是一個靜態的私有屬性或私有方法。

new.target 屬性

• new是從構造函數生成實例對象的命令。ES6 爲new命令引入了一個new.target屬性，該屬性通常用在構造函數之中，返回new命令做用於的那個構造函數。若是構造函數不是經過new命令或Reflect.construct()調用的 ，new.target會返回undefined，所以這個屬性能夠用來肯定構造函數是怎麼調用的。Class 內部調用new.target，返回當前 Class。

class Rectangle {
  constructor(length, width) {
    console.log(new.target === Rectangle);
    this.length = length;
    this.width = width;
  }
}
var obj = new Rectangle(3, 4); // 輸出 true
複製代碼

• 子類繼承父類時，new.target會返回子類。 利用這個特色，能夠寫出不能獨立使用、必須繼承後才能使用的類。

class Shape {
  constructor() {
    if (new.target === Shape) {
      throw new Error('本類不能實例化');
    }
  }
}
class Rectangle extends Shape {
  constructor(length, width) {
    super();
  }
}
var x = new Shape();  // 報錯
var y = new Rectangle(3, 4);  // 正確
複製代碼

繼承

• ES6-Class 繼承

注意點

1. 子類繼承父類須要先調用super方法。

   class Point { /* ... */ }
   class ColorPoint extends Point {
     constructor() {
     }
   }
   let cp = new ColorPoint(); // ReferenceError
   複製代碼

   • ColorPoint繼承了父類Point，可是它的構造函數沒有調用super方法，致使新建實例時報錯。
2. 在子類的構造函數中，只有調用super以後，纔可使用this關鍵字，不然會報錯。

   class Point {
     constructor(x) {
       this.x = x;
     }
   }
   class ColorPoint extends Point {
     constructor(x, color) {
       this.color = color; // ReferenceError
       super(x);
       this.color = color; // 正確
     }
   }
   複製代碼

Object.getPrototypeOf()

• Object.getPrototypeOf方法能夠用來從子類上獲取父類。可使用這個方法判斷，一個類是否繼承了另外一個類。

Object.getPrototypeOf(ColorPoint) === Point // true
複製代碼

super 關鍵字

• super這個關鍵字，既能夠看成函數使用，也能夠看成對象使用。在這兩種狀況下，它的用法徹底不一樣。

1. super做爲函數調用時，表明父類的構造函數。ES6 要求，子類的構造函數必須執行一次super函數。不然 JavaScript 引擎會報錯。

   class A {
     constructor() {
       console.log(new.target.name);
     }
   }
   class B extends A {
     constructor() {
       super();
     }
   }
   new A() // A
   new B() // B
   複製代碼

   • super雖然表明了父類A的構造函數，可是返回的是子類B的實例，super()至關於A.prototype.constructor.call(this)，super()內部的this指向的是B。
   • 做爲函數時，super()只能用在子類的構造函數之中，用在其餘地方就會報錯。

   class A {}
   class B extends A {
     m() {
       super(); // 報錯
     }
   }
   複製代碼

2. super做爲對象時
   • 普通方法中，指向父類的原型對象；靜態方法（帶static前綴的方法）中，指向父類。

   class A {
     p() {
       return 2;
     }
   }
   class B extends A {
     constructor() {
       super();
       console.log(super.p()); // 2
     }
   }
   
   let b = new B();
   複製代碼

   • super指向父類的原型對象，因此定義在父類實例上的方法或屬性，是沒法經過super調用的。若是屬性定義在父類的原型對象上，super就能夠取到。

   class A {
     constructor() {
       this.p = 2;
     }
   }
   class B extends A {
     get m() {
       return super.p;
     }
   }
   let b = new B();
   b.m // undefined
   
   // 定義到原型上
   class A {}
   A.prototype.x = 2;
   
   class B extends A {
     constructor() {
       super();
       console.log(super.x) // 2
     }
   }
   let b = new B();
   複製代碼

   • 在子類的靜態方法中經過super調用父類的方法時，方法內部的this指向當前的子類，而不是子類的實例。

   class A {
     constructor() {
       this.x = 1;
     }
     static print() {
       console.log(this.x);
     }
   }
   
   class B extends A {
     constructor() {
       super();
       this.x = 2;
     }
     static m() {
       super.print();
     }
   }
   
   B.x = 3;
   B.m() // 3
   複製代碼

   • 使用super的時候，必須顯式指定是做爲函數、仍是做爲對象使用，不然會報錯。

   class A {}
   
   class B extends A {
     constructor() {
       super();
       console.log(super); // 報錯
     }
   }
   複製代碼

   • 因爲對象老是繼承其餘對象的，因此能夠在任意一個對象中，使用super關鍵字。

   var obj = {
     toString() {
       return "MyObject: " + super.toString();
     }
   };
   
   obj.toString(); // MyObject: [object Object]
   複製代碼

類的 prototype 屬性和__proto__屬性

• 大多數瀏覽器的 ES5 實現之中，每個對象都有__proto__屬性，指向對應的構造函數的prototype屬性。存在兩條繼承鏈。
  1. 子類的__proto__屬性，表示構造函數的繼承，老是指向父類。
  2. 子類prototype屬性的__proto__屬性，表示方法的繼承，老是指向父類的prototype屬性。

  class A {}
  class B extends A {}
  
  B.__proto__ === A // true
  B.prototype.__proto__ === A.prototype // true
  複製代碼

• 類的繼承模式實現

  class A {}
  class B {}
  
  // B 的實例繼承 A 的實例
  Object.setPrototypeOf(B.prototype, A.prototype);
  // B 繼承 A 的靜態屬性
  Object.setPrototypeOf(B, A);
  
  const b = new B();
  複製代碼

  • Object.setPrototypeOf方法的實現。

  Object.setPrototypeOf = function (obj, proto) {
    obj.__proto__ = proto;
    return obj;
  }
  複製代碼

• 類實例的__proto__屬性的__proto__屬性，指向父類實例的__proto__屬性。子類的原型的原型，是父類的原型。

var p1 = new Point(2, 3);
var p2 = new ColorPoint(2, 3, 'red');

p2.__proto__ === p1.__proto__ // false
p2.__proto__.__proto__ === p1.__proto__ // true
複製代碼

原生構造函數的繼承

• 原生構造函數是指語言內置的構造函數，一般用來生成數據結構。ECMAScript 的原生構造函數大體有：Boolean()、Number()、String()、Array()、Date()、Function()、RegExp()、Error()、Object()...
• ES6 能夠自定義原生數據結構（好比Array、String等）的子類，這是 ES5 沒法作到的。例如實現一個本身的帶其餘功能的數組類。

class VersionedArray extends Array {
  constructor() {
    super();
    this.history = [[]];
  }
  commit() {
    this.history.push(this.slice());
  }
  revert() {
    this.splice(0, this.length, ...this.history[this.history.length - 1]);
  }
}

var x = new VersionedArray();

x.push(1);
x.push(2);
x // [1, 2]
x.history // [[]]

x.commit();
x.history // [[], [1, 2]]

x.push(3);
x // [1, 2, 3]
x.history // [[], [1, 2]]

x.revert();
x // [1, 2]
複製代碼

• 繼承Object的子類，有一個行爲差別。

class NewObj extends Object{
  constructor(){
    super(...arguments);
  }
}
var o = new NewObj({attr: true});
o.attr === true  // false
複製代碼

• 上面代碼中，NewObj繼承了Object，可是沒法經過super方法向父類Object傳參。這是由於 ES6 改變了Object構造函數的行爲，一旦發現Object方法不是經過new Object()這種形式調用，ES6 規定Object構造函數會忽略參數。

Mixin 模式的實現

• Mixin 指的是多個對象合成一個新的對象，新對象具備各個組成成員的接口。使用的時候，只要繼承這個類便可。

function mix(...mixins) {
  class Mix {
    constructor() {
      for (let mixin of mixins) {
        copyProperties(this, new mixin()); // 拷貝實例屬性
      }
    }
  }
  for (let mixin of mixins) {
    copyProperties(Mix, mixin); // 拷貝靜態屬性
    copyProperties(Mix.prototype, mixin.prototype); // 拷貝原型屬性
  }
  return Mix;
}

function copyProperties(target, source) {
  for (let key of Reflect.ownKeys(source)) {
    if ( key !== 'constructor'
      && key !== 'prototype'
      && key !== 'name'
    ) {
      let desc = Object.getOwnPropertyDescriptor(source, key);
      Object.defineProperty(target, key, desc);
    }
  }
}

// 使用
class DistributedEdit extends mix(Loggable, Serializable) {
  // ...
}
複製代碼