ES6學習筆記（五）：Class和Module

Class

Class

只是一個語法糖,其功能用es5也能實現,可是比es5更符合類的期待

定義:
constructor表明構造方法,而this指向new 生成的實例
定義類方法時,能夠不使用function

注意:類的內部全部定義的方法，都是不可枚舉的（non-enumerable）。

//定義類
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

使用

new Point(x,y)

constructor

類的默認方法,new生成對象實例的時候執行的就是這個方法
一個類必須有constructor方法
constructor默認返回實例對象

Class不存在變量提高

new Foo(); // ReferenceError
class Foo {}

Class的繼承

extends關鍵字

class ColorPoint extends Point {}

注意:
1.子類必須調用super,子類自己沒有this,super是父類的構造函數,調用super,子類纔有this
這是由於子類實例的構建，是基於對父類實例加工，只有super方法才能返回父類實例。

類的prototype屬性和__proto__屬性
1.子類的__proto__指向父類
2.子類的prototype的__proto__指向父類的.prototype

class A {
}

class B extends A {
}

B.__proto__ === A // true
B.prototype.__proto__ === A.prototype // true

super關鍵字
1.調用super方法時,super表明父類的constructor方法
2.做爲屬性super調用時,super表明父類自己

ES6改變了Object構造函數的行爲，一旦發現Object方法不是經過new Object()這種形式調用，ES6規定Object構造函數會忽略參數。

getter和setter

Generate方法

直接在方法屬性前加*

靜態方法static

一個方法前加static,則該方法不會被繼承,而是經過類來直接調用
父類的靜態方法，能夠被子類繼承。
靜態方法也能夠從super上調用,由於super指向父類自己

注意:Class內部只有靜態方法，沒有靜態屬性。

new.target

（在構造函數中）返回new命令做用於的那個構造函數。

mixin模式

???

Module

嚴格模式

es6的模塊自動使用嚴格模式

export

as

一般狀況下，export輸出的變量就是原本的名字，可是能夠使用as關鍵字重命名。

function v1() { ... }
function v2() { ... }

export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

export命令必須處於模塊頂層。
export命令規定的是對外的接口。

import

import具備變量提高效果,會提高到模塊頭部執行

default

import和export的默認變量名

es6模塊加載與CommonJS

CommonJS模塊輸出的是一個值的拷貝，而ES6模塊輸出的是值的引用。

CommonJS一旦輸出一個值，模塊內部的變化就影響不到這個值。 ES6模塊原始值變了，import輸入的值也會跟着變。