理解javascript作用域鏈

JavaScript的作用域:

作用域,在維基百科上解釋是:在電腦程序設(shè)計中,作用域(scope,或譯作有效范圍)是名字(name)與實體(entity)的綁定(binding)保持有效的那部分計算機(jī)程序。
簡單的說,作用域就是變量與函數(shù)的可訪問范圍,即作用域控制著變量與函數(shù)的可見性和生命周期。在JavaScript中,變量的作用域有全局作用域和局部作用域兩種,局部作用域又稱為函數(shù)作用域。

全局作用域:

在代碼中任何地方都能訪問到的對象擁有全局作用域,一般來說以下幾種情形擁有全局作用域:

1:程序最外層定義的函數(shù)或者變量

var a = "tsrot";
function hello(){
    alert(a);
}

function sayHello(){
    hello();
}

alert(a);     //能訪問到tsrot
hello();      //能訪問到tsrot
sayHello();   //能訪問到hello函數(shù),然后也能訪問到tsrot

2:所有window對象的屬性和方法

一般情況下,window對象的內(nèi)置屬性都擁有全局作用域,例如window.name、window.location、window.top等等。


局部作用域(函數(shù)作用域)

局部作用域在函數(shù)內(nèi)創(chuàng)建,在函數(shù)內(nèi)可訪問,函數(shù)外不可訪問。

function hello(){
    var a = "tsrot";
    alert(a);
}

hello(); //函數(shù)內(nèi)可訪問到tsrot
alert(a); //error not defined

作用域鏈?zhǔn)鞘裁矗?/h2>

了解作用域鏈之前我們要知道一下幾個概念:

  • 變量和函數(shù)的聲明
  • 函數(shù)的生命周期
  • Activetion Object(AO)、Variable Object(VO)

變量和函數(shù)的聲明

在JavaScript引擎解析JavaScript代碼的時候,首先,JavaScript引擎會把變量和函數(shù)的聲明提前進(jìn)行預(yù)解析,然后再去執(zhí)行其他代碼。

變量聲明:變量的聲明只有一種方式,那就是用var關(guān)鍵字聲明,直接賦值不是一種聲明方式。這僅僅是在全局對象上創(chuàng)建了新的屬性(而不是變量)。它們有一下區(qū)別:

(1)因為它只是一種賦值,所以不會聲明提前
alert(a); // undefined
alert(b); // error "b" is not defined
b = 10;
var a = 20;
(2)直接賦值形式是在執(zhí)行階段創(chuàng)建
alert(a); // undefined, 這個大家都知道
b = 10;
alert(b); // 10, 代碼執(zhí)行階段創(chuàng)建
 
var a = 20;
alert(a); // 20, 代碼執(zhí)行階段修改
(3)變量不能刪除(delete),屬性可以刪除
a = 10;
alert(window.a); // 10
 
alert(delete a); // true
 
alert(window.a); // undefined
 
var b = 20;
alert(window.b); // 20
 
alert(delete b); // false
 
alert(window.b); // 仍然為 20,因為變量是不能夠刪除的。

函數(shù)聲明:函數(shù)的聲明有三種方式

(1)function name( ){ }直接創(chuàng)建方式

function add(a,b){
    return a+b;
}

add(5,4);

(2)new Funtion構(gòu)建函數(shù)創(chuàng)建

var add=new Function("a", "b", "return a+b;");

add(4,5);

(3)給變量賦值匿名函數(shù)方法創(chuàng)建

var add = function(a,b){
    return a+b;
}

add(4,5);

后面兩種方法,在聲明前訪問時,返回的都是一個undefined的變量。當(dāng)然,在聲明后訪問它們都是一個function的函數(shù)。

注意 :如果變量名和函數(shù)名聲明時相同,函數(shù)優(yōu)先聲明。

JavaScript作用域鏈

