一、在ES6以前實現類和繼承

　　實現類的程式碼如下：

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

Person.prototype.speakSomething = function () {
  console.log("I can speek chinese");
};

　　實現繼承的程式碼如下：一般使用原型鏈繼承和call繼承混合的形式

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

Person.prototype.showName = function () {
  return `名字是：${this.name}`;
};

function Student(name,skill) {
  Person.call(this,name);//繼承屬性
  this.skill = skill;
}

Student.prototype = new Person();//繼承方法

二、ES6使用class定義類

class Parent {
  constructor(name,age){
    this.name = name;
    this.age = age;
  }
  speakSomething(){
    console.log("I can speek chinese");
  }
}

　　經過babel轉碼之後

function _classCallCheck(instance,Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

var Parent = function () {
  function Parent(name,age) {
    _classCallCheck(this,Parent);

    this.name = name;
    this.age = age;
  }

  _createClass(Parent,[{
    key: "speakSomething",value: function speakSomething() {
      console.log("I can speek chinese");
    }
  }]);

  return Parent;
}();

　　 可以看到ES6類的底層還是通過建構函式去建立的。

　　 通過ES6建立的類，是不允許你直接呼叫的。在ES5中，建構函式是可以直接執行的，比如Parent()。但是在ES6就不行。我們可以看到轉碼的建構函式中有_classCallCheck(this,Parent)語句,這句話是防止你通過建構函式直接執行的。你直接在ES6執行Parent(),這是不允許的,ES6中丟擲Class constructor Parent cannot be invoked without 'new'錯誤。轉碼後的會丟擲Cannot call a class as a function.能夠規範化類的使用方式。

　　轉碼中_createClass方法，它呼叫Object.defineProperty方法去給新建立的Parent新增各種屬性。defineProperties(Constructor.prototype,protoProps)是給原型新增屬性。如果你有靜態屬性，會直接新增到建構函式defineProperties(Constructor,staticProps)上。

三、ES6實現繼承

　　我們給Parent新增靜態屬性，原型屬性，內部屬性。

class Parent {
  static height = 12
  constructor(name,age){
    this.name = name;
    this.age = age;
  }
  speakSomething(){
    console.log("I can speek chinese");
  }
}
Parent.prototype.color = 'yellow'


//定義子類，繼承父類
class Child extends Parent {
  static width = 18
  constructor(name,age){
    super(name,age);
  }
  coding(){
    console.log("I can code JS");
  }
}

　　經過babel轉碼之後

"use strict";
 
var _createClass = function () {
  function defineProperties(target,props) {
    for (var i = 0; i < props.length; i++) {
      var descriptor = props[i];
      descriptor.enumerable = descriptor.enumerable || false;
      descriptor.configurable = true;
      if ("value" in descriptor) descriptor.writable = true;
      Object.defineProperty(target,descriptor.key,descriptor);
    }
  }
 
  return function (Constructor,protoProps,staticProps) {
    if (protoProps) defineProperties(Constructor.prototype,protoProps);
    if (staticProps) defineProperties(Constructor,staticProps);
    return Constructor;
  };
}();
 
function _possibleConstructorReturn(self,call) {
  if (!self) {
    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  }
  return call && (typeof call === "object" || typeof call === "function") ? call : self;
}
 
function _inherits(subClass,superClass) {
  if (typeof superClass !== "function" && superClass !== null) {
    throw new TypeError("Super expression must either be null or a function,not " + typeof superClass);
  }
  subClass.prototype = Object.create(superClass && superClass.prototype,{
    constructor: {
      value: subClass,enumerable: false,writable: true,configurable: true
    }
  });
  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass,superClass) : subClass.__proto__ = superClass;
}
 
function _classCallCheck(instance,Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}
 
var Parent = function () {
  function Parent(name,Parent);
 
    this.name = name;
    this.age = age;
  }
 
  _createClass(Parent,value: function speakSomething() {
      console.log("I can speek chinese");
    }
  }]);
 
  return Parent;
}();
 
Parent.height = 12;
 
Parent.prototype.color = 'yellow';
 
//定義子類，繼承父類
 
var Child = function (_Parent) {
  _inherits(Child,_Parent);
 
  function Child(name,Child);
 
    return _possibleConstructorReturn(this,(Child.__proto__ || Object.getPrototypeOf(Child)).call(this,name,age));
  }
 
  _createClass(Child,[{
    key: "coding",value: function coding() {
      console.log("I can code JS");
    }
  }]);
 
  return Child;
}(Parent);
 
Child.width = 18;

　　構造類的方法都沒變，只是添加了_inherits核心方法來實現繼承。具體步驟如下：

　　首先是判斷父類的型別，然後：

subClass.prototype = Object.create(superClass && superClass.prototype,configurable: true
    }
  });

　　這段程式碼翻譯下來就是

function F(){}
F.prototype = superClass.prototype
subClass.prototype = new F()
subClass.prototype.constructor = subClass

　　接下來就是subClass.__proto__ = superClass

　　_inherits核心思想就是下面兩句：　

subClass.prototype.__proto__ = superClass.prototype
subClass.__proto__ = superClass

　　如下圖所示：

　　首先 subClass.prototype.__proto__ = superClass.prototype保證了子類的例項instanceof父類是true，子類的例項可以訪問到父類的屬性，包括內部屬性，以及原型屬性。

　　其次，subClass.__proto__ = superClass，保證了靜態屬性也能訪問到，也就是這個例子中的Child.height。

以上就是詳解ES6中class的實現原理的詳細內容，更多關於ES6中class的實現原理的資料請關注我們其它相關文章！