JavaScript閉包的解析（附程式碼）

這篇文章帶給大家的內容是關於JavaScript閉包的解析（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

閉包是指有權存取另一個函數作用域中的變數的函數。建立閉包的常見方式，就是在一個函數內部建立另一個函數。了解閉包前首先需要了解變數作用域

變數作用域：全域變數與局部變數
1、全域變數
直接定義在全域作用域的變數

var name='Fakin';
function getName(){
  alert(name)
}
getName()//'Fakin'

而函數可以直接讀取全域變數

2、局部變數
直接定義在函數內部的變數（在ES6之前JS是沒有區塊級作用域的。 ）

function getName(){
  var name='Fakin';
}
alert(name)//undefined

閉包
搞清楚了這兩個東西後咱們在來看下閉包是什麼回事！

問題1：閉包是個啥玩意，上面說了一堆，我看不懂啊？
答：閉包個人理解就是能讀取其他函數內部變數的函數

問題2：閉包怎麼用
答：在一個函數的內部在建立一個函數，在這個函數中引用上一函數的變量，最後講這個函數返回即可，是不是很繞，下面給例子

function f1(){
　　　　var n=999;
　　　　nAdd=function(){n+=1}
　　　　function f2(){
　　　　　　alert(n);
　　　　}
　　　　return f2;
　　}
　　var result=f1();
　　result(); // 999
　　nAdd();
　　result(); // 1000

如上例子中f2就是閉包函數，在f1中返回函數f2，最後把f1賦值給result,result一共運行了兩次，結果也得出了咱們想要的，也就證明了，在閉包中f2引用了f1的變數'n'而'n'沒有因為f1執行完畢後然後在記憶體中銷毀，大家應該知道，在JS中如果一個變數在函數執行完後沒有被其他地方給引用的話，是就自動銷毀的。

使用閉包需要注意的地方

1：由於閉包會讓函數中的變數都保存在記憶體中，記憶體使用量很大，會造成渲染卡頓等等，瀏覽器運行慢，在IE瀏覽器中還會造成內存洩露等問題
2：由於在閉包中子函數引用父函數的變量，子函數會修改父函數變量，請不要隨意修改父函數變數的值

思考題

function count() {
    var arr = [];
    for (var i=1; i<=3; i++) {
        arr.push(function () {
            return i * i;
        });
    }
    return arr;
}

var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];
f1(); // 16
f2(); // 16
f3(); // 16

為什麼f1 f2 f3都回傳的是同一個值，而不是我們想要的？那怎麼能不能閉包來解決呢？
其實也很簡單，咱們閉包多兩行程式碼就行

function count() {
    var arr = [];
    for (var i=1; i<=3; i++) {
        arr.push((function (n) {
            return function () {
                return n * n;
            }
        })(i));
       //在自执行函数中把i传入相当于这个自执行函数的参数绑定了i，
       //当每次循环的时候不管变量怎么更改，这个函数的参数不会更改，所以返回咱们想要的结果
    }
    return arr;
}

var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];

f1(); // 1
f2(); // 4
f3(); // 9

以上是JavaScript閉包的解析（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！