with语句在严格模式下被完全禁用,非严格模式下已被主流引擎废弃,绝不该在新代码中使用;它破坏作用域透明性、阻碍静态分析、导致变量引用不可预测,并引发难以调试的错误。

with 语句在严格模式下被完全禁用,非严格模式下虽仍可运行,但已被所有主流引擎标记为废弃(deprecated),**绝不该在新代码中使用**。它破坏作用域透明性、阻碍静态分析、引发难以调试的隐蔽错误,V8、SpiderMonkey 和 JavaScriptCore 都明确不鼓励它。
为什么 with 会导致变量引用不可预测
它会把传入对象的属性临时注入到当前作用域链顶端,但 JavaScript 引擎无法在编译期确定某个标识符是来自该对象、还是外层变量、还是全局变量——这直接导致:
- 无法进行有效的变量提升(hoisting)和常量折叠(constant folding)优化
- 混淆
var声明的作用域:在with块内var x = 1可能意外覆盖对象属性,也可能泄漏到外层函数作用域 - 调试器无法准确定位变量来源;
console.log(x)看似简单,实际可能取自obj.x、function x或window.x
常见误用场景与对应替代写法
多数 with 使用场景其实是为了减少重复对象访问,比如操作 DOM 元素属性或配置对象字段。这些都有更清晰、更安全的替代方式:
- 频繁读写同一对象属性 → 解构赋值:
const { value, disabled, className } = element;后直接用value、disabled等 - 批量设置对象字段 → 展开运算符 + 新对象字面量:
const config = { ...defaultConfig, timeout: 5000, retries: 3 }; - 临时封装一组操作 → 立即执行函数表达式(IIFE)+ 参数解构:
(function ({ width, height, color }) { canvas.width = width; canvas.height = height; ctx.fillStyle = color; })(options);
ESLint 和 TypeScript 如何帮你避开它
现代工具链默认拦截 with,但需确认配置生效:
立即学习“Java免费学习笔记(深入)”;
- ESLint:启用
no-with规则(已包含在eslint:recommended中),一旦检测到就报错 - TypeScript:即使在
noImplicitAny: false下,with块内的变量类型也无法推导,TS 编译器会报Cannot use 'with' statement in strict mode(即使没显式写"use strict",TS 输出默认是严格模式) - Chrome DevTools 控制台中输入
with({x:1}) { console.log(x) }会直接抛出SyntaxError: Strict mode code may not include a with statement
真正麻烦的不是语法写不出来,而是它让代码行为脱离开发者直觉——同一个标识符,在不同执行路径下可能指向完全不同的内存位置。这种不确定性在大型项目协作和长期维护中代价极高,远超少敲几个点号带来的便利。










