对abel 转译 class 过程的研究----------------------引用
作为当下最流行的 JavaScript 编译器,Babel 替我们转译 ECMAScript 语法,而我们不用再担心如何进行向后兼容。
零、前言
虽然在 JavaScript 中对象无处不在,但这门语言并不使用经典的基于类的继承方式,而是依赖原型,至少在 ES6 之前是这样的。当时,假设我们要定义一个可以设置 id 与坐标的类,我们会这样写:
// Shape 类
function Shape(id, x, y) {
this.id = id;
this.setLocation(x, y);
}
// 设置坐标的原型方法
Shape.prototype.setLocation = function(x, y) {
this.x = x;
this.y = y;
};
上面是类定义,下面是用于设置坐标的原型方法。从 ECMAScript 2015 开始,语法糖 class 被引入,开发者可以通过 class 关键字来定义类。我们可以直接定义类、在类中写静态方法或继承类等。上例便可改写为:
class Shape {
constructor(id, x, y) { // 构造函数语法糖
this.id = id;
this.setLocation(x, y);
}
setLocation(x, y) { // 原型方法
this.x = x;
this.y = y;
}
}
一个更符合“传统语言”的写法。语法糖写法的优势在于当类中充满各类静态方法与继承关系时,class 这种对象模版写法的简洁性会更加突出,且不易出错。但不可否认时至今日,我们还需要为某些用户兼容我们的 ES6+ 代码,class 就是 TodoList 上的一项:
作为当下最流行的 JavaScript 编译器,Babel 替我们转译 ECMAScript 语法,而我们不用再担心如何进行向后兼容。
本地安装 Babel 或者利用 Babel CLI 工具,看看我们的 Shape 类会有哪些变化。可惜的是,你会发现代码体积由现在的219字节激增到2.1KB,即便算上代码压缩(未混淆)代码也有1.1KB。转译后输出的代码长这样:
"use strict";var _createClass=function(){function a(a,b){for(var c,d=0;d<b.length;d++)c=b[d],c.enumerable=c.enumerable||!1,c.configurable=!0,"value"in c&&(c.writable=!0),Object.defineProperty(a,c.key,c)}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}();function _classCallCheck(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}var Shape=function(){function a(b,c,d){_classCallCheck(this,a),this.id=b,this.setLocation(c,d)}return _createClass(a,[{key:"setLocation",value:function c(a,b){this.x=a,this.y=b}}]),a}();
Babel 仅仅是把我们定义的 Shape 还原成一个 ES5 函数与对应的原型方法么?
一、揭秘
好像没那么简单,为了摸清实际转译流程,我们先将上述类定义代码简化为一个只有14字节的空类:
class Shape {}
首先,当访问器走到类声明阶段,需要补充严格模式:
"use strict";
class Shape {}
而进入变量声明与标识符阶段时则需补充 let 关键字并转为 var:
"use strict";
var Shape = class Shape {};
到这个时候代码的变化都不太大。接下来是进入函数表达式阶段,多出来几行函数:
"use strict";
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var Shape = function Shape() {
_classCallCheck(this, Shape);
};
该阶段不仅替换了 class,还在类中调用了叫做 _classCallCheck 的方法。这是什么呢?
这个函数的作用在于确保构造方法永远不会作为函数被调用,它会评估函数的上下文是否为 Shape 对象的实例,以此确定是否需要抛出异常。接下来,则轮到 babel-plugin-minify-simplify 上场,这个插件做的事情在于通过简化语句为表达式、并使表达式尽可能统一来精简代码。运行后的输出是这样的:
"use strict";
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) throw new TypeError("Cannot call a class as a function"); }
var Shape = function Shape() {
_classCallCheck(this, Shape);
};
可以看到 if 语句中由于只有一行代码,于是花括号被去掉。接下来上场的便是内置的 Block Hoist,该插件通过遍历参数排序然后替换,Babel 输出结果为:
"use strict";
function _classCallCheck(a, b) { if (!(a instanceof b)) throw new TypeError("Cannot call a class as a function"); }
var Shape = function a() {
_classCallCheck(this, a);
};
最后一步,minify 一下,代码体积由最初的14字节增为338字节:
"use strict";function _classCallCheck(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}var Shape=function a(){_classCallCheck(this,a)};
二、再说一些
这是一个什么都没干的类声明,但现实中任何类都会有自己的方法,而此时 Babel 必定会引入更多的插件来帮助它完成代码的转译工作。直接在刚刚的空类中定义一个方法吧。
class Shape {
render() {
console.log("Hi");
}
}
我们用 Babel 转译一下,会发现代码中包含如下这段:
var _createClass = function () { function a(a, b) { for (var c, d = 0; d < b.length; d++) c = b[d], c.enumerable = c.enumerable || !1, c.configurable = !0, "value" in c && (c.writable = !0), Object.defineProperty(a, c.key, c); } return function (b, c, d) { return c && a(b.prototype, c), d && a(b, d), b; }; }();
类似前面我们遇到的 _classCallCheck,这里又多出一个 _createClass,这是做什么的呢?我们稍微把代码状态往前挪一挪,来到 babel-plugin-minify-builtins 处理阶段(该插件的作用在于缩减内置对象代码体积,但我们主要关注点在于这个阶段的 _createClass 函数是基本可读的),此时 _classCallCheck 长成这样:
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 用于处理创建对象属性,函数支持传入构造函数与需定义的键值对属性数组。函数判断传入的参数(普通方法/静态方法)是否为空对应到不同的处理流程上。而 defineProperties 方法做的事情便是遍历传入的属性数组,然后分别调用 Object.defineProperty 以更新构造函数。而在 Shape 中,由于我们定义的不是静态方法,我们便这样调用:
_createClass(Shape, [{
key: "render",
value: function render() {
console.log("Hi");
}
}]);
T.J. Crowder 在 How does Babel.js create compile a class declaration into ES2015? 中谈到 Babel 是如何将 class 转化为 ES5 兼容代码时谈到了几点,大意为:
constructor 会成为构造方法数;
所有非构造方法、非静态方法会成为原型方法;
静态方法会被赋值到构造函数的属性上,其他属性保持不变;
派生构造函数上的原型属性是通过 Object.create(Base.prototype) 构造的对象,而不是 new Base();
constructor 调用构造器基类是第一步操作;
ES5 中对应 super 方法的写法是 Base.prototype.baseMethod.call(this);,这种操作不仅繁琐而且容易出错;
这些概述大致总结了类定义在两个 ES 版本中的一些差异,其他很多方面比如 extends ——继承关键字,它的使用则会使 Babel 在转译结果加上 _inherits与 _possibleConstructorReturn 两个函数。篇幅所限,此处不再展开详述。
三、最后
语法糖 class 给我们带来了很多写法上的便利,但可能会使我们在代码体积上的优化努力“付诸东流”。
另一方面,如果你是一名 React 应用开发者,你是否已经在想将代码中的所有 class 写法换为 function 呢?那样做的话,代码体积无疑会减少很多,但你一定也知道 PureComponent 相比 Component 的好处。所以虽然 function 给你的代码体积减负了,但他在哪里又给你无形增加负担了呢?
因此,真的不推荐开发者用 class 这种写法么,你觉得呢?
对abel 转译 class 过程的研究----------------------引用的更多相关文章
- 关于3G移动通信网络中用户ip的配置过程的研究(中国电信cdma2000)
在RP口对ppp过程进行研究 PPP协商过程,如下图所示: 在建立ppp过程中pdsn需要与FAAA.HAAA交互.同时在分组数据业务进行过程中这种交互更加频繁,介绍如下,分为两种情况,简单ip,移动 ...
- asp.net mvc4 Controller与Action执行过程的研究(学习笔记)
当IIS收到一个http请求,把请求信息发给对应的HttpModel(实际是实现类UrlRoutingModule),在HttpModel中会注册HttpApplication 类中的PostReso ...
- Javascript的执行过程详细研究
下面我们以更形象的示例来说明JavaScript代码在页面中的执行顺序.如果说,JavaScript引擎的工作机制比较深奥是因为它属于底层行为,那么JavaScript代码执行顺序就比较形象了,因为我 ...
- JavaScript 基础:Babel 转译 class 过程窥探
零.前言 虽然在 JavaScript 中对象无处不在,但这门语言并不使用经典的基于类的继承方式,而是依赖原型,至少在 ES6 之前是这样的.当时,假设我们要定义一个可以设置 id 与坐标的类,我们会 ...
- Babel 转译 class 过程窥探--------引用
// Shape 类function Shape(id, x, y) { this.id = id; this.setLocation(x, y);}// 设置坐标的原型方法Shape.p ...
- 对React性能优化的研究-----------------引用
JSX的背后 这个过程一般在前端会称为“转译”,但其实“汇编”将是一个更精确的术语. React开发人员敦促你在编写组件时使用一种称为JSX的语法,混合了HTML和JavaScript.但浏览器对JS ...
- JVM类载入过程及主动引用与被动引用
了解类载入全过程,有助于了解JVM执行过程,以及更深入了解java动态性(解热部署,动态载入),提高程序灵活性. 类载入全过程: JVM将class文件字节码文件载入到内存中.并对数据进行校验解析和初 ...
- jvm学习002 虚拟机类加载过程以及主动引用和被动引用
虚拟机把描述类的数据从class文件加载到内存,并对数据进行校验,转换解析和初始化,最终形成可以被虚拟机直接使用的Java类型,这就是虚拟机的类加载机制. 类从被加载到虚拟机内存中开始,到卸载出内存为 ...
- 对Webpack 应用的研究-----------------引用
对大多数 Web 应用来说,页面性能直接影响着流量.这是一个经常为我们所忽视的事实.用户长时间的等待流失的不仅仅是跳出率.转化率,还有对产品的耐心和信赖.很多时候我们没有意识到性能问题,那是因为平常开 ...
随机推荐
- hadoop的目录结构介绍
hadoop的目录结构介绍 解压缩hadoop 利用tar –zxvf把hadoop的jar包放到指定的目录下. tar -zxvf /home/software/aa.tar.gz -C /home ...
- MSF魔鬼训练营-3.2.2 操作系统辨识
利用操作系统视频进行社会工程学攻击.例如在探测到目标用户所使用的网络设备.服务器设备厂家型号等信息后.可伪装成相关厂家的技术人员通过电话.邮件等方式与系统管理员取得联系得到信任.NMAP 示例: 使用 ...
- Elasticsearch Metric聚合
首先查看index文档信息 $ curl -XGET "http://172.16.101.55:9200/_cat/indices?v" 输出 health status ind ...
- python 学习笔记三 (函数)
1.把函数视为对象 def factorial(n): '''return n!''' return 1 if n < 2 else n*factorial(n-1) print(factori ...
- SYN攻击源码
一.linux下源代码实现/* syn flood by wqfhenanxc. * random soruce ip and random sourec port. * use #include & ...
- HDU-5238 Calculator
题目描述 给定一个关于 \(x\) 的表达式,形如下例:\(×4+2^3+8×6\) 按如下方法计算:\((((x×4)+2)^3+8)×6\) 运算符只有 加号,乘号,幂运算三种,给定的式子中有 \ ...
- Luogu P5221 Product
题目 注意一下空间限制. 令\(f(n)=\prod\limits_{i=1}^n\prod\limits_{j=1}^nij,g(n)=\prod\limits_{i=1}^n\prod\limit ...
- Luogu P4118 [Ynoi2016]炸脖龙I
题目 首先考虑没有修改的情况.显然直接暴力扩展欧拉定理就行了,单次复杂度为\(O(\log p)\)的. 现在有了修改,我们可以树状数组维护差分数组,然后\(O(\log n)\)地单次查询单点值. ...
- AppCan IDE中有时格式化代码后,代码就运行不了了。
AppCan IDE中有时格式化代码后,代码就运行不了了.
- 基于IdentityServer4的声明的授权
## 概述 基于Asp.net Core 1.1 ,使用IdentityServer4认证与授权. ## 参考资料 [微软教程](https://docs.microsoft.com/zh-cn/as ...