序
今天強(qiáng)行被某大廠社招面試了一波派歌，洋洋灑灑（kengchibiedu）半個(gè)小時(shí)弯囊，以面試官的一句“面試反饋還挺好的痰哨，希望以后保持聯(lián)系”告終。時(shí)間節(jié)點(diǎn)發(fā)生在安安穩(wěn)穩(wěn)回學(xué)校做畢設(shè)的時(shí)候常挚，這場(chǎng)突如其來(lái)的面試就顯得格外刺激作谭，基礎(chǔ)的數(shù)據(jù)結(jié)構(gòu)和算法題都回答一二，但是也暴露了對(duì)框架和ES6底層代碼實(shí)現(xiàn)的不求甚解奄毡。不經(jīng)過(guò)刻意準(zhǔn)備的面試，也是原始狀態(tài)的真實(shí)體現(xiàn)贝或。
這篇文章主要講解面試中的一個(gè)問(wèn)題 - ES6中的class語(yǔ)法的實(shí)現(xiàn)吼过？
之前只是了解ECMAScript 6實(shí)現(xiàn)了class，class是一個(gè)語(yǔ)法糖咪奖，使得js的編碼更清晰盗忱、更人性化、風(fēng)格更接近面向?qū)ο蟮母杏X(jué)羊赵，也使 IDE 趟佃、編譯期類(lèi)型檢查器、代碼風(fēng)格檢查器等工具更方便地檢測(cè)代碼語(yǔ)法昧捷，做靜態(tài)分析闲昭。同樣的，這給沒(méi)有類(lèi)就缺點(diǎn)什么的軟件開(kāi)發(fā)工程師一個(gè)更低的門(mén)檻去接觸js靡挥。
ES6 class 的 ES5 代碼實(shí)現(xiàn)
JavaScript語(yǔ)言的傳統(tǒng)方法是通過(guò)構(gòu)造函數(shù)定義并生成新對(duì)象序矩，這種寫(xiě)法和傳統(tǒng)的面向?qū)ο笳Z(yǔ)言差異較大。所以跋破，ES6引入了Class這個(gè)概念作為對(duì)象的模板簸淀。
constructor
效果：ES6創(chuàng)建一個(gè)class會(huì)默認(rèn)添加constructor方法，并在new調(diào)用時(shí)自動(dòng)調(diào)用該方法毒返。
ES5：
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.toString = function () {
return '(' + this.name + ',' + this.age + ')';
}
var p = new Person('Mia', 18);
console.log(p);// Person { name: 'Mia', age: 18 }
ES6：
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
toString() {
return '(' + this.name + ',' + this.age + ')';
}
}
var p = new Person('Mia', 18);
console.log(p);// Person { name: 'Mia', age: 18 }
ES6的class中constructor是構(gòu)造方法租幕，對(duì)應(yīng)的是ES5中的構(gòu)造函數(shù)Person，this關(guān)鍵字則代表實(shí)例對(duì)象拧簸。
里面的class類(lèi)可以看做是構(gòu)造函數(shù)的另一種寫(xiě)法劲绪，由typeof Person === 'function'為true；Person === Person.prototype.constructor為true可以得出狡恬，類(lèi)的數(shù)據(jù)類(lèi)型就是函數(shù)珠叔，類(lèi)本身指向構(gòu)造函數(shù)。也可以說(shuō)class的底層依然是function構(gòu)造函數(shù)弟劲。
類(lèi)的公共方法都定義在類(lèi)的prototype屬性上祷安。可以使用
Object.assign一次向類(lèi)添加多個(gè)方法兔乞。
特別的：class的內(nèi)部定義的方法都是不可枚舉的（non-enumerable）汇鞭，這一點(diǎn)與ES5的行為不一致凉唐。
ES5：
Object.keys(Person.prototype); // ['toString']
ES6：
Object.keys(Person.prototype); // Person {}
不可枚舉的代碼實(shí)現(xiàn)會(huì)在后面將ES6代碼用Babel轉(zhuǎn)碼之后解析。
new調(diào)用
效果：class類(lèi)必須使用new調(diào)用霍骄，否則會(huì)報(bào)錯(cuò)台囱。
ES5：
Person()// undefined
ES6：
Person() // TypeError: Class constructor Person cannot be invoked without 'new'
實(shí)例的屬性
效果：實(shí)例的屬性是顯式定義在this對(duì)象上，否則都是定義在原型上读整。類(lèi)的所有實(shí)例共享一個(gè)原型對(duì)象簿训，與ES5行為一致。
ES5：
function Person() {
this.grade = {
count: 0
};
}
ES6：
class Person {
constructor() {
this.grade = {
count: 0
};
}
}
此外還可以關(guān)注下新提案：Babel已經(jīng)支持實(shí)例屬性和靜態(tài)屬性新的寫(xiě)法米间。
靜態(tài)方法
類(lèi)相當(dāng)于實(shí)例的原型强品，所有在類(lèi)中定義的方法，都會(huì)被實(shí)例繼承屈糊。如果在一個(gè)方法前的榛，加上static關(guān)鍵字，就表示該方法不會(huì)被實(shí)例繼承逻锐，而是直接通過(guò)類(lèi)來(lái)調(diào)用夫晌，這就稱(chēng)為“靜態(tài)方法”。
注意：如果靜態(tài)方法包含
this關(guān)鍵字昧诱，指的是類(lèi)晓淀。
ES5：
function Person() { }
Person.toSay = function () {
return 'I love JavaScript.';
};
Person.toSay(); // I love JavaScript.
ES6：
class Person {
static toSay() {
return 'I love JavaScript.';
}
}
Person.toSay(); // I love JavaScript.
getter 和 setter
ES6提供 get 和 set 關(guān)鍵字，對(duì)某個(gè)屬性設(shè)置存值函數(shù)和取值函數(shù)鳄哭，攔截該屬性的存取行為要糊，和ES5行為一致。
ES5：
function Person(name) {}
Person.prototype = {
get name() {
return 'mia';
},
set name(newName) {
console.log('new name：' + newName);
}
}
ES6：
class Person {
get name() {
return 'mia';
}
set name(newName) {
console.log('new name：' + newName);
}
}
其他class特性：
- 不存在變量提升
- 不能覆蓋聲明
ES6 class實(shí)現(xiàn)原理（Babel是如何編譯class的）
下文主要用babel轉(zhuǎn)碼器分別對(duì)class中幾個(gè)主要的方法進(jìn)行轉(zhuǎn)碼妆丘，分析ES5的實(shí)現(xiàn)方式锄俄。
class
下面將實(shí)例二的代碼使用babel轉(zhuǎn)碼器轉(zhuǎn)換成ES5代碼，按照代碼結(jié)構(gòu)和功能分塊進(jìn)行講解勺拣。
- 運(yùn)行模式
"use strict";//class默認(rèn)開(kāi)啟嚴(yán)格模式
- 私有函數(shù)：JS開(kāi)發(fā)者在變量名或函數(shù)名前綴加下劃線奶赠，一般表示私有。
前綴加下劃線表示私有僅僅是一個(gè)約定俗成的習(xí)慣药有，澄清意圖毅戈，并沒(méi)有做其他處理。由于ECMAScript草案中并沒(méi)有定義私有變量的方法愤惰，所以在此限定之下仍可以在函數(shù)外或作用域外訪問(wèn)該函數(shù)或變量苇经。
_instanceof和_classCallCheck的作用
檢查聲明的class類(lèi)是否通過(guò)new的方式調(diào)用，否則會(huì)報(bào)錯(cuò)宦言。
function _instanceof(left, right) {
if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
return right[Symbol.hasInstance](left);
} else {
return left instanceof right;
}
}
function _classCallCheck(instance, Constructor) {
if (!_instanceof(instance, Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
_createClass和_defineProperties的作用
_createClass函數(shù)有三個(gè)參數(shù)扇单，Constructor是傳入構(gòu)造函數(shù)Person，protoProps 是要添加到原型上的函數(shù)數(shù)組奠旺，staticProps 是要添加到構(gòu)造函數(shù)本身的函數(shù)蜘澜，即靜態(tài)方法施流。這里的第二個(gè)和第三個(gè)參數(shù)是可以缺省的，會(huì)在_createClass 函數(shù)體內(nèi)判斷鄙信。
_createClass 函數(shù)的作用是收集公有函數(shù)和靜態(tài)方法瞪醋，將方法添加到構(gòu)造函數(shù)或構(gòu)造函數(shù)的原型中，并返回構(gòu)造函數(shù)装诡。
defineProperties 是將方法添加到構(gòu)造函數(shù)或構(gòu)造函數(shù)的原型中的主要邏輯银受，遍歷函數(shù)數(shù)組，分別聲明其描述符鸦采。若enumerable 沒(méi)有被定義為true蚓土，則默認(rèn)為fals，設(shè)置 configurable 為true赖淤。以上兩個(gè)布爾值是為了限制 Object.keys() 之類(lèi)的方法被遍歷到。通過(guò)判斷 value 是否存在谅河，來(lái)判斷是否是 getter 和 setter咱旱。如果存在 value，就為 descriptor 添加 value 和 writable 屬性绷耍，如果不存在吐限，就直接使用 get 和 set 屬性。
最后褂始，使用 Object.defineProperty 方法為構(gòu)造函數(shù)添加屬性诸典。
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);
}
}
function _createClass(Constructor, protoProps, staticProps) {
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
if (staticProps) _defineProperties(Constructor, staticProps);
return Constructor;
}
- class類(lèi)實(shí)現(xiàn)
var Person =
/*#__PURE__*/
function () {
function Person(name, age) {
_classCallCheck(this, Person);
this.name = name;
this.age = age;
}
_createClass(Person, [{
key: "toString",
value: function toString() {
return '(' + this.name + ',' + this.age + ')';
}
}]);
return Person;
}();
var p = new Person('Mia', 18);
解析：
- 不使用new調(diào)用時(shí)，this指向window崎苗，所以
instance instanceof Constructor為false狐粱，拋出異常。 - 通過(guò)調(diào)用_createClass函數(shù)胆数，遍歷函數(shù)數(shù)組肌蜻。key為方法名，若有value說(shuō)明是有具體的 function 聲明必尼，若無(wú) value 說(shuō)明使用了get 或 set 方法蒋搜。
- Person類(lèi)是通過(guò)聲明一個(gè)IIFE實(shí)現(xiàn)的，IIFE是立即執(zhí)行函數(shù)判莉，創(chuàng)建即執(zhí)行豆挽。可以保證變量的作用域限制在函數(shù)內(nèi)券盅，避免命名沖突帮哈。
結(jié)尾
讀到這相信大家對(duì)class的實(shí)現(xiàn)有了更深的理解。最近筆者一邊在忙畢業(yè)設(shè)計(jì)渗饮，一邊整理了這道阿里前端面試題的解析但汞，評(píng)論區(qū)歡迎對(duì)class實(shí)現(xiàn)這一問(wèn)題進(jìn)行討論宿刮。另外，class中的extend也是很有趣的實(shí)現(xiàn)私蕾，在下一篇文章會(huì)對(duì)class實(shí)現(xiàn)繼承進(jìn)行解析僵缺。
