關于JavaScript的with 語句的使用方法
更新時間:2011年05月09日 23:29:01 作者:
JavaScript 有個 with 關鍵字, with 語句的原本用意是為逐級的對象訪問提供命名空間式的速寫方式. 也就是在指定的代碼區(qū)域, 直接通過節(jié)點名稱調(diào)用對象
用過 Java 和 .NET 的同學對包或命名空間的概念應該不會陌生, 正因為有這個概念, 使代碼的簡潔易讀得到了保證. 不知 JavaScript 設計之初是如何定位 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);
}
看起來很美妙, 卻存在致命的缺陷. 下面我們來進行一些小測試吧.
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é)點修改數(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é)點修改數(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é)點父節(jié)點修改后, 不會同步到節(jié)點本身. 也就是說, 不能保證內(nèi)外數(shù)值的一致性. 這是可能成為項目里面隱藏性很高的 bug.
那我們該怎么辦呢? 接受那很長的一串逐級訪問, 還是另有他法?
方法是有的. 我們可以通過別名引用父節(jié)點的方式來調(diào)用節(jié)點對象, 如:
var root = {
branch: {
node: 1
}
};
var quote = root.branch;
quote.node = 0;
// 顯示 0, 正確!
alert(root.branch.node);
我相信很少人會用 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);
}
看起來很美妙, 卻存在致命的缺陷. 下面我們來進行一些小測試吧.
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é)點修改數(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é)點修改數(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é)點父節(jié)點修改后, 不會同步到節(jié)點本身. 也就是說, 不能保證內(nèi)外數(shù)值的一致性. 這是可能成為項目里面隱藏性很高的 bug.
那我們該怎么辦呢? 接受那很長的一串逐級訪問, 還是另有他法?
方法是有的. 我們可以通過別名引用父節(jié)點的方式來調(diào)用節(jié)點對象, 如:
復制代碼 代碼如下:
var root = {
branch: {
node: 1
}
};
var quote = root.branch;
quote.node = 0;
// 顯示 0, 正確!
alert(root.branch.node);
我相信很少人會用 with 語句, 也不會有很多人知道這個關鍵字, 但我覺得這是個有問題的語句, 壓根就不應該使用, 所以寫個小文記錄一下.
相關文章
javascript實現(xiàn)智能手環(huán)時間顯示
這篇文章主要為大家詳細介紹了javascript實現(xiàn)智能手環(huán)時間顯示,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-09-09JavaScript實現(xiàn)外溢動態(tài)愛心的效果的示例代碼
這篇文章主要為大家介紹了如何利用JavaScript制作出簡單的外溢動態(tài)愛心的效果,文中的示例代碼講解詳細,感興趣的小伙伴快跟隨小編一起動手試一試2022-03-03javascript瀑布流式圖片懶加載實例解析與優(yōu)化
這篇文章主要針對javascript瀑布流式圖片懶加載實例進行解析與優(yōu)化,感興趣的小伙伴們可以參考一下2016-02-02