摘要：歡迎關注我的博客正文讓我來構造函數(shù)其實，模擬一個類的方式非常的簡單構造函數(shù)。我們先來看一個例子這里通過構造函數(shù)模擬出來的類，其實和其他語言的類行為上是基本一致的，唯一的區(qū)別就是它不具備私有方法。

ES6時代的來臨，使得類繼承變得如此的圓滑。但是，你有思考過ES6的類繼承模式嗎？如何去實現(xiàn)它呢？

類繼承對于JavaScript來說，實現(xiàn)方式與Java等類語言大不相同。熟悉JavaScript的開發(fā)者都清楚，JavaScript是基于原型模式的。那么，在es6沒有出來之前，js是如何繼承的呢？這是一個非常有意思的話題。希望帶著疑問看文章，或許對你的提升會更加巨大。如果你喜歡我的文章，歡迎評論，歡迎Star~。歡迎關注我的github博客

其實，js模擬一個類的方式非常的簡單——構造函數(shù)。或許，這是所有人都在普遍使用的方式。我們先來看一個例子：

function Person(name){
      this.name = name;
}

Person.prototype.sayName = function(){
     console.log(this.name);
}

const person = new Person("zimo");

person.sayName();       //zimo

這里通過構造函數(shù)模擬出來的類，其實和其他語言的類行為上是基本一致的，唯一的區(qū)別就是它不具備私有方法。而且，他們同樣是通過new操作符來進行實例化的，但是js的new操作與其它語言的new操作又會有所不同。比方說：

const person = Person("zimo");
console.log(person)    //undefined

構造函數(shù)前面沒有加new的情況下，會導致這個對象沒有返回值來進行賦值。但是，在類語言中，在類名前不使用new是會報錯的。

下面，我們應該進一步來看一下js的new操作符的原理，以及實現(xiàn)。

new方法原理：

創(chuàng)建一個新的對象

將對象的__proto__指向構造函數(shù)的原型

調用構造函數(shù)

返回新對象

js代碼實現(xiàn)部分：

const person = new Person(args);
//相當于
const person = Person.new(args);
Function.prototype.new = function(){
       let obj = new Object();
       obj.__proto__ = this.prototype;
       const ret = this.apply(obj, arguments);
       return (typeof ret == "object" && ret) || obj;
}

到此為止，js如何去模擬類，我們已經講述完了。接下來，我們應該看一下如何去實現(xiàn)類似與其他語言的類繼承模式。

盡管ES6已經對extends關鍵詞進行了實現(xiàn)，但是原理性的知識，我們應該需要明白。

先來看一個場景，無論是狗或者是貓，它們都有一個共同的類animal，如圖：

在真實開發(fā)中，我們必須去實現(xiàn)類與類之間的繼承關系，不然的話，我們就必須重復地去命名構造函數(shù)（這樣的方式是丑陋的）。

所以，像上述的場景，開發(fā)過程中多的數(shù)不勝數(shù)，但是本質都是不變的。接下來，那我們以一個例子來做說明，并且明白大致是如何去實現(xiàn)的。

例子：我們需要去構造一個交通工具類，該類具備屬性：輪子、速度和顏色（默認為黑），它還具備方法run(time)返回距離。之后，我們還需要去通過該類繼承一個‘汽車’類和一個‘單車’類。

如圖：

實現(xiàn)：

function Vehicle(wheel, speed){      //首先構造一個交通工具類
    this.wheel = wheel;
    this.speed = speed;
    this.color = "black";
}

Vehicle.prototype.run = function(time){    //在它的原型上定義方法
    return this.speed * time;
}

function Car(wheel, speed, brand){     //通過在汽車類中去調用父類
    Vehicle.call(this, wheel, speed);
    this.brand = brand;
}

Car.prototype = new Vehicle();      //將汽車類的原型指向交通工具的實例

function Bicycle(wheel, speed, owner){        //同樣，構造一個自行車類，在其中調用父類
    Vehicle.call(this, wheel, speed);
    this.owner = owner;
}

