關(guān)于JavaScript的with 語句的使用方法
更新時(shí)間:2011年05月09日 23:29:01 作者:
JavaScript 有個(gè) with 關(guān)鍵字, with 語句的原本用意是為逐級(jí)的對(duì)象訪問提供命名空間式的速寫方式. 也就是在指定的代碼區(qū)域, 直接通過節(jié)點(diǎn)名稱調(diào)用對(duì)象
用過 Java 和 .NET 的同學(xué)對(duì)包或命名空間的概念應(yīng)該不會(huì)陌生, 正因?yàn)橛羞@個(gè)概念, 使代碼的簡(jiǎn)潔易讀得到了保證. 不知 JavaScript 設(shè)計(jì)之初是如何定位 with 語句的, 個(gè)人覺得它們之間有一定的相似度. 如:
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)行一些小測(cè)試吧.
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)部通過對(duì)象節(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)過測(cè)試 1 和測(cè)試 2, 乍看沒什么問題, 但是... 請(qǐng)看測(cè)試 3.
3. 在 with 語句內(nèi)部通過對(duì)象父節(jié)點(diǎn)修改數(shù)值
var root = {
branch: {
node: 1
}
};
with(root.branch) {
root.branch = {
node: 0
};
// 顯示 1, 錯(cuò)誤!
alert(node);
}
// 顯示 0, 正確!
alert(root.branch.node);
由上面的測(cè)試 3 可知, with 語句內(nèi)部的節(jié)點(diǎn)父節(jié)點(diǎn)修改后, 不會(huì)同步到節(jié)點(diǎn)本身. 也就是說, 不能保證內(nèi)外數(shù)值的一致性. 這是可能成為項(xiàng)目里面隱藏性很高的 bug.
那我們?cè)撛趺崔k呢? 接受那很長(zhǎng)的一串逐級(jí)訪問, 還是另有他法?
方法是有的. 我們可以通過別名引用父節(jié)點(diǎn)的方式來調(diào)用節(jié)點(diǎn)對(duì)象, 如:
var root = {
branch: {
node: 1
}
};
var quote = root.branch;
quote.node = 0;
// 顯示 0, 正確!
alert(root.branch.node);
我相信很少人會(huì)用 with 語句, 也不會(huì)有很多人知道這個(gè)關(guān)鍵字, 但我覺得這是個(gè)有問題的語句, 壓根就不應(yīng)該使用, 所以寫個(gè)小文記錄一下.
復(fù)制代碼 代碼如下:
apple.banana.candy.dog.egg.fog.god.huh.index = 0;
doSomething(apple.banana.candy.dog.egg.fog.god.huh.index);
利用 with 語句, 可以寫為以下代碼.
復(fù)制代碼 代碼如下:
with(apple.banana.candy.dog.egg.fog.god.huh) {
c = 0;
doSomething(index);
}
看起來很美妙, 卻存在致命的缺陷. 下面我們來進(jìn)行一些小測(cè)試吧.
1. 在 with 語句內(nèi)部通過內(nèi)部變量修改數(shù)值
復(fù)制代碼 代碼如下:
var root = {
branch: {
node: 1
}
};
with(root.branch) {
node = 0;
// 顯示 0, 正確!
alert(node);
}
// 顯示 0, 正確!
alert(root.branch.node);
2. 在 with 語句內(nèi)部通過對(duì)象節(jié)點(diǎn)修改數(shù)值
復(fù)制代碼 代碼如下:
var root = {
branch: {
node: 1
}
};
with(root.branch) {
root.branch.node = 0;
// 顯示 0, 正確!
alert(node);
}
// 顯示 0, 正確!
alert(root.branch.node);
經(jīng)過測(cè)試 1 和測(cè)試 2, 乍看沒什么問題, 但是... 請(qǐng)看測(cè)試 3.
3. 在 with 語句內(nèi)部通過對(duì)象父節(jié)點(diǎn)修改數(shù)值
復(fù)制代碼 代碼如下:
var root = {
branch: {
node: 1
}
};
with(root.branch) {
root.branch = {
node: 0
};
// 顯示 1, 錯(cuò)誤!
alert(node);
}
// 顯示 0, 正確!
alert(root.branch.node);
由上面的測(cè)試 3 可知, with 語句內(nèi)部的節(jié)點(diǎn)父節(jié)點(diǎn)修改后, 不會(huì)同步到節(jié)點(diǎn)本身. 也就是說, 不能保證內(nèi)外數(shù)值的一致性. 這是可能成為項(xiàng)目里面隱藏性很高的 bug.
那我們?cè)撛趺崔k呢? 接受那很長(zhǎng)的一串逐級(jí)訪問, 還是另有他法?
方法是有的. 我們可以通過別名引用父節(jié)點(diǎn)的方式來調(diào)用節(jié)點(diǎn)對(duì)象, 如:
復(fù)制代碼 代碼如下:
var root = {
branch: {
node: 1
}
};
var quote = root.branch;
quote.node = 0;
// 顯示 0, 正確!
alert(root.branch.node);
我相信很少人會(huì)用 with 語句, 也不會(huì)有很多人知道這個(gè)關(guān)鍵字, 但我覺得這是個(gè)有問題的語句, 壓根就不應(yīng)該使用, 所以寫個(gè)小文記錄一下.
相關(guān)文章
使用js原生實(shí)現(xiàn)年份輪播選擇效果實(shí)例
這篇文章主要給大家介紹了關(guān)于如何使用js原生實(shí)現(xiàn)年份輪播選擇效果的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01javascript實(shí)現(xiàn)智能手環(huán)時(shí)間顯示
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)智能手環(huán)時(shí)間顯示,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09JavaScript實(shí)現(xiàn)外溢動(dòng)態(tài)愛心的效果的示例代碼
這篇文章主要為大家介紹了如何利用JavaScript制作出簡(jiǎn)單的外溢動(dòng)態(tài)愛心的效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴快跟隨小編一起動(dòng)手試一試2022-03-03JavaScript 擴(kuò)展運(yùn)算符用法實(shí)例小結(jié)【基于ES6】
這篇文章主要介紹了JavaScript 擴(kuò)展運(yùn)算符用法,結(jié)合實(shí)例形式總結(jié)分析了基于ES6的擴(kuò)展運(yùn)算符基本概念與使用相關(guān)操作技巧,需要的朋友可以參考下2019-06-06js最實(shí)用string(字符串)類型的使用及截取與拼接詳解
這篇文章主要介紹了js string使用截取與拼接,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04javascript瀑布流式圖片懶加載實(shí)例解析與優(yōu)化
這篇文章主要針對(duì)javascript瀑布流式圖片懶加載實(shí)例進(jìn)行解析與優(yōu)化,感興趣的小伙伴們可以參考一下2016-02-02