ES6學習 class到底是個啥

在重新看紅寶書的時候。複習到物件導向的程式設計這一章節，重溫了一下物件，原型，屬性這三個核心概念和用法。順便想到，在es6中，可以通過class這乙個關鍵字，用一種清爽的方式來定義乙個類（實際上是乙個物件，但是在語義上當做乙個class）。所以實際上，class實現了構造乙個物件的語法糖。

在es5的時候，定義乙個物件的方法是：

function circle(radius) 
circle.draw = function draw(circle, canvas) 
object.defineproperty(circle, "circlesmade", ,
set: function(val) 
});circle.prototype = 
};object.defineproperty(circle.prototype, "radius", ,
set: function(radius) 
});

值得關注的點有：

1. 物件的私有屬性和方法，在constructor內部通過this繫結。

2. 物件的公有方法和屬性，通過prototype來繫結。

3. 物件的屬性的getter和setter，如果需要定製，需要通過defineobject()的方式來定義。

明顯這種寫法對於標準的物件導向方式來講，是很不友好的。因此es6中class的定義，本質上是一種語法糖，將物件的定義，用一種「類」的方式寫出來。但是本質上，還是實現了es5的語法。

針對上面的類，如果按照es6使用class來寫，則有以下的寫法：

class circle ;
static draw(circle, canvas) ;
static get circlesmade() ;
static set circlesmade(val) ;
area() ;
get radius() ;
set radius(radius) ;
}

從以上的定義中，可以看到，對於乙個class的定義：

1. 私有屬性還是通過constructor進行傳遞

· 2. 公共的方法和屬性，在constructor的外部定義，同時省略關鍵字function，該方法對應prototype上的方法，所有的例項共享乙個prototype 物件

*3. static方法表明，該方法是定義在類上的。直接通過類來呼叫，而不能通過例項物件來呼叫。這個方法在原來的es5中並不存在，屬於新的特性。

4.getter和setter的定義可以當做乙個特殊的方法，在屬性前面宣告get /set，然後定義自定義的getter和setter。

使用babel，將以上es5的**經過編譯，結果如下：

"use strict";
var _createclass = function ()  } return function (constructor, protoprops, staticprops) ; }();
function _classcallcheck(instance, constructor)  }
var circle = function () 
_createclass(circle, [
}, ,
set: function set(val) 
}], [
}, ,
set: function set(val) 
}], [,
set: function set(val) 
}]

get: function get() , set: function set(val) }]); return circle;}();

讓我們看看babel做了那些事情。根據上文的分析，可以發現定義的屬性有三類，1是私有的屬性，2是公有的屬性和方法，3是靜態的屬性和方法。babel首先遍歷class，將這三類三種屬性分別篩選出來，生成配置項。

私有的屬性直接在function的構造器內部定義。公有的方法，將value設定為function的定義，有自定義getter和setter的屬性，將get和set放在屬性的配置項裡面。這兩類將成為成為公有的屬性和方法，放在prototype裡面。最後一類是靜態屬性和方法，定義在staticprops裡面。將所有的定義和方法區分並且相應的config，最後形成的格式為：

[
}, ,
set: function set(val) 
}], [,
set: function set(val) 
}]

babel定義了乙個包裝器，接受這些配置項，然後將這些屬性根據config，定義在相應的位置上。這個包裝器的定義如下：

var _createclass = function ()  // 將屬性定義在target上
} return function (constructor, protoprops, staticprops) 
; }();

可以看到這個包裝器做的事情就兩件：

1，如何根據props，配置配置項，並且把根據defineobject，粘到object上。

2，根據配置項的類別，選擇是配置在prototype上，還是類本身身上，從而達到static的目的。

經過這樣的變換之後，可以得到：

ES6學習 class到底是個啥

Webhook到底是個啥？

elemtype到底是個啥？

generator yield到底是個啥

ES6學習 class到底是個啥

Webhook到底是個啥？

elemtype到底是個啥？

generator yield到底是個啥

相關推薦