深入理解 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 語句——了解它并擱置一旁，因為我們反正不會用了，不是嗎？
