深入淺析JavaScript中with語句的理解
JavaScript 有個 with 關(guān)鍵字, with 語句的原本用意是為逐級的對象訪問提供命名空間式的速寫方式. 也就是在指定的代碼區(qū)域, 直接通過節(jié)點名稱調(diào)用對象.
with語句的作用是暫時改變作用域鏈、減少的重復(fù)輸入。
其語法結(jié)構(gòu)為:
with(object){
//statements
}
舉一個實際例子吧:
with(document.forms[]){
name.value = "lee king";
address.value = "Peking";
zipcode.value = "";
}
與之對應(yīng)的傳統(tǒng)的寫法是:
document.forms[].name.value = "lee king"; document.forms[].address.value = "Peking"; document.forms[].zipcode.value = "";
可以看出with語句的簡潔明了,不過在代碼的世界里是很難找到真正的完美。
js的解釋器需要檢查with塊中的變量是否屬于with包含的對象,這將使with語句執(zhí)行速度大大下降,并且導(dǎo)致js語句很難被優(yōu)化。為了兼顧速度與代碼量可以找到一個比較折衷的方案:
var form = document.forms[]; form.name.value = "lee king"; form.address.value = "Peking"; form.zipcode.value = "";
所以在以后的高效代碼開發(fā)中我們應(yīng)該盡可能的避免使用with語句。
經(jīng)過測試:
var a = 123;
var b = {a : 321};
with(b){
console.log(a); // 321
}
var a = 123;
var b = {}; 這里去掉b中的a屬性
with(b){
console.log(a); // 123
}從作用域鏈來分析
在javascript中,函數(shù)也是對象,實際上,javascript中的一切都是對象。函數(shù)內(nèi)部有一個只給javascript引擎訪問的內(nèi)部屬性是[[scope]],該屬性包含了函數(shù)創(chuàng)建時的作用域中對象的集合,這個集合就叫做作用域鏈。
比如下面代碼:
function add(num1,num2) {
var sum = num1 + num2;
return sum;
}
在函數(shù)創(chuàng)建時,它的作用域鏈中會填入一個全局對象,該全局對象包含了所有全局變量,如下圖:

當(dāng)函數(shù)被執(zhí)行時,會創(chuàng)建一個活動對象,該對象包含了函數(shù)所有局部變量、命名參數(shù)以及this,然后該對象會被推入作用域鏈的前端,當(dāng)函數(shù)執(zhí)行完畢,該對象也隨之銷毀。
可以看到,全局變量會被活動對象推到作用域鏈的最后端,這也就是為什么全局變量訪問速度慢的原因!
with
一般情況下,作用域鏈只會被with和catch語句影響。當(dāng)使創(chuàng)建用with的時候,函數(shù)會創(chuàng)建一個新的活動對象,推到最前端,該對象就是with的對象。這就意味著所有的局部變量都處于第二個作用域鏈對象中去了,這也就是為什么要避免使用with的原因。
以上所述是小編給大家介紹的JavaScript中with語句的理解,希望對大家有所幫助,如果大家想了解更多資訊敬請關(guān)注腳本之家網(wǎng)站!
相關(guān)文章
Javascript拖拽&拖放系列文章3之細(xì)說事件對象
Javascript中的事件對象其實和.NET中繼承自EventArgs類的派生類類似,用來給事件處理程序傳遞狀態(tài)信息,從而進(jìn)行相應(yīng)的操作。這一篇文章將講述Javascript事件對象中和實現(xiàn)拖拽功能相關(guān)的幾個屬性,并在最后將IE事件模型和標(biāo)準(zhǔn)DOM事件模型的差異封裝到一個類中,從而適應(yīng)所有的瀏覽器。2008-09-09
JavaScript中SetInterval與setTimeout的用法詳解
在寫H5游戲時經(jīng)常需要使用定時刷新頁面實現(xiàn)動畫效果,比較常用即setTimeout()以及setInterval(),但是大家對SetInterval與setTimeout的用法了解嗎,下面通過本文給大家詳解js中SetInterval與setTimeout的用法,需要的朋友參考下2015-11-11
學(xué)習(xí)JavaScript設(shè)計模式之單例模式
這篇文章主要為大家介紹了JavaScript設(shè)計模式中的單例模式,對JavaScript設(shè)計模式感興趣的小伙伴們可以參考一下2016-01-01
純JavaScript實現(xiàn)實時反饋系統(tǒng)時間
這篇文章主要介紹了純JavaScript實現(xiàn)實時反饋系統(tǒng)時間的相關(guān)資料,需要的朋友可以參考下2017-10-10

