javascript作用域和作用域鏈詳解
更新時間:2022年01月23日 15:41:14 作者:賣菜的小白
這篇文章主要為大家介紹了javascript作用域和作用域鏈,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
一、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)錯
console.log(sex) //報(bào)錯
2、所有未直接聲明的變量,直接賦值為全局變量
function func1() {
var age = 20
sex = "男"
}
func1()
console.log(sex) //男
console.log(age) //報(bào)錯
3、window對象上面的屬性具有全局作用域
function func1() {
var age = 20
sex = "男"
console.log(top) //window....
}
func1()
console.log(sex) //"男"
console.log(top) //window....
2、局部作用域
和全局作用域相反,局部作用域只在函數(shù)內(nèi)部可以訪問到。function func1() { var age = 20 func1() function func1() { console.log("func1") }}func1()和全局作用域相反,局部作用域只在函數(shù)內(nèi)部可以訪問到。
function func1() {
var age = 20
func1()
function func1() {
console.log("func1")
}
}
func1()
二、javascript的作用域鏈
函數(shù)也是對象,在函數(shù)內(nèi)部存在一個屬性[[scope]],該屬性包含可以訪問屬性的集合。決定了哪些屬性在函數(shù)中可以訪問到。
下面我們以一個函數(shù)的例子來詳細(xì)解說一下,函數(shù)作用域鏈。
1、在函數(shù)函數(shù)創(chuàng)建出來時。代碼如下所示
function add(num1, num2) {
return num1 + num2
}

函數(shù)初始化時,會將自己的作用域鏈中放入全局變量
var total = add(10, 20) 這里是函數(shù)執(zhí)行時,當(dāng)執(zhí)行時會創(chuàng)建一個新的對象放入作用域鏈中,這個對象中包括 arguments, 形參,this,以及返回值。

active object是活躍對象,是函數(shù)執(zhí)行時創(chuàng)建的對象,然后scope chain類似于棧結(jié)構(gòu),函數(shù)執(zhí)行前壓入棧中,函數(shù)執(zhí)行結(jié)束就從棧中彈出。函數(shù)訪問屬性的過程就是沿著scope chain從上往下一次查找。
三、作用域鏈和優(yōu)化
從上面的例子中,我們可以看出,訪問全局作用域是最慢的,因?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作為全局變量,此時我們應(yīng)該將其轉(zhuǎn)化為局部變量來使用,所以下面為轉(zhuǎn)化后的代碼。
function changeColor(){
var doc=document;
doc.getElementById("btnChange").onclick=function(){
doc.getElementById("targetCanvas").style.backgroundColor="red";
};
}
四、改變作用域鏈
1、with語法改變作用域鏈
with語法的作用就是為了解決代碼重寫問題,是對象快捷書寫方式,但是這么好的方式,為什么不大力推廣使用呢?因?yà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語法省略了document。with語法的作用就是為了解決代碼重寫問題,是對象快捷書寫方式,但是這么好的方式,為什么不大力推廣使用呢?
因?yà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語法省略了document。

with傳入的對象的屬性放入最上層,剩余的都往下壓,導(dǎo)致局部變量的訪問代價增大,所以with的性能不好。
2、catch語法
我們在使用try--catch時,當(dāng)代碼執(zhí)行錯誤時,會執(zhí)行catch函數(shù),catch函數(shù)中參數(shù)是錯誤對象,就是這個錯誤對象,會放到作用域鏈的頭部。
但是try--catch我們在必要的使用得使用,我們可以這樣解決。
try{
doSomething();
}catch(ex){
alert(ex.message); //作用域鏈在此處改變
}
處理后:
try{
doSomething();
}catch(ex){
handleError(ex); //委托給處理器方法
}
解決方案是:將catch錯誤處理交給另外一個函數(shù)進(jìn)行處理。
總結(jié)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
每個程序員都需要學(xué)習(xí) JavaScript 的7個理由小結(jié)
這篇文章主要介紹了每個程序員都需要學(xué)習(xí) JavaScript 的7個理由小結(jié),需要的朋友可以參考下2016-09-09
詳解在網(wǎng)頁上通過JS實(shí)現(xiàn)文本的語音朗讀
這篇文章主要介紹了在網(wǎng)頁上通過JS實(shí)現(xiàn)文本的語音朗讀,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03

