国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

JavaScript 五十問——從源碼分析 ES6 Class 的實現機制

LeexMuller / 2269人閱讀

摘要:防止類的構造函數以普通函數的方式調用。這個函數的主要作用是通過給類添加方法,其中將靜態方法添加到構造函數上,將非靜態的方法添加到構造函數的原型對象上。

Class是ES6中新加入的繼承機制,實際是Javascript關于原型繼承機制的語法糖,本質上是對原型繼承的封裝。本文將會討論:
1、ES6 class的實現細
2、相關Object API盤點
3、Javascript中的繼承實現方案盤點

正文 1、Class 實現細節
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解析后,主要代碼結構如下:

"use strict";

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

function _possibleConstructorReturn(self, call) { ...}//實現super

function _inherits(subClass, superClass) {...}// 實現繼承

function _classCallCheck(instance, Constructor) {...} // 防止以函數的方式調用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"; //靜態變量

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 是基于原型繼承的封裝呢? 開始省略的四個函數又有什么作用呢?
下面,我們就從最開始的四個函數入手,詳細的解釋es6的class 是如何封裝的。

第一:_classCallCheck函數, 檢驗構造函數的調用方式:
代碼

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

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

第二: _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); //非靜態函數 -> 原型
        if (staticProps) defineProperties(Constructor, staticProps); return Constructor; // 靜態函數 -> 構造函數
    }; 
}();

_createClass是一個閉包+立即執行函數,以這種方式模擬一個作用域,將defineProperties私有化。
這個函數的主要作用是通過Object.defineProperty給類添加方法,其中將靜態方法添加到構造函數上,將非靜態的方法添加到構造函數的原型對象上。

第三: _inherits 實現繼承

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; 
}

從這個函數就能夠很明顯的看出來,class實現繼承的機制了。

第四: _possibleConstructorReturn super()

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

要想理解這個函數的作用,需要結合他的調用場景

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

此時已經執行完_inherits函數,Men.__proto__ === Person
相當于:

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

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

API 總結

根據以上的分析,es6 class 的實現機制也可以總結出來了:
毫無疑問的,class機制還是在prototype的基礎之上進行封裝的
——contructor 執行構造函數相關賦值
——使用 Object.defineProperty()方法 將方法添加的構造函數的原型上或構造函數上
——使用 Object.create() 和 Object.setPrototypeOf 實現類之間的繼承 子類原型__proto__指向父類原型 子類構造函數__proto__指向父類構造函數
——通過變更子類的this 作用域實現super()

盤點JavaScript中的繼承方式

1.原型鏈繼承
2.構造函數繼承
3.組合繼承
4.ES6 extends 繼承

詳細內容可以參考 聊一聊 JavaScript的繼承方式https://segmentfault.com/a/11...

后記

終于寫完了,在沒有網絡輔助的情況下寫博客真是太難了!絕知此事要躬行呀!
原來覺得寫一篇關于class的博客還不簡單嗎,就是原型鏈繼承那一套唄,現在總結下來,還是有很多地方需要注意的;學習到了很多!嗯 不說了, 我還有好幾個坑要填呢~
如果這篇文章對你有幫助的話,歡迎點贊收藏!
如果你有疑問的話,希望積極留言,共同討論,共同進步!

參考文檔

ES6—類的實現原理 https://segmentfault.com/a/11...

JavaScript 紅寶書

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/100918.html

相關文章

  • Javascript 十問——實現繼承多種方式

    摘要:組合繼承實現了屬性分離,方法共享下的完美繼承方案繼承我們的主角,,就是對組合繼承的改進。這也是為什么在子類構造函數中一定要顯示調用的原因。 談到繼承,或者更廣義上的:一個對象可以使用另外一個對象的屬性或方法。實現起來無外乎有兩種方式:apply or call 改變this的作用域原型繼承 改變__proto__指向,添加作用域鏈 而JavaScript所有的繼承實現,都是圍繞以上兩點...

    BlackHole1 評論0 收藏0
  • JavaScript十問——淺入深出,自己實現一個 ES 6 Promise

    摘要:以上實現了最簡單的一個測試代碼當然,這不能算是一個,目前僅僅實現了根據狀態調用不同的回調函數。靜態函數接下來是的各種靜態函數每一個都執行完畢后返回總結現在,一個完整的對象就完成了。 前言 說到 ES6,Promise 是繞不過的問題;如果說 ES6 的 Class 是基于 Javascript 原型繼承的封裝,那么 Promise 則是對 callback 回調機制的改進。這篇文章,不...

    hiyayiji 評論0 收藏0
  • Javascript十問——源頭細說Webpack與Gulp

    摘要:前言與是目前圈子內比較活躍的前端構建工具。對于初學者來說,對這二者往往容易認識不清,今天,就從事件的源頭,說清楚與。它可以將許多松散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。打包后形成的文件出口。 前言:Webpack 與 gulp是目前圈子內比較活躍的前端構建工具。網上有很多二者比較的文章,面試中也會經常遇到gulp,Webpack的區別這樣的問題。對于初學者來說,對這二...

    lwx12525 評論0 收藏0
  • JavaScript 十問——認真聊一聊去抖與節流

    摘要:前言無論是面試還是在討論瀏覽器優化過程中,都會涉及到去抖動和節流的問題。總的來說,這二者是一種限制事件觸發頻率的方式。不同的是,節流會指定事件觸發的時間間隔而去抖動會指定事件不觸發的時間間隔。 前言 無論是面試還是在討論瀏覽器優化過程中,都會涉及到去抖動和節流的問題。總的來說,這二者是一種限制事件觸發頻率的方式。不同的是,節流會指定事件觸發的時間間隔;而去抖動會指定事件不觸發的時間間隔...

    chadLi 評論0 收藏0
  • JavaScript 十問——認真聊一聊去抖與節流

    摘要:前言無論是面試還是在討論瀏覽器優化過程中,都會涉及到去抖動和節流的問題。總的來說,這二者是一種限制事件觸發頻率的方式。不同的是,節流會指定事件觸發的時間間隔而去抖動會指定事件不觸發的時間間隔。 前言 無論是面試還是在討論瀏覽器優化過程中,都會涉及到去抖動和節流的問題。總的來說,這二者是一種限制事件觸發頻率的方式。不同的是,節流會指定事件觸發的時間間隔;而去抖動會指定事件不觸發的時間間隔...

    EscapedDog 評論0 收藏0

發表評論

0條評論

LeexMuller

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<