javascript中的閉包是什么

JavaScript 一個近乎神話 對于JavaScript有使用經驗但卻從未真正理解閉包概念的人來說，理解閉包可以說是某種意義上的重生。閉包并不是需要學習新的語法才能使用的工具。閉包的產生是基于詞法作用域寫代碼時自然產生的結果。換句話說，你不需要要為了閉包而寫閉包，閉包在我們寫的代碼中隨處可見。 當你真正了解閉包之后，會發現，哦~，原來我以前所敲的代碼中已經出現了很多閉包了鴨！

一個小 demo

仔細看看下面的例子我們會感到奇怪，明明都是調用result(),為什么結果會不一樣呢？

let count=500 //全局作用域
function foo1() {
  let count = 0;//函數全局作用域
  function foo2() {
    count++;//函數內部作用域
    console.log(count);
    return count;
  }
  return foo2;//返回函數
}
let result = foo1();
result();//結果為1
result();//結果為2

首先foo1()返回的是一個foo2()函數,當我們調用result()的時候就會返回foo2()執行的函數,foo2()里面有什么呢? 首先我們看到如下有一個count變量,但是沒有定義.我們根據JavaScript的作用域鏈的定義可知,當函數內部的變量沒有定義的時候,就會采用冒泡的方式,向上一級尋找.上一級沒有接著上一級找,直到最頂層window. 如果都沒有,就會報undefined的錯誤.這里我們在foo1()中找到了count,于是count+1,第一次輸出的是1,沒有什么問題.

 function foo2() {
    count++;
    console.log(count);
    return count;
  }

但是第二次我們再執行result()的時候就出現了問題,為什么會是2呢?按照流程,首先再foo2()函數內部尋找count,沒有然后到外層尋找,找到了count=0,這時候count+1應該為1才對.這里就涉及到閉包的問題了.

首先我們在原來的代碼中加一個debugger,然后到谷歌瀏覽器右鍵檢查,點擊resources就可以看到右邊有一個Closure,瀏覽器的可視化已經證實了這的確是一個閉包.并且count=1已經存儲在了Closure之中.也就說明count=1沒有被銷毀,等下次在調用result()的時候count=2.

認識作用域

要學習Clusure必須了解JavaScript的作用域相關知識 作用域包括：

1.全局作用域
2.函數作用域
4.塊級作用域(es6 新出,解決 var 問題, 新增 let, const)

  var count = 100; //全局作用域
  function foo1() {
    var count = 0; //函數全局作用域
    return count; //返回函數
  }
  if (count == 1) {
    //塊級作用域
    console.log(count);
  }

上面代碼簡單可以看出作用域分類,需要注意是,一個函數(function)也是塊級作用域,簡單來說,一般有 {}都可以算做是一個塊級作用域.

作用域鏈

作用域里面嵌套作用域,就形成了作用域鏈. 外部作用域無法訪問內部的作用域,看如下例子

function foo(){
var n=1
function foo2(){
  var m=1
  console.log(n) //1
}
foo2()
}
foo()
console.log(n) //err: n is not defined

上述代碼中在全局中無法訪問內部的n,但是在嵌套的內部foo2()可以訪問外部的函數,這就是作用域產生的特殊效果.

明白了作用域鏈,我們再來看個例子(很有迷惑性,仔細看看哦):

 var name = 'Mike'; //第一次定義name
  function showName() {
    console.log(name);  //輸出 Mike 還是 Jay ？     
  }

  function changeName() {
    var name = 'Jay'; //重新定義name
    showName(); //調用showName()
  }
  changeName();

上面的例子你覺得輸出的是什么呢?答案是Mike.在這里我們引出了一個新的概念,詞法作用域作用域有兩種模型:

• 詞法作用域（靜態）：js查找是按照代碼書寫時候的位置來決定的，而不是按照調用時候位置

• 動態作用域：目前還有使用的有Perl，Bash (可以自行了解)

通過詞法作用域的的規則我們可以再來分析一下

1. 調用changeName()時,找到這個函數

2. 定義var name = "Jay"

3. 調用showName()

4. 在changeName()里面查找是否有showName()這個方法,發現沒有,向外層查找,找到了

5. 調用console.log(name),在函數內部查找有沒有name,沒有,向外查找,找到了,name="Mike"

6. 輸出Mike

閉包

了解了上面的知識之后,終于來到了閉包

閉包在兩本書上的官方解釋:

1.小"黃"書(你不知道的JavaScript): 當函數可以記住并訪問所在的詞法作用域時,就產生了閉包,即使函數是在當前詞法作用域之外執行.
2.紅寶書(JavaScript高級程序設計): 閉包是指有權訪問另一個 函數作用域中的變量的函數

非常抽象的一個概念,我自己的一個理解是:
當一個變量(就像上面的name)既不是該函數內部的局部變量,也不是該函數的參數,相對于作用域來說,就是一個自由變量(引用了外部變量),這樣就會形成一個閉包.
怎么說呢?我們再來看看一開始我們使用的demo

let count = 500; //全局作用域
function foo1() {
  let count = 0; //函數全局作用域
  function foo2() {
    let count2 = 1; //隨便新增一個變量
    // count++;  注釋
    debugger;
    //console.log(count); 注釋
    //return count;  注釋
  }
  return foo2; //返回函數
}
let result = foo1();
result(); //結果為1
result(); //結果為2

再次使用瀏覽器看看,這時我們就發現Closure已經消失了,這也就證實我說的,如果函數內部不調用外部的變量,就不會形成閉包.但是如果調用了外部變量,那么就會形成閉包. 這也就是說不是所有的函數嵌套函數都能形成閉包

最后我們再來看一個循環閉包的例子

for (var i = 1; i <= 5; i++) {
  setTimeout(function timer() {
    debugger;
    console.log(i); // 輸出什么?   
  }, 1000);
}

答案 6 6 6 6 6 .因為setTimeout里面的回調函數是一個異步的過程(異步代表可以不用等待我這個代碼先執行完,可以先往后執行),而for循環是同步的(代碼只能從上往下的執行),立即執行,異步的setTimeout必須等待一秒才能執行,這時i早已經循環結束了.
解決辦法有三個:

1. 將for循環中的var 改成let

for (let i = 1; i <= 5; i++) {
  setTimeout(function timer() {
    debugger;
    console.log(i); // 1 2 3 4 5 
  }, 1000);
}

這樣就沒有問題了, 因為let是有塊級的功能,每一層循環都是獨立的,互不影響,所以才能正常輸出.
     2. 把setTimeout()套上一個function

for (var i = 1; i <= 5; i++) {
  log(i); // 1 2 3 4 5
}
function log(i) {
  setTimeout(function timer() {
    debugger;
    console.log(i);
  }, 1000);
}

這樣同樣能夠實現這個功能,原理和第一個方法一樣,每一個log()都是獨立的,互不影響,這樣才能有正確的結果,var就是因為沒有塊級的功能,才會出問題 3. 包裝成匿名函數

for (var i = 1; i <= 5; i++) {
  (function (i) {
    setTimeout(function timer() {
      debugger;
      console.log(i);
    }, 1000);
  })(i)
}

前面一個(func..)定義函數,后面一個(i)調用,這再JavaScript叫做立即執行函數,其實與第二種方式是一樣的,只是寫法不一樣.

結語

理解JavaScript閉包是一項重要的技能,在面試中也常常會有,這是邁進高級JavaScript工程師的必經之路.

以上就是javascript中的閉包中的閉包的詳細內容，更多請關注億速云其它相關文章！