Bicycle.prototype = new Vehicle();             //將其原型指向交通工具實例

const car = new Car(4, 10, "baoma");

const bicycle = new Bicycle(2, 5, "zimo");

console.log(car.run(10));   //100

console.log(bicycle.run(10));   //50

這樣子，就實現(xiàn)了類的繼承。

大致的思路是：在繼承類中調用父類，以及將繼承類的原型賦值為父類的實例。

但是，每次實現(xiàn)如果都是這樣子的話，又會顯得非常的累贅，我們并沒有將可以重復使用的部分。因此，我們需要將不變的部分進行封裝，封裝成一個方法，然后將可變的部分當中參數(shù)傳遞進來。

接下來，我們來分析一下類繼承的封裝方法extend。

首先，我們來看一下，我們需要實現(xiàn)怎樣的繼承：

function Animal(name){         //構造一個動物類
  this.name = name;
}
Animal.prototype.sayName = function(){    
  console.log("My name is " + this.name);
}

/**
extends方法其中包含子類的constructor、自身的屬性、和來自父元素繼承的屬性
*/

var Dog = Animal.extends({                            //使用extends方法來實現(xiàn)類的封裝
  constructor: function(name, lan){
    this._super(name);
    this.lan = lan
  },
  sayname: function(){
    this._super.sayName();
  },
  sayLan: function(){
   console.log(this.lan);
  }
});

var animal = new Animal("animal");
var dog = new Dog("dog", "汪汪汪");

animal.sayName();    //My name is animal
dog.sayName();    // My name is dog
dog.sayLan();    // "汪汪汪"

其中的extend方法是我們需要去實現(xiàn)的，在實現(xiàn)之前，我們可以來對比一下ES6的語法

class Animal {
  constructor(name){
    this.name = name;
  }

  sayName(){
    console.log("My name is " + this.name);
  }
}

/**
對比上面的extend封裝和es6的語法，我們會發(fā)現(xiàn)，其實差異并沒有太大
*/

class Dog extends Animal{
  constructor(name, lan){
    super(name);

    this.lan = lan;
  }

  sayName(){
    super.sayName();
  }

  sayLan(){
    console.log(this.lan);
  }
}

其實，很多地方是相似的，比方說super和this._super。這個對象其實是看起來是父構造函數(shù)，因為他可以直接調用this._super(name)，但它同時還具備父構造函數(shù)原型上的函數(shù)，因此我們可以把它稱為父包裝器。但是，必須保證的是_super中的函數(shù)對象上下文必須都是指向子構造函數(shù)的。

使用一張簡陋的圖來表示整個關系的話，如圖：

下面我們來實現(xiàn)一下這個extend方法。

Function.prototype.extend = function(props){
  var Super = this;

  var Temp = function(){};

  Temp.prototype = Super.prototype;

  var superProto = new Temp();   //去創(chuàng)建一個指向Super.prototype的實例

  var _super = function(){   //創(chuàng)建一個父類包裝器
    return Super.apply(this, arguments);
  }

  var Child = function(){
    if(props.constructor){
      props.constructor.apply(this, arguments);
    }

    for(var i in Super.prototype){
      _super[i] = Super.prototype[i].bind(this);   //確保Super的原型方法拷貝過來時，this指向Child構造函數(shù)
    }

  }

  Child.prototype = superProto;               //將子類的原型指向父類的純實例
  Child.prototype._super = _super;                //構建一個引用指向父類的包裝器

  for(var i in props){
    if( i !== "constructor"){
      Child.prototype[i] = props[i];   //將props中方法放到Child的原型上面
    }
  }

  return Child;
}

繼承的一些內容就分析到這里。其實，自從ES6標準出來之后，類的繼承已經非常普遍了，因為真心好用。但是，也是越來越有人不懂得如何去理解這個繼承的原理了。其實ES6中的繼承的實現(xiàn)，也是挺簡單的。

如果你對我寫的有疑問，可以評論，如我寫的有錯誤，歡迎指正。你喜歡我的博客，請給我關注Star~呦。大家一起總結一起進步。歡迎關注我的github博客