[[441325]]

JavaScript 一直是飽受詬病，源于網景公司在 1995 年用了 10 天的時間創造。沒有什么能用 10 天創造就是完美的，可是某些特性一旦發布，錯誤或不完善的地方迅速成為必不可少的特色，并且是幾乎不可能改變。

Javascript 的發展非常快，根本沒有時間調整設計。在推出一年半之后，國際標準就問世了。設計缺陷還沒有充分暴露就成了標準。

歷史遺留

比如常見的歷史設計缺陷：

• null 和 undefined 兩者非常容易混淆
• == 類型轉換的問題
• var 聲明創建全局變量
• 自動插入行尾分號
• 加號可以表示數字之和，也可以表示字符的連接
• NaN 奇怪的特性
• 更多...

Javascript 很多不嚴謹的特性我們可以添加 eslint 來規避。比如禁用 var 和 == 成了大多數人寫代碼的必備條件。

現在/未來

如今 CSS、DOM、HTML 規范由 W3C 來制定，JavaScript 規范由 TC39 制定。那些歷史缺陷也成為了過去，但是現在也出現了一些不盡人意的規范。

CSS 變量

聲明變量的時候，變量名前面要加兩根連詞線 --

body { 
  --foo: #7f583f; 
  --bar: #f7efd2; 
} 

var() 函數用于讀取變量。

a { 
  color: var(--foo); 
  text-decoration-color: var(--bar, #7f583f); 
} 

為什么選擇兩根連詞線(--)表示變量?因為 $ 被 Sass 用掉，@ 被 Less 用掉。_ 、-，用作為 IE 、chrome 兼容寫法。CSS 中已經找不出來字符可以代替變量聲明了。為了不產生沖突，官方的 CSS 變量就改用兩根連詞線。

作為一個官方的標準規范，時刻影響后面的行業發展。竟然能被第三方的插件所左右，令人大跌眼鏡。有開發者吐槽：微軟的架構師也是夠窩囊。

現在很多應用都放棄了 Sass 和 less，轉向了 PostCSS 的懷抱。面向組件編程，根本用不到 Sass 和 less 里面的一些復雜功能。那么 -- 兩個字符的繁瑣將成為開發者永遠的痛。

類私有屬性(proposal-class-fields)

JavaScript 中的 class 大家已經不陌生了，簡直跟 Java 的 class 一模一樣。

基本用法：

class BaseClass { 
  msg = 'hello world'; 
 
  basePublicMethod() { 
    returnthis.msg; 
  } 
} 

繼承：

class SubClass extends BaseClass { 
  subPublicMethod() { 
    returnsuper.basePublicMethod(); 
  } 
} 

靜態屬性：

class ClassWithStaticField { 
  static baseStaticMethod() { 
    return'base static method output'; 
  } 
} 

異步方法

class ClassWithFancyMethods { 
  *generatorMethod() {} 
  async asyncMethod() {} 
  async *asyncGeneratorMethod() {} 
} 

而類私有屬性的提案目前已經進入標準，它用了 # 關鍵字前綴來修飾一個類的屬性。

class ClassWithPrivateField { 
  #privateField; 
 
  constructor() { 
    this.#privateField = 42; 
  } 
} 

你沒看錯，不是 typescript 中的 private 關鍵字。

class BaseClass { 
  readonly msg = 'hello world'; 
 
  private basePrivateMethod() { 
    return this.msg; 
  } 
} 

然而 # 的語法丑陋本身引起了社區的爭議：

• 「class fields 提案提供了一個極具爭議的私有字段訪問語法——并成功地做對了唯一一件事情，讓社區把全部的爭議焦點放在了這個語法上」。
• TS 投降主義已經被迫實現了。
• No dynamic access, no destructuring is a deal breaker for me
• 我們制作一個 eslint 插件 no-private-class-fields 并使用下載計數來說明社區反對
• '#' 作為名稱的一部分會導致混淆，因為 this.#x !== this['#x'] 太奇怪了

前端架構師、TC39 成員賀師俊也在知乎連發好幾篇文章吐槽 class fields

不妨大家看看關于 private 的 side：https://johnhax.net/2017/js-private/slide?qcon#0

提案地址：https://github.com/tc39/proposal-class-fields

globalThis

在不同的 JavaScript 環境中拿到全局對象是需要不同的語句的。在 Web 中，可以通過 window、self 取到全局對象，但是在 Web Workers 中只有 self 可以。在 Node.js 中，必須使用 global。非嚴格模式下，可以在函數中返回 this 來獲取全局對象，否則會返回 undefined

因此一個叫 global 的提案出現。主要用 global 變量統一上面的行為，但后面繞來繞去改成了 globalThis，引起了激烈討論。

globalThis 這個名字會讓 this 變得更加復雜。

1. this 一直是困擾程序員的話題，尤其是 JavaScript 新手，關于它的博客文章源源不斷
2. ES6 讓事情變得更簡單，因為可以告訴人們更喜歡箭頭函數并且只使用 this 內部方法定義
3. 在現代 JS(modules) 中，并沒有真正的全局 this，所以 globalThis 甚至不引用現有的概念

現在說這一切都是徒勞的，因為它已經進入 stage 4

提案地址：https://github.com/tc39/proposal-global

總結

JavaScript 中遺留的糟粕太多。現在受到這些糟粕的影響，很多新的提案又不得不妥協。在未來，它會變得極其復雜。

也許某一天，會出現一個沒有歷史包袱的 JavaScript 子集來替換它。