JS的非常重要的"边角料"

42 阅读2分钟

新旧知识库知识差异

现代JS库的五虎上将

  • Proxy
  • Reflect
  • Map和WeakMap(其是Jotai的灵魂)
  • Set( 订阅发布的基石O(1),拥有数组无可比拟的优势O(n))
  • Symbol

上古时代JS库的“老三驾马车”

  • 原型链 (Prototype) & 构造函数 (Constructor)
  • 闭包 (Closure) &IIFE (立即执行函数)
  • 动态混入 (Mixin) / Object.defineProperty

其中Map(WeakMap)SetSymbol现代JS库底层架构的"新三驾马车",ProxyRefelct则堪称"上帝之手"。

上帝之手Proxy和Reflect

Proxy: 它是现代响应式库的心脏

没有它,Vue 3 做不出来,Valtio 做不出来,Immer 也是残废。 它赋予了你“监听一切”的能力:读、写、删除、甚至判断 key 是否存在 (TS in 操作符)。

Reflect: 它是 Proxy 的影子

Valtio和Vue等现代库中,写的全是 Reflect.get(t, p, receiver) 而不是 target[prop]。为什么? 为了修复 this 指向的 Bug。 如果对象里有 get fullName() { return this.firstName + this.lastName },不用 Reflect 的话,this 可能会指向原始对象而不是 Proxy,导致依赖收集失效。

为什么会有应用层在狂欢“函数式”,底层却死守“面向对象/指令式”这种割裂?

应用层和库层的目标完全不同,导致了它们选择了不同的武器。

应用层 (App Layer)

目标: 表达业务逻辑、UI 渲染、数据展示。

追求: 声明式 (Declarative)。我只关心 “是什么 (What)”,不关心 “怎么做 (How)”

最佳范式: 函数式 (Functional)。UI = f(state)。Hooks 完美契合这一点。

库底层 (Library Layer)

目标: 管理内存、调度任务、维护状态一致性、优化性能。

追求: 指令式 (Imperative) & 高性能。我必须精确控制 “怎么做”(比如 Map 怎么存,Set 怎么通知)。

最佳范式: 面向对象 (OOP) / 单例。因为状态(Store)本质上就是有状态的 (Stateful),它必须驻留在内存的某个地方,保持引用不变。OOP 天然就是为了管理“有状态的实例”而生的。

老派技术:class、原型链、WeakMap、Symbol、闭包、Proxy、Reflect、单例模式、函数柯里化、高阶函数、发布订阅模式、状态容器设计。