摘要：和我前一篇說過，構(gòu)造函數(shù)模式不流行就是因?yàn)樗闹赜眯赃@種繼承方式的重用性呵呵但是我們也不能否定他的存在，畢竟我以前也用過。

今天給大家科普一個(gè)叫做繼承的大哥。之所以叫做大哥，是因?yàn)樗_實(shí)是所以語言都必須具備的。而且這也是BAT公司前端面試中，必提及的一個(gè)知識(shí)點(diǎn)。 由于js 是由 大神 在10天之內(nèi)寫完了，但后來由ECMA262接手優(yōu)化，最終有了現(xiàn)在豐滿的JS。 但是關(guān)于繼承的遺留問題應(yīng)該算是比較嚴(yán)重的。 先說一下基本的js繼承有哪些.

啊~~~ md， 名字怎么這么怪嘞！ 這個(gè)官方的說法，我們鄉(xiāng)下人管他叫做復(fù)制(copy);
來個(gè)栗子:

function Father(name){
    this.name =name;
}
function Children(name){
    Father.call(this,name);
}
let jimmy = new Children("jimmy");
console.log(jimmy.name);  //jimmy

沒錯(cuò)，看清楚，其實(shí)就是使用了函數(shù)對(duì)象自帶的方法。call 來創(chuàng)建的。 將父構(gòu)造函數(shù)的屬性給copy到子類上，相當(dāng)于建立了一個(gè)副本。但其實(shí)這種方式并沒有什么卵用。 和我前一篇說過，構(gòu)造函數(shù)模式不流行就是因?yàn)樗闹赜眯?=== 0. 這種繼承方式的重用性（呵呵） <=0. 但是我們也不能否定他的存在，畢竟我以前也用過。

介紹一個(gè)當(dāng)今比較流行的,組合繼承

組合就是融合了原型和構(gòu)造器的一種繼承方法。 這個(gè)應(yīng)該算是一種比較穩(wěn)妥的繼承方式.
即能排除引用類型造成的問題，又可以實(shí)現(xiàn)共享的效果。

function A (){
 this.name = "jimmy";
}
A.prototype.speak = function(){
    console.log(`my name is ${this.name}`);
}
function B(){
  A.call(this);
}
B.prototype = new A();
B.prototype.constructor = B;
var b = new B();
console.log(b.name);  //jimmy 
b.speak();  //my name is jimmy

這種應(yīng)該算是比較經(jīng)典了，但這樣會(huì)兩次調(diào)用到父類型，對(duì)內(nèi)存影響還是比較大的。 所以有人提出中間創(chuàng)建一個(gè)寄生組合式繼承. 但這個(gè)真的很雞肋。 JS的一個(gè)繼承能扯出這么多東西，也是醉了。
但是es6 class 的出現(xiàn)，解決了這一痛點(diǎn)。 雖然這個(gè)東西有悖js 的原理(因?yàn)樵趈s中是沒有類這個(gè)概念的),但是實(shí)用性確實(shí)相當(dāng)?shù)暮?
所以今天的主角應(yīng)該是class 這個(gè)東西

在es6中新出了一個(gè)feature--class. 中文叫做類. 應(yīng)該算是混合模式的一個(gè)總結(jié)吧。在使用class的使用，你完全可以不去寫，constructor, prototype之類的東西了.
來個(gè)栗子:

//原生的混合模式:
function Point(x,y){
  this.x = x;
  this.y = y;}

Point.prototype.toString = function () {
  return "(" + this.x + ", " + this.y + ")";
  }
var point = new Point(1,2); 
//使用class的類:
class Point {
  constructor(x, y) {  //本質(zhì)上還是原型鏈上的方法
  this.x = x;  //這里的this和上面的一樣都代表實(shí)例對(duì)象
  this.y = y;
  }

  toString() {
  return "(" + this.x + ", " + this.y + ")";
  }
}
var point = new Point(1,2);

雖然我打心里是不愿意將類加入js里面(沒準(zhǔn)以后就變?yōu)闃?biāo)準(zhǔn)了)，但為了大家的理解，我還是把這個(gè)稱為類吧; ):
可以看到類和原型js的寫法的不同吧。我先說一下語法吧。
創(chuàng)建一個(gè)類，就和在java里面創(chuàng)建類是一樣的。
初始化使用class + 類名(首字母大寫) + {...}

class Hehe{
...
}
var hehe new Hehe();

