閒來無事，看了下babel對於Javascript ES6中的類與繼承的實現，整理一下。???
大家都知道ES6的Class是語法糖，Javascript本身是沒有類的概念的，要實現繼承的概念可以使用原型鏈的方式。既然是語法糖，那就看看babel編譯成ES5的程式碼就可以了。
舉個?：
class Human {
constructor(name) {
this.name = name;
}
say() {
console.info(`I am ${this.name}`);
}
static cry() {
console.info('crying ~');
}
}
class Dancer extends Human {
constructor(name) {
super(name);
}
dance() {
console.info(`${this.name} is dancing ~`);
}
}
class SuperMan extends Human {
constructor(name, level) {
super(name);
this.level = level;
}
say() {
console.info(`I am ${this.name}, whose level is ${this.level}`);
}
fly() {
console.info(`${this.name} is flying ~ so cool.`);
}
}
複製程式碼基於這個栗子的類定義以及繼承：
const man = new Human('葫蘆娃');
const dancer = new Dancer('小明');
const superman = new SuperMan('小魔仙', 10);
console.info('man #######################');
man.say();
Human.cry();
console.info('dancer #######################');
dancer.say();
dancer.dance();
Dancer.cry();
console.info('superman #######################');
superman.say();
superman.fly();
SuperMan.cry();
複製程式碼上述執行結果如下：
proto , [[prototype]] and prototype
在開始前，需要分清三個概念**proto, [[prototype]] and prototype**。其中[[prototype]]是規範中定義的物件的原型屬性指向一個原型物件，但是這個屬性不能被直接access到，因此一個不在規範中的__proto__屬性被實現用來方便得到一個物件的原型物件，因為不在規範中所以不能保證一定有這個屬性，babel的編譯的結果中也做了相應的相容處理。每個物件都有[[prototype]]，但是函式還有一個prototype屬性，這個屬性的用於在建構函式被new方法呼叫的時候生成構造的物件的原型物件。Javascript的原型鏈是[[prototype]]屬性（或者說__proto__）的指向不是prototype，prototype用於構造__proto__指向的物件。
簡單來說：
The prototype is a property on a constructor function that sets what will become the proto property on the constructed object.
類的定義（Class）
class Human {
constructor(name) {
this.name = name;
}
say() {
console.info(`I am ${this.name}`);
}
static cry() {
console.info('crying ~');
}
}
複製程式碼Babel compiled result（保留了主要的方法）:
'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;
};
}();
var Human = function () {
function Human(name) {
this.name = name;
}
_createClass(Human, [
{
key: 'say',
value: function say() {
console.info('I am ' + this.name);
}
}
], [
{
key: 'cry',
value: function cry() {
console.info('crying ~');
}
}
]);
return Human;
}();
複製程式碼這裡可以看到Class本質上是一個建構函式，?中就是Human函式，其中在Class的constructor中通過this.name定義的屬性name是之後在構造的物件【這裡我們成為instance，方便之後說明】上的屬性，被編譯成熟悉的：
function Human(name) {
this.name = name;
}
複製程式碼在?中，say屬性是定義在instance的[[prototype]]物件上的屬性，靜態屬性cry是定義在類本身，也就是Human函式上，這兩種屬性的定義，使用的**__createClass**方法：
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;
};
}();
複製程式碼_createClass 方法是一個立即執行函式，返回一個接收引數(Constructor, protoProps, staticProps)的方法。 其中第一個引數Constructor是建構函式(Human)，第二個引數protoProps是需要被定義到instance的[[prototype]]上的屬性的陣列，staticProps是需要定義在Constructor【建構函式，這裡用Constructor方便說明】上的屬性的陣列。其中使用definedProperties方法：
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);
}
}
複製程式碼遍歷陣列，使用Object.defineProperty方法定義屬性到target上。
Class的語法糖的實現就是這麼簡單，接下來看下extends的語法糖。
類的繼承（extends）
class Human {
constructor(name) {
this.name = name;
}
say() {
console.info(`I am ${this.name}`);
}
static cry() {
console.info('crying ~');
}
}
class Dancer extends Human {
constructor(name) {
super(name);
}
dance() {
console.info(`${this.name} is dancing ~`);
}
}
複製程式碼Babel compiled result:
var Human = function () {
function Human(name) {
this.name = name;
}
_createClass(Human, [{
key: 'say',
value: function say() {
console.info('I am ' + this.name);
}
}], [{
key: 'cry',
value: function cry() {
console.info('crying ~');
}
}]);
return Human;
}();
var Dancer = function (_Human) {
_inherits(Dancer, _Human);
function Dancer(name) {
return _possibleConstructorReturn(
this,
(Dancer.__proto__ ||
Object.getPrototypeOf(Dancer)).call(this, name)
);
}
_createClass(Dancer, [{
key: 'dance',
value: function dance() {
console.info(this.name + ' is dancing ~');
}
}]);
return Dancer;
}(Human);
複製程式碼這裡需要注意的是**_inherits和_possibleConstructorReturn**兩個新出現的方法：
_inherits
可以看到_inherits方法的作用其實就是做了Dancer.prototype.proto = Human.prototype 和 Dancer.proto = Human兩件事：
Dancer.prototype.__proto__ === Human.prototype // true
複製程式碼的作用是使Human的定義在構造的物件的原型物件上的屬性，被繼承到Dancer構造的物件的原型物件上。
Dancer.__proto__ === Human // true
複製程式碼的作用是使Human的靜態方法（static method）繼承到Dancer上。
_possibleConstructorReturn
_possibleConstructorReturn的作用這是將Dancer的this繫結到Human上並且執行：也就是這句： Object.getPrototypeOf(Dancer)).call(this, name)，在這之前_inherits已經將Dancer.proto = Human，所以句的意思等於：Human.call(this, name)，也就是Dancer的this會定義Human定義在構造的物件上的屬性，也就是很多文章中說的：子類的constructor中的this是先被父類的constructor處理後返回的this作為子類的constructor的this再被定義子類的對應的屬性
在看一個?：
class SuperMan extends Human {
constructor(name, level) {
super(name);
this.level = level;
}
say() {
console.info(`I am ${this.name},
whose level is ${this.level}`);
}
fly() {
console.info(`${this.name} is flying ~ so cool.`);
}
}
var SuperMan = function (_Human2) {
_inherits(SuperMan, _Human2);
function SuperMan(name, level) {
var _this2 = _possibleConstructorReturn(this, (SuperMan.__proto__ ||
Object.getPrototypeOf(SuperMan)).call(this, name));
_this2.level = level;
return _this2;
}
_createClass(SuperMan, [{
key: 'say',
value: function say() {
console.info('I am ' + this.name + ', whose level is ' + this.level);
}
}, {
key: 'fly',
value: function fly() {
console.info(this.name + ' is flying ~ so cool.');
}
}]);
return SuperMan;
}(Human);
複製程式碼這裡的_this2是被Human建構函式bind呼叫後的this，然後再定義了Dancer的level屬性。
總結
基於上述的分析，Class & extends的語法糖本質上做了三件事：
class A {
}
class B extends A {
}
1 -> B.__proto__ === A // true
2 -> B.prototype.__proto__ === A.prototype // true
3 -> this（子類的constructor的this的處理）
複製程式碼參考資料：