首頁 > 開發者 > 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程式設計有所協助。
您可能感興趣的文章:Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
