日常好奇 看看ES6的類如何實現的 一

2021-09-11 15:36:11 字數 2333 閱讀 3988

為了真正理解es6中類的概念，來學習類是如何實現的

我們都知道在js中，函式是「一等公民」，「類」的概念是在es6中提出的，它好像跟我們自己寫的函式構造器一樣，但又有好像有些不一樣的地方，那麼它到底是如何實現的那？為了達到這個目的，我們利用babel來看下它編譯後的**。

首先我們寫乙個簡單的類，該類沒有任何繼承，只有乙個簡單的建構函式和getname函式

class


getname() 


}複製**
然後babel一下，我們得到以下結果:

"use strict";


var _createclass = function () 


} return


function (constructor, protoprops, staticprops) ;


}();


function


_classcallcheck(instance, constructor) 


} function


this.name = name;


} key: "getname",


value: function


getname() 


}]);


}();


複製**
東西還挺多，一眼並看不出來什麼東西來，我們接下來一點點分析。我們先看最後乙個函式：

// 立即執行函式


// 建構函式變形成這樣


function


// 從這個函式的名字上看，好像是類呼叫檢查，我們暫時先不看這個函式


this.name = name;


} key: "getname",


value: function


getname() 


}]);


}();


複製**
下面來看_createclass函式，該函式用來定義各個屬性值：

// 從返回值看，該函式是乙個高階函式


var _createclass = function () 


} // 函式接收三個引數，分別是：建構函式，原型屬性，靜態屬性


return


function (constructor, protoprops, staticprops) ;


}();


複製**
好像很簡單，跟我們平時使用函式實現差別不是很多，就相差了乙個描述符的設定過程。最後看一下類呼叫檢查函式_classcallcheck：

// 類呼叫檢查，不能像普通函式一樣呼叫，需要使用new關鍵字


function


_classcallcheck(instance, constructor) 


}複製**
增加了錯誤處理，當我們呼叫方式不正確時，丟擲錯誤。

我們簡單實現以下沒有繼承的方式，來加深我們的印象，為了簡化不新增錯誤處理和描述符的設定過程。

this.name = name;

} return

this.name;

}複製**

下面想乙個問題，實現繼承我們一般都是利用原型鏈的方式，像下面這樣：

var dog = ;


var animal = 


}// 物件的原型通過`__proto__`暴露出來（tip: 實際中不要這麼寫）


dog.__proto__ = animal;


console.log(dog.getname()); // 輸出goudan


複製**
我們如何在兩個類之間繼承那？在es6中實現很簡單

class


animal


getname() 


}class


dogextends


animal


}複製**
如果我們自己實現乙個要怎麼實現，我們先寫乙個：

var animal = function(name) 


animal.prototype.getname = function() 


var dog = function(name) 


dog.prototype = animal.prototype;


var dog = new dog('goudan');


console.log(dog.getname()); // 輸出goudan


複製**

日常好奇 看看ES6的類如何實現的 二

還是用這個繼承的例子 class animal getname class dogextends animal 複製 我們babel一下，得到如下 use strict var createclass function return function constructor,protoprops,s...

ES6 類的實現原理

一段符合es6語法的 class a render class b extends a render 我在babel官網上輸入，檢視轉碼 長很多，從中找出關鍵點 宣告classclass a 檢視對應轉碼var a function 可以看出宣告乙個class就是通過建立並執行乙個匿名函式，在這個匿...

es6 類的繼承

function animal name animal.prototype.drink function animal.prototype.eat function item function dog name,breed animal.prototype dog.prototype animal....