摘要：防止類的構(gòu)造函數(shù)以普通函數(shù)的方式調(diào)用。這個(gè)函數(shù)的主要作用是通過給類添加方法，其中將靜態(tài)方法添加到構(gòu)造函數(shù)上，將非靜態(tài)的方法添加到構(gòu)造函數(shù)的原型對象上。

Class是ES6中新加入的繼承機(jī)制，實(shí)際是Javascript關(guān)于原型繼承機(jī)制的語法糖，本質(zhì)上是對原型繼承的封裝。本文將會討論：
1、ES6 class的實(shí)現(xiàn)細(xì)
2、相關(guān)Object API盤點(diǎn)
3、Javascript中的繼承實(shí)現(xiàn)方案盤點(diǎn)

class Person{
   constructor(name, age){
     this.name = name
     this.age = age
    }

    static type = "being"

  sayName (){
    return this.name
    }

  static intro(){
    console.log("")
    }
}

class Men extends Person{
    constructor(name, age){
        super()
      this.gender = "male"
    }
}

const men = new Men()

以上代碼是ES6 class的基本使用方式，通過babel解析后，主要代碼結(jié)構(gòu)如下：

"use strict";

var _createClass = function () {...}();// 給類添加方法

function _possibleConstructorReturn(self, call) { ...}//實(shí)現(xiàn)super

function _inherits(subClass, superClass) {...}// 實(shí)現(xiàn)繼承

function _classCallCheck(instance, Constructor) {...} // 防止以函數(shù)的方式調(diào)用class

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

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

  _createClass(Person, [{
      key: "sayName",
      value: function sayName() {
        return this.name;
      }
  }], [{
      key: "intro",
      value: function intro() {
        console.log("");
      }
  }]);

  return Person;
  }();

Person.type = "being"; //靜態(tài)變量

var Men = function (_Person) {
  _inherits(Men, _Person);

  function Men(name, age) {
    _classCallCheck(this, Men);

    var _this = _possibleConstructorReturn(this, (Men.__proto__ || Object.getPrototypeOf(Men)).call(this));

    _this.gender = "male";
    return _this;
  }
    
  return Men;
  }(Person);

var men = new Men();

為什么說es6的class 是基于原型繼承的封裝呢？ 開始省略的四個(gè)函數(shù)又有什么作用呢?
下面，我們就從最開始的四個(gè)函數(shù)入手，詳細(xì)的解釋es6的class 是如何封裝的。

第一：_classCallCheck函數(shù)， 檢驗(yàn)構(gòu)造函數(shù)的調(diào)用方式：
代碼

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

我們知道，在javascript中 person = new Person() ，通常完成以下幾件事：
1、創(chuàng)建一個(gè)新的對象 Object.create()
2、將 新對象的 this 指向 構(gòu)造函數(shù)的原型對象
3、新對象的__proto__ 指向 構(gòu)造函數(shù)
4、執(zhí)行構(gòu)造函數(shù)
而普通函數(shù)調(diào)用，this通常指向全局
因此，_classCallCheck函數(shù)是用來檢測類的調(diào)用方式。防止類的構(gòu)造函數(shù)以普通函數(shù)的方式調(diào)用。

第二： _createClass 給類添加方法

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); //非靜態(tài)函數(shù) -> 原型
        if (staticProps) defineProperties(Constructor, staticProps); return Constructor; // 靜態(tài)函數(shù) -> 構(gòu)造函數(shù)
    }; 
}();

_createClass是一個(gè)閉包+立即執(zhí)行函數(shù)，以這種方式模擬一個(gè)作用域，將defineProperties私有化。
這個(gè)函數(shù)的主要作用是通過Object.defineProperty給類添加方法，其中將靜態(tài)方法添加到構(gòu)造函數(shù)上，將非靜態(tài)的方法添加到構(gòu)造函數(shù)的原型對象上。

第三： _inherits 實(shí)現(xiàn)繼承

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,  // 子類的原型的__proto__指向父類的原型
        //給子類添加 constructor屬性 subclass.prototype.constructor === subclass
        { constructor: 
            { 
                value: subClass, 
                enumerable: false, 
                writable: true, 
                configurable: true 
            } 
        }
    ); 
    if (superClass) 
        //子類__proto__ 指向父類
        Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; 
}

從這個(gè)函數(shù)就能夠很明顯的看出來，class實(shí)現(xiàn)繼承的機(jī)制了。

第四： _possibleConstructorReturn super（）

function _possibleConstructorReturn(self, call) { 
    if (!self) { 
        throw new ReferenceError("this hasn"t been initialised - super() hasn"t been called"); //保證子類構(gòu)造函數(shù)中 顯式調(diào)用 super()
    } 
    return call && (typeof call === "object" || typeof call === "function") ? call : self; 
}

要想理解這個(gè)函數(shù)的作用，需要結(jié)合他的調(diào)用場景

var _this = _possibleConstructorReturn(this, (Men.__proto__ || Object.getPrototypeOf(Men)).call(this));// function Men（）{}

此時(shí)已經(jīng)執(zhí)行完_inherits函數(shù)，Men.__proto__ === Person
相當(dāng)于：

var _this = _possibleConstructorReturn(this, Person.call(this));

很明顯，就是將子類的this 指向父類。

根據(jù)以上的分析，es6 class 的實(shí)現(xiàn)機(jī)制也可以總結(jié)出來了：
毫無疑問的，class機(jī)制還是在prototype的基礎(chǔ)之上進(jìn)行封裝的
——contructor 執(zhí)行構(gòu)造函數(shù)相關(guān)賦值
——使用 Object.defineProperty()方法 將方法添加的構(gòu)造函數(shù)的原型上或構(gòu)造函數(shù)上
——使用 Object.create() 和 Object.setPrototypeOf 實(shí)現(xiàn)類之間的繼承 子類原型__proto__指向父類原型 子類構(gòu)造函數(shù)__proto__指向父類構(gòu)造函數(shù)
——通過變更子類的this 作用域?qū)崿F(xiàn)super()

1.原型鏈繼承
2.構(gòu)造函數(shù)繼承
3.組合繼承
4.ES6 extends 繼承

詳細(xì)內(nèi)容可以參考 聊一聊 JavaScript的繼承方式https://segmentfault.com/a/11...

終于寫完了，在沒有網(wǎng)絡(luò)輔助的情況下寫博客真是太難了！絕知此事要躬行呀！
原來覺得寫一篇關(guān)于class的博客還不簡單嗎，就是原型鏈繼承那一套唄，現(xiàn)在總結(jié)下來，還是有很多地方需要注意的；學(xué)習(xí)到了很多！嗯 不說了， 我還有好幾個(gè)坑要填呢~
如果這篇文章對你有幫助的話，歡迎點(diǎn)贊收藏！
如果你有疑問的話，希望積極留言，共同討論，共同進(jìn)步！

ES6—類的實(shí)現(xiàn)原理 https://segmentfault.com/a/11...

JavaScript 紅寶書