ES6—類的實現原理

Heier 發布于2019-08-20 14:22 / 1410人閱讀

摘要：對應轉碼將提出這個方面即是判斷的是否有指向的對象。同樣再轉碼中，找到了對應的確保為的關聯到給添加這個屬性設置的內置與相關聯可以看出背后是通過的原型鏈實現的。其中對應的轉碼其中實現了的原理。顯示綁定的內置到，即在中執行原型鏈上關聯的屬性。

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官網上輸入，查看轉碼(),代碼長很多，從中找出關鍵點：

class

constructor

extend

super

class

聲明class class a(){}
查看對應轉碼 var a = function(){return a}()
可以看出聲明一個class就是通過創建并執行一個匿名函數，在這個匿名函數中聲明function a,最后返回a。

constructor

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

對應轉碼:

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

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

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

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

將_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);//給target添加屬性
      } 
    }
    // 返回函數
    return function (Constructor, protoProps, staticProps) { 
        if (protoProps) defineProperties(Constructor.prototype, protoProps); 
        if (staticProps) defineProperties(Constructor, staticProps); 
        return Constructor; 
    }; 
}();//立即執行

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

extend

同樣再轉碼中，找到了對應的_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]]關聯到superClass superClass.prototype
    // 給subClass添加constructor這個屬性
    subClass.prototype = Object.create(superClass && superClass.prototype, { 
        constructor: { 
            value: subClass, 
            enumerable: false, 
            writable: true, 
            configurable: true 
        } 
    });
    // 設置subclass的內置[[prototype]]與superClass相關聯
    if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
}

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

super

其中對應的轉碼：

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實現了super的原理。

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

云服務器 GPU云服務器類的實現隊列實現原理 cdn實現原理 webrtc實現原理

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

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

ES6類以及繼承的實現原理

摘要：中通過關鍵字，定義類經過轉碼之后可以看到類的底層還是通過構造函數去創建的。在中，構造函數是可以直接運行的，比如。如果你有靜態屬性，會直接添加到構造函數上。不是很好理解，可以通過下面的方式理解是一個實例，是構造方法的原型。 ES6中通過class關鍵字，定義類 class Parent { constructor(name,age){ this.name = na...

Warren 2019-08-22 17:05 評論0 收藏0
javascript之模擬類繼承

摘要：歡迎關注我的博客正文讓我來構造函數其實，模擬一個類的方式非常的簡單構造函數。我們先來看一個例子這里通過構造函數模擬出來的類，其實和其他語言的類行為上是基本一致的，唯一的區別就是它不具備私有方法。前言 ES6時代的來臨，使得類繼承變得如此的圓滑。但是，你有思考過ES6的類繼承模式嗎？如何去實現它呢？類繼承對于JavaScript來說，實現方式與Java等類語言大不相同。熟悉JavaS...

Jochen 2019-08-22 11:07 評論0 收藏0
es6類和繼承的實現原理

摘要：類的實現轉換前轉換后可見的底層依然是構造函數調用方法判斷當前函數調用前是否有關鍵字。若構造函數前面沒有則構造函數的不會不出現在的原型鏈上，返回。典型的寄生繼承用父類構造函數的創建一個空對象，并將這個對象指向子類構造函數的。代表父類構造函數。在閱讀文章之前，您至少需要對JavaScript原型繼承有一定了解，如果覺得有所欠缺，可以先了解下我這篇文章：https://segmentfau...

haitiancoder 2019-08-23 14:35 評論0 收藏0
JavaScript 工作原理之十五－類和繼承及 Babel 和 TypeScript 代碼轉換探秘

摘要：使用新的易用的類定義，歸根結底也是要創建構造函數和修改原型。首先，它把構造函數當成單獨的函數且包含類屬性集。該節點還儲存了指向父類的指針引用，該父類也并儲存了構造函數，屬性集和及父類引用，依次類推。原文請查閱這里，略有刪減，本文采用知識共享署名 4.0 國際許可協議共享，BY Troland。本系列持續更新中，Github 地址請查閱這里。這是 JavaScript 工作原理的第...

GeekGhc 2019-08-29 16:05 評論0 收藏0
JavaScript 工作原理之十五－類和繼承及 Babel 和 TypeScript 代碼轉換探秘

摘要：使用新的易用的類定義，歸根結底也是要創建構造函數和修改原型。首先，它把構造函數當成單獨的函數且包含類屬性集。該節點還儲存了指向父類的指針引用，該父類也并儲存了構造函數，屬性集和及父類引用，依次類推。原文請查閱這里，略有刪減，本文采用知識共享署名 4.0 國際許可協議共享，BY Troland。本系列持續更新中，Github 地址請查閱這里。這是 JavaScript 工作原理的第...

BigNerdCoding 2019-08-02 11:00 評論0 收藏0