快捷導(dǎo)航

深入淺析JavaScript中with語句的理解

更新時(shí)間：2016年05月12日 14:05:43 作者：sarah

JavaScript 有個(gè) with 關(guān)鍵字, with 語句的原本用意是為逐級(jí)的對(duì)象訪問提供命名空間式的速寫方式。這篇文章主要介紹了JavaScript中with語句的相關(guān)知識(shí)，感興趣的朋友一起學(xué)習(xí)吧

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

with語句的作用是暫時(shí)改變作用域鏈、減少的重復(fù)輸入。

其語法結(jié)構(gòu)為：

with(object){ 
//statements 
}

舉一個(gè)實(shí)際例子吧：

with(document.forms[]){ 
name.value = "lee king"; 
address.value = "Peking"; 
zipcode.value = ""; 
}

與之對(duì)應(yīng)的傳統(tǒng)的寫法是：

document.forms[].name.value = "lee king"; 
document.forms[].address.value = "Peking"; 
document.forms[].zipcode.value = "";

可以看出with語句的簡(jiǎn)潔明了，不過在代碼的世界里是很難找到真正的完美。

js的解釋器需要檢查with塊中的變量是否屬于with包含的對(duì)象，這將使with語句執(zhí)行速度大大下降，并且導(dǎo)致js語句很難被優(yōu)化。為了兼顧速度與代碼量可以找到一個(gè)比較折衷的方案：

var form = document.forms[]; 
form.name.value = "lee king"; 
form.address.value = "Peking"; 
form.zipcode.value = "";

所以在以后的高效代碼開發(fā)中我們應(yīng)該盡可能的避免使用with語句。

經(jīng)過測(cè)試：

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ù)也是對(duì)象，實(shí)際上，javascript中的一切都是對(duì)象。函數(shù)內(nèi)部有一個(gè)只給javascript引擎訪問的內(nèi)部屬性是[[scope]]，該屬性包含了函數(shù)創(chuàng)建時(shí)的作用域中對(duì)象的集合，這個(gè)集合就叫做作用域鏈。

比如下面代碼：

function add(num1,num2) { 
var sum = num1 + num2; 
return sum; 
}

在函數(shù)創(chuàng)建時(shí)，它的作用域鏈中會(huì)填入一個(gè)全局對(duì)象，該全局對(duì)象包含了所有全局變量，如下圖：

當(dāng)函數(shù)被執(zhí)行時(shí)，會(huì)創(chuàng)建一個(gè)活動(dòng)對(duì)象，該對(duì)象包含了函數(shù)所有局部變量、命名參數(shù)以及this，然后該對(duì)象會(huì)被推入作用域鏈的前端，當(dāng)函數(shù)執(zhí)行完畢，該對(duì)象也隨之銷毀。

可以看到，全局變量會(huì)被活動(dòng)對(duì)象推到作用域鏈的最后端，這也就是為什么全局變量訪問速度慢的原因！

with

一般情況下，作用域鏈只會(huì)被with和catch語句影響。當(dāng)使創(chuàng)建用with的時(shí)候，函數(shù)會(huì)創(chuàng)建一個(gè)新的活動(dòng)對(duì)象，推到最前端，該對(duì)象就是with的對(duì)象。這就意味著所有的局部變量都處于第二個(gè)作用域鏈對(duì)象中去了，這也就是為什么要避免使用with的原因。

以上所述是小編給大家介紹的JavaScript中with語句的理解，希望對(duì)大家有所幫助，如果大家想了解更多資訊敬請(qǐng)關(guān)注腳本之家網(wǎng)站！

您可能感興趣的文章: