ES6 加入了 Class 的语法，Class 的大部分功能 ES5 都可以做到，我们可以把 class 看作是一个语法糖。本篇文章我们一步步来看看 Babel 是怎么把 class 转换成 ES5 语法的。
观察方发
在 Babel 的官网上有一个 Try it out 的网页可以方便的看到编译后的代码。我们要看转换成 ES5 的语法，我们在 ENV PRESET 取消勾选 Enabled.
空类
我们先来看看一个没有属性、方法和构造函数的类会被转换成什么。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| class A {}
new A();
("use strict");
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
var A = function A() {
_classCallCheck(this, A);
};
new A();
|
可以看到 class A{} 被转化成了一个函数 A。除此之外还生成了一个函数 _classCallCheck 检测 A 是否用 new 关键只来调用的。
构造函数
我们来添加一个 constructor 方法到 class A{} 里
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| class A {
constructor() {
this.propA = "A";
}
}
var A = function A() {
_classCallCheck(this, A);
this.propA = "A";
};
|
转换后 constructor 方法内的代码内容被简单的搬到 function A(){} 内部。
属性
类的公有属性声明仍然处于实验性功能第 3 阶段。开启此特性我们要在 PULGINS 里添加 @babel/plugin-proposal-class-properties 插件。
添加一个属性：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| class A {
constructor() {
this.propA = "A";
}
propB = 1;
}
var A = function A() {
_classCallCheck(this, A);
this.propB = 1;
this.propA = "A";
};
|
公有属性 propB 转换成 fuxntion A(){} 函数内的的 this.propB。
私有属性同样还没通过标准，需要添加 @babel/plugin-proposal-class-properties 插件来转换。
静态方法
添加一个方法：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
| class A {
method() {
console.log("method");
}
}
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;
}
var A = (function () {
function A() {
_classCallCheck(this, A);
}
_createClass(A, null, [
{
key: "method",
value: function staticMethod() {
console.log("method");
},
},
]);
return A;
})();
|
Bable 使用闭包函数并创建了一个 _createClass 函数来给 function A(){} 添加方法。
参考
