JavaScript 一直是飽受詬病，源于網(wǎng)景公司在 1995 年用了 10 天的時(shí)間創(chuàng)造。沒有什么能用 10 天創(chuàng)造就是完美的，可是某些特性一旦發(fā)布，錯(cuò)誤或不完善的地方迅速成為必不可少的特色，并且是幾乎不可能改變。
Javascript 的發(fā)展非常快，根本沒有時(shí)間調(diào)整設(shè)計(jì)。在推出一年半之后，國際標(biāo)準(zhǔn)就問世了。設(shè)計(jì)缺陷還沒有充分暴露就成了標(biāo)準(zhǔn)。
歷史遺留
比如常見的歷史設(shè)計(jì)缺陷：
- null 和 undefined 兩者非常容易混淆
- == 類型轉(zhuǎn)換的問題
- var 聲明創(chuàng)建全局變量
- 自動(dòng)插入行尾分號
- 加號可以表示數(shù)字之和，也可以表示字符的連接
- NaN 奇怪的特性
- 更多...
Javascript 很多不嚴(yán)謹(jǐn)?shù)奶匦晕覀兛梢蕴砑?eslint 來規(guī)避。比如禁用 var 和 == 成了大多數(shù)人寫代碼的必備條件。
現(xiàn)在/未來
如今 CSS、DOM、HTML 規(guī)范由 W3C 來制定，JavaScript 規(guī)范由 TC39 制定。那些歷史缺陷也成為了過去，但是現(xiàn)在也出現(xiàn)了一些不盡人意的規(guī)范。
CSS 變量
聲明變量的時(shí)候，變量名前面要加兩根連詞線 --
- body {
- --foo: #7f583f;
- --bar: #f7efd2;
- }
var() 函數(shù)用于讀取變量。
- a {
- color: var(--foo);
- text-decoration-color: var(--bar, #7f583f);
- }
為什么選擇兩根連詞線(--)表示變量?因?yàn)?$ 被 Sass 用掉，@ 被 Less 用掉。_ 、-，用作為 IE 、chrome 兼容寫法。CSS 中已經(jīng)找不出來字符可以代替變量聲明了。為了不產(chǎn)生沖突，官方的 CSS 變量就改用兩根連詞線。
作為一個(gè)官方的標(biāo)準(zhǔn)規(guī)范，時(shí)刻影響后面的行業(yè)發(fā)展。竟然能被第三方的插件所左右，令人大跌眼鏡。有開發(fā)者吐槽：微軟的架構(gòu)師也是夠窩囊。
現(xiàn)在很多應(yīng)用都放棄了 Sass 和 less，轉(zhuǎn)向了 PostCSS 的懷抱。面向組件編程，根本用不到 Sass 和 less 里面的一些復(fù)雜功能。那么 -- 兩個(gè)字符的繁瑣將成為開發(fā)者永遠(yuǎn)的痛。
類私有屬性(proposal-class-fields)
JavaScript 中的 class 大家已經(jīng)不陌生了，簡直跟 Java 的 class 一模一樣。
基本用法：
- class BaseClass {
- msg = 'hello world';
- basePublicMethod() {
- returnthis.msg;
- }
- }
繼承：
- class SubClass extends BaseClass {
- subPublicMethod() {
- returnsuper.basePublicMethod();
- }
- }
靜態(tài)屬性：
- class ClassWithStaticField {
- static baseStaticMethod() {
- return'base static method output';
- }
- }
異步方法
- class ClassWithFancyMethods {
- *generatorMethod() {}
- async asyncMethod() {}
- async *asyncGeneratorMethod() {}
- }
而類私有屬性的提案目前已經(jīng)進(jìn)入標(biāo)準(zhǔn)，它用了 # 關(guān)鍵字前綴來修飾一個(gè)類的屬性。
- class ClassWithPrivateField {
- #privateField;
- constructor() {
- this.#privateField = 42;
- }
- }
你沒看錯(cuò)，不是 typescript 中的 private 關(guān)鍵字。
- class BaseClass {
- readonly msg = 'hello world';
- private basePrivateMethod() {
- return this.msg;
- }
- }
然而 # 的語法丑陋本身引起了社區(qū)的爭議：
- 「class fields 提案提供了一個(gè)極具爭議的私有字段訪問語法——并成功地做對了唯一一件事情，讓社區(qū)把全部的爭議焦點(diǎn)放在了這個(gè)語法上」。
- TS 投降主義已經(jīng)被迫實(shí)現(xiàn)了。
- No dynamic access, no destructuring is a deal breaker for me
- 我們制作一個(gè) eslint 插件 no-private-class-fields 并使用下載計(jì)數(shù)來說明社區(qū)反對
- '#' 作為名稱的一部分會(huì)導(dǎo)致混淆，因?yàn)?this.#x !== this['#x'] 太奇怪了
前端架構(gòu)師、TC39 成員賀師俊也在知乎連發(fā)好幾篇文章吐槽 class fields
不妨大家看看關(guān)于 private 的 side：https://johnhax.net/2017/js-private/slide?qcon#0
提案地址：https://github.com/tc39/proposal-class-fields
globalThis
在不同的 JavaScript 環(huán)境中拿到全局對象是需要不同的語句的。在 Web 中，可以通過 window、self 取到全局對象，但是在 Web Workers 中只有 self 可以。在 Node.js 中，必須使用 global。非嚴(yán)格模式下，可以在函數(shù)中返回 this 來獲取全局對象，否則會(huì)返回 undefined
因此一個(gè)叫 global 的提案出現(xiàn)。主要用 global 變量統(tǒng)一上面的行為，但后面繞來繞去改成了 globalThis，引起了激烈討論。
globalThis 這個(gè)名字會(huì)讓 this 變得更加復(fù)雜。
- this 一直是困擾程序員的話題，尤其是 JavaScript 新手，關(guān)于它的博客文章源源不斷
- ES6 讓事情變得更簡單，因?yàn)榭梢愿嬖V人們更喜歡箭頭函數(shù)并且只使用 this 內(nèi)部方法定義
- 在現(xiàn)代 JS(modules) 中，并沒有真正的全局 this，所以 globalThis 甚至不引用現(xiàn)有的概念
現(xiàn)在說這一切都是徒勞的，因?yàn)樗呀?jīng)進(jìn)入 stage 4
提案地址：https://github.com/tc39/proposal-global
總結(jié)
JavaScript 中遺留的糟粕太多。現(xiàn)在受到這些糟粕的影響，很多新的提案又不得不妥協(xié)。在未來，它會(huì)變得極其復(fù)雜。
也許某一天，會(huì)出現(xiàn)一個(gè)沒有歷史包袱的 JavaScript 子集來替換它。
原文鏈接：https://mp.weixin.qq.com/s/PeiAfSj-p6Ck8D2OffysYg
