深入理解 JavaScript 中的 with 语句

通常来说，所有 JavaScript 开发人员都有一个共同的概念：“避免使用 with 语句。” 这条准则无疑是正确的，但并不是每个人都能很好地解释为什么。虽然只记住“不要使用它”的结果就足够了，但理解其背后的原因对于深入理解 JavaScript 语言和编写高质量代码非常有帮助。

with 语句

with 语句的初衷是为了避免冗长的对象调用：

foo.bar.baz.x = 1;
foo.bar.baz.y = 2;
foo.bar.baz.z = 3;

with(foo.bar.baz) {
    x = 1;
    y = 2;
    z = 3;
}

但实际上，使用变量替换是相当简单的：

var p = foo.bar.baz;
p.x = 1;
p.y = 2;
p.z = 3;

因此，看起来一开始就不需要 with。如今，使用 with 的人已经很少了。在严格模式下，使用 with 会直接报错：

function foo() {
    'use strict';
    with ({}) {}
}

因此，with 已经被完全废弃，人们甚至懒得去关注其原因。

书中的陈述

既然是总结，我想尽可能全面，所以让我们先从书籍开始。关于 JavaScript 的书籍，以下是一些主要参考：

《JavaScript 权威指南》（第 5 版，David Flanagan，P109）：

with (Object) statement with 语句用于暂时修改作用域链… 这种语句实际上是将对象添加到作用域链的开头，然后执行语句，再将作用域链恢复到原来的状态… 尽管有时使用 with 语句更方便，但人们反对使用它。使用 with 语句的 JavaScript 代码难以优化，因此其执行速度比不使用 with 语句的等效代码慢得多。此外，在 with 语句中定义函数和初始化变量可能会产生与直觉相悖的意外行为（这种行为及其原因非常复杂，我们在此不再解释）。

《JavaScript 高级程序设计》（第 3 版，Nicholas C. Zakas，P60）：

with 语句的目的是将代码的作用域设置为特定对象… 由于频繁使用 with 语句导致的性能下降，以及调试代码的困难，不建议在开发大型应用程序时使用 with 语句。

《JavaScript 语言精粹》（Douglas Crockford，P110）：

这个语言中存在 with 语句严重影响了 JavaScript 处理器的速度，因为它破坏了变量名的词法作用域绑定。它的初衷是好的，但如果没有它，JavaScript 语言会稍微好一些。

《深入理解 ECMAScript 6》（Axel Rauschmayer，P153）：

这本书是我唯一一本用了一页多的篇幅详细解释了 JavaScript 中废弃 with 的原因的基础参考书。

好了，读了这么多书，让我们现在进入本文的主要话题：

为什么不使用 with 语句？

综上所述，主要考虑如下：

性能问题

with 语句存在明显的性能问题，这在几乎所有参考书中都有提到，但很少有例子来说明这一点。你可以自己进行代码测试，以更直观地量化理解 with 语句的性能。

var a = {a: {a: 1}};
function useWith() {
    with (a.a) {
        for (var i = 0; i < 1000000; i++) {
            a = i; 
        }
    }
}

var b = {b: {b: 1}};
function noWith() {
    for (var i = 0; i < 1000000; i++) {
        b.b.b = i; 
    }
}

var t1 = new Date().getTime();
useWith();
alert(new Date().getTime() - t1);

var t2 = new Date().getTime();
noWith();
alert(new Date().getTime() - t2);

在对象属性赋值一百万次时，性能差异是否显著？

当然，在实际使用中，极少有执行数百万次的循环，损失在可接受范围内。因此，性能损失并不是废弃 with 语句的主要原因。

不可预测性

使用 with 语句导致的不可预测性是废弃 with 的根本原因。with 强行截断词法作用域，临时将对象插入作用域链。这导致代码变得难以捉摸。

例如：

function foo(a) {
    with (a) {
        console.log(a);
    }
}

foo("sword");     // 输出: sword
foo({});          // 输出: [object Object]
foo({a: "sword"}); // 输出: {a: "sword"}

在这个简单例子中，字符串 "sword" 和空对象没有问题。然而，当传递的参数是具有名为 a 的属性的对象时，强行发生 a.a 访问。

这只是一个参数的情况。如果有很多参数呢？当不知道传入参数有什么属性时，可以想象在多个参数之间引用各种属性会有多么混乱。这就是所谓的“令人惊讶和违反直觉”的行为本质。

此外，在 with 语句中声明的变量并不属于 with 指定的对象：

var a = {};   
with (a) {
    x = 'sword';
    var y = 'wang';
}

console.log(a.x);        // undefined
console.log(a.y);        // undefined
console.log(window.x);   // sword
console.log(window.y);   // wang

在 with 中声明的变量被添加到外部函数中。

function foo() {
    with ({}) { x = 'sword'; }
    console.log(x);
}
foo();  // 输出: sword

这可能和你想象的有些不同。

单单通过标识符及其上下文，是无法确定语句中的标识符指向什么的。这才是 with 被弃用的真正原因。它强行混淆了上下文，使程序的预测和解析变得困难，导致了后面会讨论的优化问题。

代码无法优化

由于无法预测，代码的含义不断变化。不同的调用，甚至相同的调用，由于运行时的变化可能会偏离，使得代码无法优化。

优化涉及两个方面。一方面，解析和执行变慢，这指的是前面提到的性能。另一方面，对于代码优化和压缩工具，如果无法确定是否正在使用变量或属性，则无法重命名（因为属性无法重命名）。

总结

在这个炎热的夏天，我可能被热气蒸得有些思维散乱。心血来潮，我翻出了几本关于 JavaScript 的书，想要探讨一下这个被广泛诟病的 with 语句。说着说着，似乎偏离了主题，胡乱扯了一些看似深奥但不太实用的内容。写完之后，我自己都觉得“哇，这人真闲”。

哦，对了，文章开头还有一个冷笑话，说 JavaScript 比 Java 多 60%。我只是在调侃它们的字符数。“JavaScript” 比 Java 多五个字母；如果你坚持数字符，那么大概是多了 60%。好吧，可能这个笑话有点冷，难怪外面这么热——看来我得冷静一下。

写这些东西可以算是一种消暑和消磨时间的方式。希望你读到这里时，也能在这个夏季找到属于你的凉爽享受。至于 with 语句——了解它并搁置一旁，因为我们反正不会用了，不是吗？

最后：

CSS技巧与案例详解

vue2与vue3技巧合集

VueUse源码解读