初始化話，上面也已經(jīng)說了。在類中需要注意一個(gè)叫做constructor的方法，這個(gè)就相當(dāng)于構(gòu)造函數(shù)里面的內(nèi)容，他會(huì)在類初始化時(shí)，自動(dòng)執(zhí)行. 所以可以在constructor里面?zhèn)鬟f一些參數(shù).

class Jimmy{
    constructor(name){
        this.name = name;  //這里的this和構(gòu)造函數(shù)里面的this的屬性是一致的
    }
}
let jimmy = new Jimmy("jimmy");
console.log(jimmy.name);  //jimmy

當(dāng)然在類中還可以添加方法。具體做法如下:

class Jimmy{
    constructor(name){
        this.name = name;  //這里的this和構(gòu)造函數(shù)里面的this的屬性是一致的
    }
    speak(){
        console.log(`my name is ${this.name}`);
    }
}
let jimmy = new Jimmy("jimmy");
jimmy.speak();  //my name is jimmy;

需要注意，請(qǐng)不要手賤在每個(gè){} 后面加上 "," 像這樣

class Jimmy{
    constructor(name){
        this.name = name; 
    },
    speak(){
        console.log(`my name is ${this.name}`);
    }
}

到時(shí)候出個(gè)bug, 我看你哭去吧。
而這樣定義的方法其實(shí)是存在于Jimmy.prototype 上的。
我們檢驗(yàn)一下Jimmy的類型;

Jimmy instanceof Function; //true

所以說 其實(shí) 類就是js混合模式的一個(gè)syntax candy(語法糖).
當(dāng)然類也可以使用字面量形式書寫(廢話，類本來就是函數(shù)類型)

const MyClass = class Me {  
  getClassName() {
  return Me.name;  //這里的Me 就和使用函數(shù)是一樣的道理
  }};
var MyClass = function Me(){
    console.log(Me.name);  //Me
}

關(guān)鍵看你喜歡用哪一種了。
說一說類的繼承吧， 這應(yīng)該是我最喜歡class的原因了.

在class中是使用extends來實(shí)現(xiàn)繼承的效果的. 還有一個(gè)特性 super. 這個(gè)用來指向父類的實(shí)例，如果大家記得應(yīng)該會(huì)了解到上面說的繼承模式吧。 而這里的super算是es6新定義的一個(gè)東西。

class Point {
  constructor(x, y) {
  this.x = x;
  this.y = y;
   }
  }

class ColorPoint extends Point {
  constructor(x, y, color) {
  this.color = color; // 這里會(huì)報(bào)錯(cuò)，ignore這句就可以了
  super(x, y);  //這里相當(dāng)于初始化父類,然后規(guī)定class里面this的指向
  this.color = color; // 正確
   }
   show(){
    console.log(this.color);  
    console.log(super.x);
    console.log(this.x);
   }
  }
  var color = new ColorPoint(1,2,"red");
  color.show();
  //依次得到, red , 1 ,1 

我艸，super和this到底應(yīng)該怎么區(qū)分嘞？
很簡單，上面已經(jīng)說了，super是指向父類的實(shí)例，而this是在這里是構(gòu)造函數(shù)上原型的指針。 其實(shí)由于繼承，使用this也可以訪問到x; 所以推薦如果你有強(qiáng)迫癥的話，父類上的方法和屬性可以使用super調(diào)用，子類自定的屬性和方法使用this調(diào)用。 當(dāng)然我喜歡直接使用this（三包服務(wù)）。
還有一點(diǎn)，那我怎么檢測(cè)我的父類到底是誰嘞(隔壁王叔叔)?
如果你在瀏覽器的Console 里面，可以直接使用.__proto__來進(jìn)行檢測(cè)的(腳本里不行)。在腳本里,js提供了一個(gè)方法getPrototypeOf()來進(jìn)行檢測(cè)

//上述例子
Object.getPrototypeOf(ColorPoint); //Point
//相當(dāng)于瀏覽器里面的
ColorPoint.__proto__;  //Point

關(guān)于繼承我就扯這么多吧。 雖然說繼承很重要，但我們用的地方不是很多，原因是----因?yàn)槲覀儾慌１?。?！?大家如果有空可以去翻一翻jquery或者zepto的源碼，看一看是不是用到了prototype，繼承等相關(guān)的技術(shù)。而且他們封裝性都是超級(jí)好的。沒有一個(gè)直接寫在全局里面的。