头图

一个新的JS语法是如何诞生的?

大家好,我卡颂。

最近,Typescript v5.0 beta发布,主打特性是支持Decorators

有同学会疑惑,Decorators不是早就有的特性么?各种框架(比如Nest.jsAngular)早就用的飞起,ts不也早就支持了么?

之所以会有这样的疑惑,简单的说,现阶段大家使用的是老的Decorators规范,在ts中使用需要加上--experimentalDecorators flag。而ts本次更新支持的是2022年3月新的Decorator规范。

这背后更本质的原因,涉及到新的JS语法诞生的过程。今天,我们就以Decorators为例聊聊一个新的JS语法是如何诞生的。

欢迎加入人类高质量前端交流群,带飞

新特性是如何产生的

所有ES语法的诞生都由国际标准组织Ecma International下属的TC39(the 39nth Technical Committee)委员会负责。

这是个会员制的组织,由入会的公司、组织推举的代表组成。这些代表通常是JS开发者、学者或编程语言领域的专家(比如大家熟悉的贺老)。国内的360、阿里、华为、SujiTech都曾参与TC39

委员会定期召开会议推进新的ES语法落地,这套语法落地的流程被称为The TC39 Process

值得一提的是,这套流程起源于ES2015,也就是大名鼎鼎的ES6

ES2015整个版本的落地用了整整6年,包含大量新特性。我想这也是为什么提到ES新特性,很多同学首先会想到ES2015(即ES6)的原因吧。

ES2017开始,每年都会发布新的版本,包含那些通过The TC39 Process但在上个版本没有发布的特性。

The TC39 Process

整个流程包含5个阶段,阶段0~阶段4。接下来简要介绍下各阶段的目标。

阶段0:稻草人(Strawperson)

阶段0被称为Strawperson(稻草人),由TC39成员发起,通常是提出新想法或是对未纳入正式的提案进行修改。

比如,Decorator提案Yehuda Katz于2014年4月10日提出。

等到这份提案到阶段3,已经2022年3月了,可想而知一个新特性的诞生有多不容易。

阶段1:提案(Proposal)

阶段1被称为Proposal(提案),此时该提案已经成为正式提案。该阶段主要提出一些具体的问题和解决方案。此时会选出一名TC39成员(通常是该提案的发起者)负责推动该提案。

继续以Decorator提案举例,他在2015年3月24日到达阶段1。

该阶段指明了Decorator的:

  • 设计目的
  • 适用范围

比如,适用于类本身:

@F("color")
@G
class Foo {
}

适用于类方法:

class Foo {
  @F("color")
  @G
  bar() { }
}

除此之外,还能适用于类的访问器属性(getter、setter)、对象字面量、对象的访问器属性。

  • 语法

Decorator进入阶段1的一个月后,Babel跟进了Decoratorpolyfill实现。这个版本的polyfill被称为legacy

我们可以在Babel官网看到,对于Decorator特性存在5个可选项:

不同版本的可选项对应了Decorator提案不同阶段的落地时间,由于不同阶段对Decorator规范提出了修改意见,所以相应的,Babel插件也就有了不同可选项。

类似的原因,ts中支持的Decorator也就有了不同版本,这也是造成我们开篇提到问题的本质原因。

阶段2:草稿(Draft)

阶段2被称为Draft(草稿)。在该阶段会用ES语法尽可能精确地描述提案的语法、语义和API,并提供实验性的实现。

到了该阶段,意味着提案会有很大概率出现在正式版本的ES中。

Decorator到达阶段2的时间是2016年7月28日,距离阶段1已经过去一年多时间。

阶段3:候选人(Candidate)

阶段3被称为Candidate(候选人)。到了该阶段,提案基本已经定型,仅根据外部反馈针对关键问题进行更改。

ts在最新的v5.0 beta版本中默认支持的Decorator就是阶段3。

阶段4:完成(Finished)

阶段4被称为Finished(完成)。该提案会出现在正式的规范文档中,并在下一个版本的ES中正式支持。

总结

语言特性的推进是个蛮长的过程,最终达成的是多方博弈的结果。对于ES来说,这些博弈就体现在这4个阶段中。

还是以Decorator举例,这个特性在oop框架(比如AngularMobx)中是很重要的特性。Angular团队在实现Angular2时,最初考虑用AtScript实现。

而最终Angularts实现,其中很重要的一个原因是 —— ts团队承诺实现一些AtScript特性,尤其是Decorator

avatar
卡颂
《React技术揭秘》作者
2.6k 声望
16.6k 粉丝
0 条评论
推荐阅读
把React新文档投喂给 GPT-4 后...
大家好,我卡颂。最近,React新文档终于上线了。从内容上看,新文档包括:理论知识、学习指引API介绍从形式上看,新文档除了传统的文字内容,还包括:在线Demo示意图小测验可以说是阅读体验拉满。但是,由于文档...

卡颂7阅读 5.9k评论 3

封面图
手把手教你写一份优质的前端技术简历
不知不觉一年一度的秋招又来了,你收获了哪些大厂的面试邀约,又拿了多少offer呢?你身边是不是有挺多人技术比你差,但是却拿到了很多大厂的offer呢?其实,要想面试拿offer,首先要过得了简历那一关。如果一份简...

tonychen153阅读 17.9k评论 5

封面图
正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青57阅读 8.5k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy49阅读 7.2k评论 12

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs42阅读 6.9k评论 12

封面图
CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(>^ω^&lt...

XboxYan47阅读 3.3k评论 14

封面图
「多图预警」完美实现一个@功能
一天产品大大向 boss 汇报完研发成果和产品业绩产出,若有所思的走出来,劲直向我走过来,嘴角微微上扬。产品大大:boss 对我们的研发成果挺满意的,balabala...(内心 OS:不听,讲重点)产品大大:咱们的客服 I...

wuwhs32阅读 3.5k评论 5

封面图
avatar
卡颂
《React技术揭秘》作者
2.6k 声望
16.6k 粉丝
宣传栏