搞懂JS閉包

閉包(Closure)是JS比較難懂的一個東西，或者說別人說的難以理解， 本文將以簡潔的語言+面試題來深刻淺出地介紹一下。

做用域和做用域鏈

在將閉包以前，須要先講一下做用域。

JS中有全局做用域和局部做用域兩種。

全局做用域任何地方都能訪問，而局部做用於只有內部能訪問。

function a() {
  var num = 1;
}
console.log(num);

在上面的例子中會報錯，num不存在。

總結：函數外部沒法訪問函數內部的值

當代碼在一個做用域中執行時，JS引擎會默認建立一個做用域鏈(從當前做用域一直連接到全局做用域)。

在訪問變量或者函數時，若是當前做用域查找不到，則向上級做用域查找，找到就返回，若是查找到全局做用域還沒找到的話就報錯。

function a() {
  var num = 1;
  function b() {
    console.log(num);
  }
}

在上面的例子中，num是在a函數做用域下的局部變量，咱們在b函數訪問num時會有如下過程：

1. 在b的做用域查找num，發現找不到
2. 往上一級做用域查找，發現num在a做用域，查找成功

總結：函數能夠訪問同級或上級做用域的值

閉包

當咱們須要在函數外部訪問函數內部的值時，閉包就產生了。

function a() {
  var num = 1;
  function b () {
    console.log(num);
  }
  return b;
}
var bb = a();
bb(); // 1

在函數 a的內部聲明一個函數 b，而後把 return b，這個時候的 b()函數就能夠在外部訪問，最終可以訪問到num。

簡單來講：

閉包就是函數內部的函數，上面的那個b就是閉包，能夠在外面訪問到內部的num

面試題

// 每隔1秒輸出0-10的數字
for(var i = 0;i<10;i++) {
  setTimeout(function() {
    console.log(i);
  },1000);
}
// 上面這段代碼輸出什麼?若是須要修改成正確的狀況，怎麼修改？

1秒後輸出10，由於setTimeout是到下一輪tick中執行，而for循環在當前這輪循環完畢後i的值已是最後一個值了。須要使用閉包來保留現場

for (var i = 0; i < 10; i++) {
    (function (i) {
        setTimeout(function () {
            console.log(i);
        }, 1000);
    }(i))
}

這樣就是正常的輸出了。

var name = "Window";

var object = {
    name: "Object",

    f: function () {
        return function () {
            return this.name;
        };

    }

};

alert(object.f()());

答案是Window。

object.getNameFunc()()能夠分開兩部分來看。

1. object.f()獲得了一個這樣的函數

function() {
  return this.name
}

1. object.f()()至關於執行上面那個函數，也就是普通函數調用方式，this指向全局環境，this指向搞不清楚的同窗能夠看看我以前發的Javavscript基礎——this指向
2. 因此this.name也就是var name = "Window"

仍是那道題，不過咱們把this保存一下，變成下面這種形式

var name = "Window";

var object = {
    name: "Object",

    f: function () {
        var that = this;
        return function () {
            return that.name;
        };

    }

};

alert(object.f()());

答案是Object。

1. object.f()中調用時這個this指向object，當用變量保存時，這個that至關於object
2. object.f()()調用時，因爲that至關於object，因此that.name就是object中的Object

總結

1. 閉包能夠在外部訪問函數內部的變量
2. 閉包能夠保留現場

結尾

來道面試題給你們看看吧

const buttons = document.querySelectorAll('.btn');
for(var i = 0; i < buttons.length; i++) {
  buttons[i].onclick = function() {
    console.log(i);
  }
}

以上例子顯示什麼?若是須要正常顯示須要怎麼修改?