DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> javascript中的作用域和閉包詳解
javascript中的作用域和閉包詳解
編輯:關於JavaScript     

一、JavaScript作用域

JavaScript變量實際上只有兩種作用域,全局變量和函數的內部變量。在函數內部任何一個地方定義的變量(var scope)其作用域都是整個函數體。
全局變量:指的是window對象下的對象屬性。
作用域劃分:基於上下文,以函數進行劃分的,而不是由塊劃分的。
強調兩點:
1. 在同一作用域中,JavaScript是允許變量的重復定義,並且後一個定義將覆蓋前一個定義。
2. 函數內部如果不加關鍵字var而定義的變量,默認為全局變量。

var scope="global"; 
function t(){ 
  console.log(scope); //"global" 
  scope="local" 
  console.log(scope); //"local" 
} 
t(); 
console.log(scope); //"local" 




var scope="global"; 
function t(){ 
  console.log(scope); //"undefined" 
  var scope="local" 
  console.log(scope); //"local" 
} 
t(); 
console.log(scope); //"global" 

在變量解析過程中首先查找局部的作用域,然後查找上層作用域。在第一段代碼的函數當中沒有定義變量scope,於是查找上層作用域(全局作用域),進而進行輸出其值。但是在第二段代碼的函數內定義了變量scope(無論是在console之後還是之前定義變量,都認為在此作用域擁有變量scope),於是不再向上層的作用域進行查找,直接輸出scope。但是不幸的是此時的局部變量i並沒有賦值,所以輸出的是undefined。

//所以根據函數作用域的意思,可以將上述第二段代碼重寫如下: 
var scope="global"; 
function t(){ 
  var scope; 
  console.log(scope); 
  scope="local" 
  console.log(scope); 
} 
t(); 

由於函數作用域的特性,局部變量在整個函數體始終是由定義的,我們可以將變量聲明”提前“到函數體頂部。

var b; //第1步 
function fun(){  
  b = "change";  
}  
alert(b);//輸出undefined,由於第1步只定義未賦值 
 
 
var b; //第1步 
function fun(){  
  b = "change";  
} 
fun(); //調用上述函數 
alert(b); //輸出change 

當使用var聲明一個變量時,創建的這個屬性是不可配置的,也就是說無法通過delete運算符刪除。
二、作用域實例

<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>

當注冊事件結束後,i的值為4,當點擊按鈕時,事件函數即function(){ alert("Button"+i);}這個匿名函數中沒有i,根據作用域鏈,所以到buttonInit函數中找,此時i的值為4,所以彈出”button4“。
三、javaScript閉包
在js中,閉包主要涉及到js的幾個其他的特性:作用域鏈,垃圾(內存)回收機制,函數嵌套,等等。
1. 作用域鏈:簡單來說,作用域鏈就是函數在定義的時候創建的,用於尋找使用到的變量的值的一個索引,而他內部的規則是,把函數自身的本地變量放在最前面,把自身的父級函數中的變量放在其次,把再高一級函數中的變量放在更後面,以此類推直至全局對象為止。當函數中需要查詢一個變量的值的時候,js解釋器會去作用域鏈去查找,從最前面的本地變量中先找,如果沒有找到對應的變量,則到下一級的鏈上找,一旦找到了變量,則不再繼續。如果找到最後也沒找到需要的變量,則解釋器返回undefined。
2. Javascript的垃圾回收機制:在Javascript中,如果一個對象不再被引用,那麼這個對象就會被GC回收。如果兩個對象互相引用,而不再被第3者所引用,那麼這兩個互相引用的對象也會被回收。因為函數a被b引用,b又被a外的c引用,這就是為什麼函數a執行後不會被回收的原因。構建一個閉包,這些變量將不會被內存回收器所回收,只有當內部的函數不被調用以後,才會銷毀這個閉包,而沒有任何一個閉包引用的變量才會被下一次內存回收啟動時所回收。
3. 有了閉包,嵌套的函數結構才可以運作
四、利用js閉包實現循環綁定事件

<html> 
<head> 
  <title>閉包</title> 
</head> 
<body> 
  <ul id="list"> 
    <li>第1條記錄</li> 
    <li>第2條記錄</li> 
    <li>第3條記錄</li> 
    <li>第4條記錄</li> 
    <li>第5條記錄</li> 
    <li>第6條記錄</li> 
  </ul> 
  <script type="text/javascript"> 
    function tt(nob) { 
      this.clickFunc = function() { 
        alert("這是第" + (nob + 1) + "記錄"); 
      } 
    } 
    var list_obj = document.getElementById("list").getElementsByTagName("li"); //獲取list下面的所有li的對象數組 
    for (var i = 0; i<= list_obj.length; i++){ 
      console.log(list_obj[i]) 
      list_obj[i].onmousemove = function(){ 
        this.style.backgroundColor = "#cdcdcd"; 
      } 
      list_obj[i].onmouseout = function() { 
        this.style.backgroundColor = "#FFFFFF"; 
      } 
      //list_obj[i].onclick = function() { 
      // alert("這是第" + i + "記錄"); //不能正常獲取 alert出來的都是:“這是第6記錄” 
      //} 
      var col = new tt(i); //調用tt函數 
      list_obj[i].onclick = col.clickFunc; //執行clickFunc函數 
    } 
  </script> 
</body> 
</html> 

以上就是本文的全部內容,希望對大家學習javascript程序設計有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved