ES6躬行記（21）——類的繼承

　　ES6的繼承依然是基於原型的繼承，但語法更爲簡潔清晰。經過一個extends關鍵字，就能描述兩個類之間的繼承關係（以下代碼所示），在此關鍵字以前的Man是子類(即派生類)，而在其以後的People是父類（即基類或超類）。

class People {
  constructor() {
    this.age = 28;
  }
  getAge() {
    return this.age;
  }
  static getName() {
    return "strick";
  }
}
class Man extends People {
  constructor() {
    super();
  }
}
var man = new Man();
Man.getName();          //"strick"
man.getAge();           //28

　　由上面的代碼可知，子類能繼承父類的靜態方法和原型方法，而諸如訪問器屬性、生成器等父類的其它成員也是能繼承的。不只如此，extends關鍵字右側繼承的不僅僅是類，還能夠是函數、內置對象，甚至是表達式，只要其計算結果合法就行。而合法與否的衡量準則，就是ES6對父類的要求，必須是含構造函數的對象，即能與new運算符組合的對象，像空的對象字面量（{}）、null、undefined和生成器等都是不容許的。

　　在Man類的構造函數中調用了一次super()方法，這是爲了能更方便的操做父類而引入的新特性。而super是個特殊的關鍵字，在類中擁有雙重身份，既是方法也是對象，關於對象身份的用法在第5篇中曾有過介紹。

1、super

　　當super做爲方法使用時，有如下六個注意點。

（1）super()方法至關於父類的構造函數。

（2）只有在子類的構造函數中才能調用super()方法。

（3）若是子類顯式地定義了構造函數，那麼必須調用super()方法，不然會報錯。

（4）若是子類沒有定義構造函數，那麼會自動調用super()方法。

（5）當子類的構造函數顯式地返回一個對象時，就能避免調用super()方法。

（6）在使用this以前，必須先調用super()方法。

1）第五個注意點

　　下面用一個示例來描述第五個注意點，限於篇幅省略了父類People的聲明。在子類Man的構造函數中註釋了super()方法，並將其返回結果改爲了一個空對象，這段代碼可以正確執行。

class Man extends People {
  constructor() {
    //super();
    return {};
  }
}

2）第六個注意點

　　關於第六個注意點，之因此要這麼限制，主要和this的初始化有關。調用super()方法不只能執行父類的構造函數，還能初始化父類的this。而ES6對兩個類的this的初始化順序作了規定，先父類，再子類，所以super()方法要在使用this以前調用。還有一點要注意，就是子類的this會合並父類的this的屬性和方法，以下代碼所示，在父類People中初始化的自有屬性age，能在子類Man中訪問。

class People {
  constructor() {
    this.age = 28;
  }
}
class Man extends People {
  constructor() {
    super();
    console.log(this.age);      //28
  }
}
var man = new Man();

3）對象身份

　　當super做爲對象使用時，在不一樣的位置，其指向將不一樣，具體分爲兩種狀況，以下所列。

（1）若是在子類的原型方法中使用super，那麼super指向父類的原型。

（2）若是在子類的靜態方法中使用super，那麼super指向父類。

　　下面是一個演示super指向的示例，父類People包含兩對同名方法，一個是原型方法，另外一個是靜態方法；子類Man包含兩個只讀的訪問器屬性，其中name是靜態的訪問器屬性。

class People {
  getAge() {
    return 28;
  }
  static getAge() {
    return 30;
  }
  getName() {
    return "freedom";
  }
  static getName() {
    return "strick";
  }
}
class Man extends People {
  get age() {
    return super.getAge();
  }
  static get name() {
    return super.getName();
  }
}
var man = new Man();
man.age;               //28
Man.name;              //"strick"

　　由兩個訪問器屬性的讀取結果可知，super的指向符合所列的兩種狀況。注意，像下面這樣使用super，會拋出語法錯誤，由於此處的super沒法明確說明本身的身份究竟是方法仍是對象。

class Man extends People {
  getName() {
    console.log(super);
  }
}

2、表達式

　　ES6容許extends關鍵字的右側是一個表達式，這使得子類的繼承更加靈活，能動態地選擇父類，下面用一個示例演示表達式的妙用。

function getPeople(gender) {
  return gender == 1 ? Man : Woman;
}
class Man { }
class Woman { }
class Person extends getPeople(1) { }
var person = new Person();
person instanceof Man;        　//true
person instanceof Woman;      　//false

　　在代碼中先聲明三個類，其中Man和Woman是父類，Person是子類，再調用能根據參數返回不一樣類的getPeople()函數，獲得的返回值是Man類。經過instanceof運算符的計算結果可知，Person類繼承的正是Man類。

1）mixin

　　類的這個特性還能解決沒法多重繼承的問題，以下所示。

function mixin(...objects) {
  function middle() {}
  Object.assign(middle.prototype, ...objects);
  return middle;
}
var man = {
  getMan() {
    return "男";
  }
};
var woman = {
  getWoman() {
    return "女";
  }
};
class Person extends mixin(man, woman) { }
var person = new Person();
person.getMan();        　　//"男"
person.getWoman();      　　//"女"

　　在代碼中先初始化兩個對象：man和woman，而後調用mixin()函數，將兩個對象的方法合併到內部函數middle()的原型上，最後讓Person類繼承middle()函數，這樣就能調用兩個對象中的方法了。

　　這種將多個對象或類合併成一個，間接實現多重繼承的做法叫作類的模板，也叫抽象子類或mixin（混合）。

3、內置對象

　　在ES5時代，像Array、Error等內置對象是不能被繼承的，而ES6突破了這個限制，由於ES6的子類能經過this訪問父類的內部屬性和方法，這樣就能繼承內置對象的全部功能。以數組爲例，模擬的子類沒法自動更新length屬性，而ES6的子類就不會有這個問題，以下所示。

class List extends Array { }
var list = new List();
list.length;        //0
list.push("a");
list.length;        //1

4、Symbol.species

　　在內置對象中，有些方法能返回本身的實例，例如數組的map()、slice()等。當子類繼承了內置對象後，這類方法的返回值會被替換成子類的實例，具體以下所示。

class List extends Array { }
var list = new List(1, 2),
  segment = list.slice(0, 1);   //List [1]
segment instanceof List;        //true

　　接下來簡單分析一下這其中的原因。在每一個內置對象中，都有一個靜態的只讀訪問器屬性（相似於下面的代碼），其名稱是內置符號Symbol.species，返回值是this。

class Array {
  static get [Symbol.species]() {
    return this;
  }
}

　　當調用內置對象中的方法時，若是返回值是實例，那麼就會先訪問Symbol.species屬性，肯定要實例化哪一個類。而根據ES6的規則可知，當子類調用父類的靜態方法時，方法中的this指向的是子類，從而就能證實子類在調用內置對象的某些方法時，能獲得自身的實例。

　　若是想要內置對象的這些方法仍然返回它們自身的實例，那麼就須要在子類中也聲明一個相同的只讀訪問器屬性，並返回相應的內置對象，以此屏蔽父類中的同名屬性。下面的代碼和上一個示例相似，只是給子類增長了Symbol.species屬性。

class List extends Array {
  static get [Symbol.species]() {
    return Array;
  }
}
var list = new List(1, 2),
  segment = list.slice(0, 1);   //[1]
segment instanceof List;        //false

5、new.target

　　元屬性new.target曾在第14篇中作過講解，本節會介紹元屬性在父類中的行爲，以下所示。

class People {
  constructor() {
    new.target === People;     //false
    new.target === Man;        //true
  }
}
class Man extends People { }
var man = new Man();

　　在上面的代碼中，Man是子類，People是父類，在父類的構造函數中對new.target作了兩次比較，從兩次的比較結果中可知，此時的new.target指向的是子類。