JavaScript 有個 with 關(guān)鍵字, with 語句的原本用意是為逐級的對象訪問提供命名空間式的速寫方式. 也就是在指定的代碼區(qū)域, 直接通過節(jié)點(diǎn)名稱調(diào)用對象.

用過 Java 和 .NET 的同學(xué)對包或命名空間的概念應(yīng)該不會陌生, 正因?yàn)橛羞@個概念, 使代碼的簡潔易讀得到了保證. 不知 JavaScript 設(shè)計(jì)之初是如何定位 with 語句的, 個人覺得它們之間有一定的相似度. 如:

apple.banana.candy.dog.egg.fog.god.huh.index = 0;  
doSomething(apple.banana.candy.dog.egg.fog.god.huh.index);  

利用 with 語句, 可以寫為以下代碼.

with(apple.banana.candy.dog.egg.fog.god.huh)   
{  
c = 0;  
doSomething(index);  
}  

看起來很美妙, 卻存在致命的缺陷. 下面我們來進(jìn)行一些小測試吧.

1. 在 with 語句內(nèi)部通過內(nèi)部變量修改數(shù)值

var root = {  
branch: {  
node: 1  
}  
};  
with(root.branch) {  
node = 0;  
// 顯示 0, 正確!  
alert(node);  
}  
// 顯示 0, 正確!  
alert(root.branch.node);  

2. 在 with 語句內(nèi)部通過對象節(jié)點(diǎn)修改數(shù)值

var root = {  
branch: {  
node: 1  
}  
};  
with(root.branch) {  
root.branch.node = 0;  
// 顯示 0, 正確!  
alert(node);  
}  
// 顯示 0, 正確!  
alert(root.branch.node);  

經(jīng)過測試 1 和測試 2, 乍看沒什么問題, 但是... 請看測試 3.

3. 在 with 語句內(nèi)部通過對象父節(jié)點(diǎn)修改數(shù)值

var root = {  
branch: {  
node: 1  
}  
};  
with(root.branch) {  
root.branch = {  
node: 0  
};  
// 顯示 1, 錯誤!  
alert(node);  
}  
// 顯示 0, 正確!  
alert(root.branch.node);  

由上面的測試 3 可知, with 語句內(nèi)部的節(jié)點(diǎn)父節(jié)點(diǎn)修改后, 不會同步到節(jié)點(diǎn)本身. 也就是說, 不能保證內(nèi)外數(shù)值的一致性. 這是可能成為項(xiàng)目里面隱藏性很高的 bug.

那我們該怎么辦呢? 接受那很長的一串逐級訪問, 還是另有他法?

方法是有的. 我們可以通過別名引用父節(jié)點(diǎn)的方式來調(diào)用節(jié)點(diǎn)對象, 如:

var root = {  
branch: {  
node: 1  
}  
};  
var quote = root.branch;  
quote.node = 0;  
// 顯示 0, 正確!  
alert(root.branch.node);  

我相信很少人會用 with 語句, 也不會有很多人知道這個關(guān)鍵字, 但我覺得這是個有問題的語句, 壓根就不應(yīng)該使用, 所以寫個小文記錄一下.

原文地址：http://www.neoease.com/javascript-with-statement/

【編輯推薦】

1. Web移動應(yīng)用 HTML5 CSS和JavaScript
2. JavaScript 假如default不是switch的***一項(xiàng)
3. Javascript中閉包的作用域鏈
4. 讓瀏覽器非阻塞加載javascript的幾種方式
5. JavaScript實(shí)現(xiàn)二級聯(lián)動下拉框