作用域就是變量與函數(shù)的可訪問范圍。在JavaScript中,變量的作用域有全局作用域和局部作用域兩種。

執(zhí)行環(huán)境(execution context)

每個函數(shù)運行時都會產(chǎn)生一個執(zhí)行環(huán)境,而這個執(zhí)行環(huán)境怎么表示呢?js為每一個執(zhí)行環(huán)境關(guān)聯(lián)了一個變量對象。環(huán)境中定義的所有變量和函數(shù)都保存在這個對象中。
全局執(zhí)行環(huán)境是最外圍的執(zhí)行環(huán)境,全局執(zhí)行環(huán)境被認(rèn)為是window對象,因此所有的全局變量和函數(shù)都作為window對象的屬性和方法創(chuàng)建的。
js的執(zhí)行順序是根據(jù)函數(shù)的調(diào)用來決定的,當(dāng)一個函數(shù)被調(diào)用時,該函數(shù)環(huán)境的變量對象就被壓入一個環(huán)境棧中。而在函數(shù)執(zhí)行之后,棧將該函數(shù)的變量對象彈出,把控制權(quán)交給之前的執(zhí)行環(huán)境變量對象。
舉個例子:

 <script>
      var scope = "global"; 
      function fn1(){
         return scope; 
      }
      function fn2(){
         return scope;
      }
      fn1();
      fn2();
   </script>

上面代碼執(zhí)行情況演示:


1.jpg

一般來說,當(dāng)某個環(huán)境中的所有代碼執(zhí)行完畢后,該環(huán)境被銷毀(彈出環(huán)境棧),保存在其中的所有變量和函數(shù)也隨之銷毀(全局執(zhí)行環(huán)境變量直到應(yīng)用程序退出,如網(wǎng)頁關(guān)閉才會被銷毀)
但是像上面那種有內(nèi)部函數(shù)的又有所不同,當(dāng)outer()函數(shù)執(zhí)行結(jié)束,執(zhí)行環(huán)境被銷毀,但是其關(guān)聯(lián)的活動對象并沒有隨之銷毀,而是一直存在于內(nèi)存中,因為該活動對象被其內(nèi)部函數(shù)的作用域鏈所引用。

我們再來看一段代碼:
name="lwy";
function t(){
    var name="tlwy";
    function s(){
        var name="slwy";
        console.log(name);
    }
    function ss(){
        console.log(name);
    }
    s();
    ss();
}
t();

當(dāng)執(zhí)行s時,將創(chuàng)建函數(shù)s的執(zhí)行環(huán)境(調(diào)用對象),并將該對象置于鏈表開頭,然后將函數(shù)t的調(diào)用對象鏈接在之后,最后是全局對象。然后從鏈表開頭尋找變量name,很明顯
name是"slwy"。

但執(zhí)行ss()時,作用域鏈?zhǔn)牵?ss()->t()->window,所以name是”tlwy"

下面看一個很容易犯錯的例子:

<html>
<head>
<script type="text/javascript">
function buttonInit(){
    for(var i=1;i<4;i++){
        var b=document.getElementById("button"+i);
        b.addEventListener("click",function(){ alert("Button"+i);},false);
    }
}
window.onload=buttonInit;
</script>
</head>
<body>
<button id="button1">Button1</button>
<button id="button2">Button2</button>
<button id="button3">Button3</button>
</body>
</html>

當(dāng)文檔加載完畢,給幾個按鈕注冊點擊事件,當(dāng)我們點擊按鈕時,會彈出什么提示框呢?
很容易犯錯,對是的,三個按鈕都是彈出:"Button4",你答對了嗎?

當(dāng)注冊事件結(jié)束后,i的值為4,當(dāng)點擊按鈕時,事件函數(shù)即function(){ alert("Button"+i);}這個匿名函數(shù)中沒有i,根據(jù)作用域鏈,所以到buttonInit函數(shù)中找,此時i的值為4,

所以彈出”button4“。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容