javascript作用域和作用域鏈詳解
更新時(shí)間:2022年01月23日 15:41:14 作者:賣(mài)菜的小白
這篇文章主要為大家介紹了javascript作用域和作用域鏈,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助
一、javascript的作用域
1、全局作用域
1、最外層函數(shù)和最外層函數(shù)定義的變量 var age = 20 function func1() { var sex = "男" function func2() { console.log("hello func2") } func2() } console.log(age) //20 console.log(func1) //正常執(zhí)行 console.log(func2) //報(bào)錯(cuò) console.log(sex) //報(bào)錯(cuò)
2、所有未直接聲明的變量,直接賦值為全局變量 function func1() { var age = 20 sex = "男" } func1() console.log(sex) //男 console.log(age) //報(bào)錯(cuò)
3、window對(duì)象上面的屬性具有全局作用域 function func1() { var age = 20 sex = "男" console.log(top) //window.... } func1() console.log(sex) //"男" console.log(top) //window....
2、局部作用域
和全局作用域相反,局部作用域只在函數(shù)內(nèi)部可以訪問(wèn)到。function func1() { var age = 20 func1() function func1() { console.log("func1") }}func1()和全局作用域相反,局部作用域只在函數(shù)內(nèi)部可以訪問(wèn)到。 function func1() { var age = 20 func1() function func1() { console.log("func1") } } func1()
二、javascript的作用域鏈
函數(shù)也是對(duì)象,在函數(shù)內(nèi)部存在一個(gè)屬性[[scope]],該屬性包含可以訪問(wèn)屬性的集合。決定了哪些屬性在函數(shù)中可以訪問(wèn)到。
下面我們以一個(gè)函數(shù)的例子來(lái)詳細(xì)解說(shuō)一下,函數(shù)作用域鏈。 1、在函數(shù)函數(shù)創(chuàng)建出來(lái)時(shí)。代碼如下所示 function add(num1, num2) { return num1 + num2 }
函數(shù)初始化時(shí),會(huì)將自己的作用域鏈中放入全局變量
var total = add(10, 20) 這里是函數(shù)執(zhí)行時(shí),當(dāng)執(zhí)行時(shí)會(huì)創(chuàng)建一個(gè)新的對(duì)象放入作用域鏈中,這個(gè)對(duì)象中包括 arguments, 形參,this,以及返回值。
active object是活躍對(duì)象,是函數(shù)執(zhí)行時(shí)創(chuàng)建的對(duì)象,然后scope chain類(lèi)似于棧結(jié)構(gòu),函數(shù)執(zhí)行前壓入棧中,函數(shù)執(zhí)行結(jié)束就從棧中彈出。函數(shù)訪問(wèn)屬性的過(guò)程就是沿著scope chain從上往下一次查找。
三、作用域鏈和優(yōu)化
從上面的例子中,我們可以看出,訪問(wèn)全局作用域是最慢的,因?yàn)樾枰来螐纳贤逻M(jìn)行查找,應(yīng)當(dāng)盡可能少的使用全局變量,應(yīng)該盡可能使用局部變量。如果在函數(shù) 中,使用多次全局變量,我們可以將全局變量轉(zhuǎn)化為局部變量,然后在使用局部變量。
function changeColor(){ document.getElementById("btnChange").onclick=function(){ document.getElementById("targetCanvas").style.backgroundColor="red"; }; } 上面代碼我們使用了兩次document,但是document作為全局變量,此時(shí)我們應(yīng)該將其轉(zhuǎn)化為局部變量來(lái)使用,所以下面為轉(zhuǎn)化后的代碼。 function changeColor(){ var doc=document; doc.getElementById("btnChange").onclick=function(){ doc.getElementById("targetCanvas").style.backgroundColor="red"; }; }
四、改變作用域鏈
1、with語(yǔ)法改變作用域鏈
with語(yǔ)法的作用就是為了解決代碼重寫(xiě)問(wèn)題,是對(duì)象快捷書(shū)寫(xiě)方式,但是這么好的方式,為什么不大力推廣使用呢?因?yàn)樾阅艽嬖谝恍﹩?wèn)題。function initUI(){ with(document){ var bd=body, links=getElementsByTagName("a"), i=0, len=links.length; while(i < len){ update(links[i++]); } getElementById("btnInit").onclick=function(){ doSomething(); }; }}這里使用with語(yǔ)法省略了document。with語(yǔ)法的作用就是為了解決代碼重寫(xiě)問(wèn)題,是對(duì)象快捷書(shū)寫(xiě)方式,但是這么好的方式,為什么不大力推廣使用呢? 因?yàn)樾阅艽嬖谝恍﹩?wèn)題。 function initUI(){ with(document){ var bd=body, links=getElementsByTagName("a"), i=0, len=links.length; while(i < len){ update(links[i++]); } getElementById("btnInit").onclick=function(){ doSomething(); }; } } 這里使用with語(yǔ)法省略了document。
with傳入的對(duì)象的屬性放入最上層,剩余的都往下壓,導(dǎo)致局部變量的訪問(wèn)代價(jià)增大,所以with的性能不好。
2、catch語(yǔ)法
我們?cè)谑褂胻ry--catch時(shí),當(dāng)代碼執(zhí)行錯(cuò)誤時(shí),會(huì)執(zhí)行catch函數(shù),catch函數(shù)中參數(shù)是錯(cuò)誤對(duì)象,就是這個(gè)錯(cuò)誤對(duì)象,會(huì)放到作用域鏈的頭部。 但是try--catch我們?cè)诒匾氖褂玫檬褂茫覀兛梢赃@樣解決。 try{ doSomething(); }catch(ex){ alert(ex.message); //作用域鏈在此處改變 } 處理后: try{ doSomething(); }catch(ex){ handleError(ex); //委托給處理器方法 } 解決方案是:將catch錯(cuò)誤處理交給另外一個(gè)函數(shù)進(jìn)行處理。
總結(jié)
本篇文章就到這里了,希望能夠給你帶來(lái)幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
javascript實(shí)現(xiàn)的圖片切割多塊效果實(shí)例
這篇文章主要介紹了javascript實(shí)現(xiàn)的圖片切割多塊效果,涉及javascript操作圖片及css樣式的技巧,需要的朋友可以參考下2015-05-05jquery和javascript的區(qū)別(常用方法比較)
jquery 就對(duì)javascript的一個(gè)擴(kuò)展,封裝,就是讓javascript更好用,更簡(jiǎn)單,為了說(shuō)明區(qū)別,下面與大家分享下JavaScript 與JQuery 常用方法比較2013-07-07JavaScript基礎(chǔ)知識(shí)之?dāng)?shù)據(jù)類(lèi)型
JavaScript中有5種簡(jiǎn)單數(shù)據(jù)類(lèi)型(也稱為基本數(shù)據(jù)類(lèi)型):Undefined、Null、Boolean、Number和String。還有1種復(fù)雜數(shù)據(jù)類(lèi)型——Object,Object本質(zhì)上是由一組無(wú)序的名值對(duì)組成的2012-08-08JavaScript中的分號(hào)插入機(jī)制詳細(xì)介紹
這篇文章主要介紹了JavaScript中的分號(hào)插入機(jī)制詳細(xì)介紹,本文講解JavaScript中各種情況下的分號(hào)插入機(jī)制,需要的朋友可以參考下2015-02-02javascript 基礎(chǔ)篇1 什么是js 建立第一個(gè)js程序
javascript是很多東西的基礎(chǔ),比如jsp,ajax等,如果不會(huì)這么,那么學(xué)起這些來(lái)就比較麻煩,所以要先學(xué)好這個(gè),為將來(lái)的學(xué)習(xí)打好經(jīng)濟(jì)基礎(chǔ)2012-03-03