ES6—類的實(shí)現(xiàn)原理

Heier 發(fā)布于2019-08-20 14:22 / 1434人閱讀

摘要：對(duì)應(yīng)轉(zhuǎn)碼將提出這個(gè)方面即是判斷的是否有指向的對(duì)象。同樣再轉(zhuǎn)碼中，找到了對(duì)應(yīng)的確保為的關(guān)聯(lián)到給添加這個(gè)屬性設(shè)置的內(nèi)置與相關(guān)聯(lián)可以看出背后是通過的原型鏈實(shí)現(xiàn)的。其中對(duì)應(yīng)的轉(zhuǎn)碼其中實(shí)現(xiàn)了的原理。顯示綁定的內(nèi)置到，即在中執(zhí)行原型鏈上關(guān)聯(lián)的屬性。

ES6篇

一段符合ES6語法的代碼

    class a{
      constructor(y,z){
        this.y =y;
        this.z =z;
      }
      render(){
        console.log(1)
      }
    }
    
    class b extends a{
      constructor(m,n){
        super();
        this.m=m;
        this.n=n;
      }
      
      render(){
        console.log(2);
      }
    }

我在babel官網(wǎng)上輸入，查看轉(zhuǎn)碼(),代碼長(zhǎng)很多，從中找出關(guān)鍵點(diǎn)：

class

constructor

extend

super

class

聲明class class a(){}
查看對(duì)應(yīng)轉(zhuǎn)碼 var a = function(){return a}()
可以看出聲明一個(gè)class就是通過創(chuàng)建并執(zhí)行一個(gè)匿名函數(shù)，在這個(gè)匿名函數(shù)中聲明function a,最后返回a。

constructor

 
 constructor(y,z){
        this.y =y;
        this.z =z;
     }

對(duì)應(yīng)轉(zhuǎn)碼:

function a(y, z) {
        _classCallCheck(this, a);

        this.y = y;
        this.z = z;
    }

將_classCallCheck(this,a)提出

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

這個(gè)方面即是判斷this的[[prototype]]是否有指向a.prototype的對(duì)象。即是判斷原本是不是有a這個(gè)function。？？感覺解釋的不好。
然后再在a(本質(zhì)是function，但可以被稱作class)中聲明屬性y，z。
接下來，在class a中有一個(gè)render方法，

_createClass(a, [{
    key: "render",
    value: function render() {
      console.log(1);
    }
}]);

通過_createClass方法，可以給a添加render方法。

將_createClass提出來看。

var _createClass = function () { 
    // 給對(duì)象添加屬性
    function defineProperties(target, props) {
     for (var i = 0; i < props.length; i++) { 
         var descriptor = props[i]; 
         descriptor.enumerable = descriptor.enumerable || false; //默認(rèn)不可枚舉
         descriptor.configurable = true;//可配置修改屬性
         if ("value" in descriptor) descriptor.writable = true;
         Object.defineProperty(target, descriptor.key, descriptor);//給target添加屬性
      } 
    }
    // 返回函數(shù)
    return function (Constructor, protoProps, staticProps) { 
        if (protoProps) defineProperties(Constructor.prototype, protoProps); 
        if (staticProps) defineProperties(Constructor, staticProps); 
        return Constructor; 
    }; 
}();//立即執(zhí)行

由上推斷es6給class添加的屬性、方法背后是es5對(duì)給對(duì)象添加屬性的方法。

extend

同樣再轉(zhuǎn)碼中，找到了對(duì)應(yīng)的_inherits(b, _a)

function _inherits(subClass, superClass) { 
    // 確保superClass為function
    if (typeof superClass !== "function" && superClass !== null) { 
        throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
    } 
    // subClass.prototype的[[prototype]]關(guān)聯(lián)到superClass superClass.prototype
    // 給subClass添加constructor這個(gè)屬性
    subClass.prototype = Object.create(superClass && superClass.prototype, { 
        constructor: { 
            value: subClass, 
            enumerable: false, 
            writable: true, 
            configurable: true 
        } 
    });
    // 設(shè)置subclass的內(nèi)置[[prototype]]與superClass相關(guān)聯(lián)
    if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
}

可以看出extend背后是通過js的原型鏈實(shí)現(xiàn)的。
其中在class b extends a中要將a傳入b中。

super

其中對(duì)應(yīng)的轉(zhuǎn)碼：

function b(m, n) {
    _classCallCheck(this, b);

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

    _this.m = m;
    _this.n = n;
    return _this;
  }

其中_possibleConstructorReturn實(shí)現(xiàn)了super的原理。

function _possibleConstructorReturn(self, call) {
  if (!self) {
      throw new ReferenceError("this hasn"t been initialised - super() hasn"t been called"); 
  } 
  //顯示綁定b的內(nèi)置[[prototype]]到this，即在b中執(zhí)行b原型鏈上關(guān)聯(lián)的屬性。
  return call && (typeof call === "object" || typeof call === "function") ? call : self; 
}

云服務(wù)器 GPU云服務(wù)器類的實(shí)現(xiàn) 隊(duì)列實(shí)現(xiàn)原理 cdn實(shí)現(xiàn)原理 webrtc實(shí)現(xiàn)原理

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/81578.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Heier

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

RackNerd LLC：雙11活動(dòng)，4款美國(guó)便宜VPS低至$12/年，機(jī)房可選洛杉磯、圣何塞、西雅

閱讀 1127·2021-11-15 18:00
云主機(jī)如何連接-云主機(jī)怎么用手機(jī)連接？

閱讀 2840·2021-09-22 15:18
初始Selenium

閱讀 1998·2021-09-04 16:45
響應(yīng)式網(wǎng)頁布局 - W3Schools How-Tos 01

閱讀 781·2019-08-30 15:55
用CSS3 transition屬性實(shí)現(xiàn)淡入淡出輪播圖

閱讀 3902·2019-08-30 13:10
圖片批量上傳js+html+css

閱讀 1374·2019-08-30 11:06
HTML & CSS 之小白再續(xù)前緣

閱讀 2011·2019-08-29 12:51
JavaScript發(fā)展史，JavaScript組成和開發(fā)工具介紹-樂字節(jié)

閱讀 2326·2019-08-26 13:55

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

ES6—類的實(shí)現(xiàn)原理

相關(guān)文章

ES6類以及繼承的實(shí)現(xiàn)原理

javascript之模擬類繼承

es6類和繼承的實(shí)現(xiàn)原理

JavaScript 工作原理之十五－類和繼承及 Babel 和 TypeScript 代碼轉(zhuǎn)換探秘

JavaScript 工作原理之十五－類和繼承及 Babel 和 TypeScript 代碼轉(zhuǎn)換探秘

發(fā)表評(píng)論

0條評(píng)論

Heier

男|高級(jí)講師

TA的文章

RackNerd LLC：雙11活動(dòng)，4款美國(guó)便宜VPS低至$12/年，機(jī)房可選洛杉磯、圣何塞、西雅

云主機(jī)如何連接-云主機(jī)怎么用手機(jī)連接？

初始Selenium

響應(yīng)式網(wǎng)頁布局 - W3Schools How-Tos 01

用CSS3 transition屬性實(shí)現(xiàn)淡入淡出輪播圖

圖片批量上傳js+html+css

HTML & CSS 之小白再續(xù)前緣

JavaScript發(fā)展史，JavaScript組成和開發(fā)工具介紹-樂字節(jié)

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

ES6—類的實(shí)現(xiàn)原理

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！