ES6 類的實現原理

一段符合es6語法的**

class a
render()
}class b extends a
render()
}

我在babel官網上輸入，檢視轉碼(),**長很多，從中找出關鍵點：

宣告classclass a(){}

檢視對應轉碼var a = function()()

可以看出宣告乙個class就是通過建立並執行乙個匿名函式，在這個匿名函式中宣告function a,最後返回a。

constructor(y,z)

對應轉碼:

function a(y, z)

將_classcallcheck(this,a)提出

function _classcallcheck(instance, constructor)  
}

這個方面即是判斷this的[[prototype]]是否有指向a.prototype的物件。即是判斷原本是不是有a這個function。？？感覺解釋的不好。

然後再在a(本質是function，但可以被稱作class)中宣告屬性y，z。

接下來，在class a中有乙個render方法，

_createclass(a, [
}]);

通過_createclass方法，可以給a新增render方法。

將_createclass提出來看。

var _createclass = function ()  
}// 返回函式
return function (constructor, protoprops, staticprops) ; 
}();//立即執行

由上推斷es6給class新增的屬性、方法背後是es5對給物件新增屬性的方法。

同樣再轉碼中，找到了對應的_inherits(b, _a)

function _inherits(subclass, superclass)  
// subclass.prototype的[[prototype]]關聯到superclass superclass.prototype
// 給subclass新增constructor這個屬性
subclass.prototype = object.create(superclass && superclass.prototype, 
});// 設定subclass的內建[[prototype]]與superclass相關聯
if (superclass) object.setprototypeof ? object.setprototypeof(subclass, superclass) : subclass.__proto__ = superclass;
}

可以看出extend背後是通過js的原型鏈實現的。

其中在class b extends a中要將a傳入b中。

其中對應的轉碼：

function b(m, n)

其中_possibleconstructorreturn實現了super的原理。

function _possibleconstructorreturn(self, call)  
//顯示繫結b的內建[[prototype]]到this，即在b中執行b原型鏈上關聯的屬性。
return call && (typeof call === "object" || typeof call === "function") ? call : self; 
}

es6 類的繼承

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

ES6 類的繼承

類的繼承 super 關鍵字子類通過 extends 關鍵字來繼承父類的所有屬性和方法子類必須在constructor中呼叫super方法，否則新建例項會報錯 es5的繼承中，實質是先創造子類的例項物件this，然後再將父類的方法屬性新增到this上面。es6的繼承中，實質是先創造父類的例項物...

ES6類的繼承

es6 引入了關鍵字class來定義乙個類，constructor是構造方法，this代表例項物件。constructor相當於python的init而this則相當於self 類之間通過extends繼承，繼承父類的所有屬性和方法。super關鍵字，它代指父類的this物件，子類必須在constr...

ES6 類的實現原理

es6 類的繼承

ES6 類的繼承

ES6類的繼承

相關推薦