深入淺析JavaScript中with語(yǔ)句的理解
JavaScript 有個(gè) with 關(guān)鍵字, with 語(yǔ)句的原本用意是為逐級(jí)的對(duì)象訪問(wèn)提供命名空間式的速寫(xiě)方式. 也就是在指定的代碼區(qū)域, 直接通過(guò)節(jié)點(diǎn)名稱調(diào)用對(duì)象.
with語(yǔ)句的作用是暫時(shí)改變作用域鏈、減少的重復(fù)輸入。
其語(yǔ)法結(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)的寫(xiě)法是:
document.forms[].name.value = "lee king"; document.forms[].address.value = "Peking"; document.forms[].zipcode.value = "";
可以看出with語(yǔ)句的簡(jiǎn)潔明了,不過(guò)在代碼的世界里是很難找到真正的完美。
js的解釋器需要檢查with塊中的變量是否屬于with包含的對(duì)象,這將使with語(yǔ)句執(zhí)行速度大大下降,并且導(dǎo)致js語(yǔ)句很難被優(yōu)化。為了兼顧速度與代碼量可以找到一個(gè)比較折衷的方案:
var form = document.forms[]; form.name.value = "lee king"; form.address.value = "Peking"; form.zipcode.value = "";
所以在以后的高效代碼開(kāi)發(fā)中我們應(yīng)該盡可能的避免使用with語(yǔ)句。
經(jīng)過(guò)測(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 }從作用域鏈來(lái)分析
在javascript中,函數(shù)也是對(duì)象,實(shí)際上,javascript中的一切都是對(duì)象。函數(shù)內(nèi)部有一個(gè)只給javascript引擎訪問(wèn)的內(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ì)象推到作用域鏈的最后端,這也就是為什么全局變量訪問(wèn)速度慢的原因!
with
一般情況下,作用域鏈只會(huì)被with和catch語(yǔ)句影響。當(dāng)使創(chuàng)建用with的時(shí)候,函數(shù)會(huì)創(chuàng)建一個(gè)新的活動(dòng)對(duì)象,推到最前端,該對(duì)象就是with的對(duì)象。這就意味著所有的局部變量都處于第二個(gè)作用域鏈對(duì)象中去了,這也就是為什么要避免使用with的原因。
以上所述是小編給大家介紹的JavaScript中with語(yǔ)句的理解,希望對(duì)大家有所幫助,如果大家想了解更多資訊敬請(qǐng)關(guān)注腳本之家網(wǎng)站!
相關(guān)文章
通過(guò)函數(shù)作用域和塊級(jí)作用域看javascript的作用域鏈
這篇文章給大家分享了通過(guò)函數(shù)作用域和塊級(jí)作用域看javascript的作用域鏈的相關(guān)知識(shí)點(diǎn)內(nèi)容,有興趣的朋友參考學(xué)習(xí)下。2018-08-08基于jquery實(shí)現(xiàn)的省市區(qū)級(jí)聯(lián)無(wú)ajax
省市區(qū)級(jí)聯(lián)的實(shí)現(xiàn)方法有很多,在本文為大家介紹下如何使用jquery無(wú)ajax來(lái)實(shí)現(xiàn),感興趣的朋友可以參考下,希望對(duì)大家有所幫助2013-09-09javascript事件的綁定基礎(chǔ)實(shí)例講解(34)
這篇文章主要為大家詳細(xì)介紹了javascript事件的綁定基礎(chǔ)實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02JavaScript實(shí)現(xiàn)商品放大鏡效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)商品放大鏡效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10javascript 通過(guò)鍵名獲取鍵盤的keyCode方法
下面小編就為大家分享一篇javascript 通過(guò)鍵名獲取鍵盤的keyCode方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12javascript中的previousSibling和nextSibling的正確用法
這篇文章主要介紹了javascript中的previousSibling和nextSibling的正確用法的相關(guān)資料,需要的朋友可以參考下2015-09-09詳解微信小程序 頁(yè)面跳轉(zhuǎn) 傳遞參數(shù)
這篇文章主要介紹了詳解微信小程序 頁(yè)面跳轉(zhuǎn) 傳遞參數(shù),現(xiàn)在分享給大家,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2016-12-12