詳解ES6中class的實現(xiàn)原理
一、在ES6以前實現(xiàn)類和繼承
實現(xiàn)類的代碼如下：
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.speakSomething = function () {
console.log("I can speek chinese");
};
實現(xiàn)繼承的代碼如下：一般使用原型鏈繼承和call繼承混合的形式
function Person(name) {
this.name = name;
}
Person.prototype.showName = function () {
return `名字是：${this.name}`;
};
function Student(name, skill) {
Person.call(this, name);//繼承屬性
this.skill = skill;
}
Student.prototype = new Person();//繼承方法
二、ES6使用class定義類
class Parent {
constructor(name,age){
this.name = name;
this.age = age;
}
speakSomething(){
console.log("I can speek chinese");
}
}
經(jīng)過babel轉(zhuǎn)碼之后
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
var Parent = function () {
function Parent(name, age) {
_classCallCheck(this, Parent);
this.name = name;
this.age = age;
}
_createClass(Parent, [{
key: "speakSomething",
value: function speakSomething() {
console.log("I can speek chinese");
}
}]);
return Parent;
}();
可以看到ES6類的底層還是通過構(gòu)造函數(shù)去創(chuàng)建的。
通過ES6創(chuàng)建的類，是不允許你直接調(diào)用的。在ES5中，構(gòu)造函數(shù)是可以直接運行的，比如Parent()。但是在ES6就不行。我們可以看到轉(zhuǎn)碼的構(gòu)造函數(shù)中有_classCallCheck(this, Parent)語句,這句話是防止你通過構(gòu)造函數(shù)直接運行的。你直接在ES6運行Parent(),這是不允許的,ES6中拋出Class constructor Parent cannot be invoked without 'new'錯誤。轉(zhuǎn)碼后的會拋出Cannot call a class as a function.能夠規(guī)范化類的使用方式。
轉(zhuǎn)碼中_createClass方法，它調(diào)用Object.defineProperty方法去給新創(chuàng)建的Parent添加各種屬性。defineProperties(Constructor.prototype, protoProps)是給原型添加屬性。如果你有靜態(tài)屬性，會直接添加到構(gòu)造函數(shù)defineProperties(Constructor, staticProps)上。
三、ES6實現(xiàn)繼承
我們給Parent添加靜態(tài)屬性，原型屬性，內(nèi)部屬性。
class Parent {
static height = 12
constructor(name,age){
this.name = name;
this.age = age;
}
speakSomething(){
console.log("I can speek chinese");
}
}
Parent.prototype.color = 'yellow'
//定義子類，繼承父類
class Child extends Parent {
static width = 18
constructor(name,age){
super(name,age);
}
coding(){
console.log("I can code JS");
}
}
經(jīng)過babel轉(zhuǎn)碼之后
"use strict";
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;
};
}();
function _possibleConstructorReturn(self, call) {
if (!self) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return call && (typeof call === "object" || typeof call === "function") ? call : self;
}
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, {
constructor: {
value: subClass,
enumerable: false,
writable: true,
configurable: true
}
});
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
}
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
var Parent = function () {
function Parent(name, age) {
_classCallCheck(this, Parent);
this.name = name;
this.age = age;
}
_createClass(Parent, [{
key: "speakSomething",
value: function speakSomething() {
console.log("I can speek chinese");
}
}]);
return Parent;
}();
Parent.height = 12;
Parent.prototype.color = 'yellow';
//定義子類，繼承父類
var Child = function (_Parent) {
_inherits(Child, _Parent);
function Child(name, age) {
_classCallCheck(this, Child);
return _possibleConstructorReturn(this, (Child.__proto__ || Object.getPrototypeOf(Child)).call(this, name, age));
}
_createClass(Child, [{
key: "coding",
value: function coding() {
console.log("I can code JS");
}
}]);
return Child;
}(Parent);
Child.width = 18;
構(gòu)造類的方法都沒變，只是添加了_inherits核心方法來實現(xiàn)繼承。具體步驟如下：
首先是判斷父類的類型，然后：
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
enumerable: false,
writable: true,
configurable: true
}
});
這段代碼翻譯下來就是
function F(){}
F.prototype = superClass.prototype
subClass.prototype = new F()
subClass.prototype.constructor = subClass
接下來就是subClass.__proto__ = superClass
_inherits核心思想就是下面兩句：
subClass.prototype.__proto__ = superClass.prototype subClass.__proto__ = superClass
如下圖所示：
首先 subClass.prototype.__proto__ = superClass.prototype保證了子類的實例instanceof父類是true，子類的實例可以訪問到父類的屬性，包括內(nèi)部屬性，以及原型屬性。
其次，subClass.__proto__ = superClass，保證了靜態(tài)屬性也能訪問到，也就是這個例子中的Child.height。
以上就是詳解ES6中class的實現(xiàn)原理的詳細(xì)內(nèi)容，更多關(guān)于ES6中class的實現(xiàn)原理的資料請關(guān)注腳本之家其它相關(guān)文章！
- 原生JavaScript之es6中Class的用法分析
- ES6 class類鏈?zhǔn)嚼^承，實例化及react super(props)原理詳解
- ES6 Class中實現(xiàn)私有屬性的一些方法總結(jié)
- ES6 class的應(yīng)用實例分析
- ES6中的class是如何實現(xiàn)的(附Babel編譯的ES5代碼詳解)
- es6新特性之 class 基本用法解析
- 用ES6的class模仿Vue寫一個雙向綁定的示例代碼
- 解讀ES6中class關(guān)鍵字
- ES6 javascript中Class類繼承用法實例詳解
- ES6 javascript中class靜態(tài)方法、屬性與實例屬性用法示例
相關(guān)文章
Math對象中的方法很常用,來跟我一起看看吧,下面這篇文章主要給大家介紹了關(guān)于JavaScript中Math對象相關(guān)知識全解的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
這篇文章主要介紹了微信小程序批量上傳圖片到七牛,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-12-12
最近經(jīng)常要用tab標(biāo)簽頁，于是就寫了一個簡單的tab標(biāo)簽頁，純css+js寫的，帶樣式。大家可以參考下2014-01-01
這篇文章介紹了用innerhtml提高頁面打開速度的方法，有需要的朋友可以參考一下2013-08-08
如何使用TypeScript實現(xiàn)一個瀏覽器事件的集中管理
這篇文章主要介紹了使用TypeScript實現(xiàn)一個瀏覽器事件的集中管理,瀏覽器事件模型的主要優(yōu)點是它可以使開發(fā)人員更加靈活地處理用戶交互，并且可以通過事件委托等技術(shù)來提高性能，本文給大家講解的非常詳細(xì)，需要的朋友可以參考下2023-06-06
在DWR中實現(xiàn)直接獲取一個JAVA類的返回值的兩種方法
本文主要介紹了在DWR中實現(xiàn)直接獲取一個JAVA類的返回值的兩種方法，具有一定的參考價值，下面跟著小編一起來看下吧2016-12-12
這篇文章主要介紹了JS數(shù)組的高級使用方法,結(jié)合實例形式總結(jié)分析了JavaScript數(shù)組的增刪改查、排序、隨機數(shù)等相關(guān)操作技巧,需要的朋友可以參考下2020-03-03
Javascript實現(xiàn)的Map集合工具類完整實例
這篇文章主要介紹了Javascript實現(xiàn)的Map集合工具類,以完整實例形式分析了javascript實現(xiàn)map集合的構(gòu)造、查找、刪除、判斷等相關(guān)技巧,需要的朋友可以參考下2015-07-07
javascript中的offsetWidth、clientWidth、innerWidth及相關(guān)屬性方法
這篇文章主要介紹了javascript中的offsetWidth、clientWidth、innerWidth及相關(guān)屬性方法,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
這篇文章主要介紹了angular-tree-component的使用詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07