深入淺出Javascript閉包

浪裡行舟發表於2019-02-16

一、引子

閉包(closure)是 Javascript 語言的一個難點,面試時常被問及,也是它的特色,很多高階應用都要依靠閉包實現。本文儘可能用簡單易懂的話,講清楚閉包的概念、形成條件及其常見的面試題。本文首發地址為GitHub部落格,寫文章不易,請多多支援與關注!

深入淺出Javascript閉包

我們先來看一個例子:

var n = 999;
function f1() {
console.log(n);
}
f1() // 999
複製程式碼

上面程式碼中,函式f1可以讀取全域性變數n。但是,函式外部無法讀取函式內部宣告的變數。

function f1() {
var n = 999;
}
console.log(n)
// Uncaught ReferenceError: n is not defined
複製程式碼

上面程式碼中,函式f1內部宣告的變數n,函式外是無法讀取的。

如果有時需要得到函式內的區域性變數。正常情況下,這是辦不到的,只有通過變通方法才能實現。那就是在函式的內部,再定義一個函式。

function f1() {
var n = 999;
function f2() {
  console.log(n); // 999
 }
}
複製程式碼

上面程式碼中,函式f2就在函式f1內部,這時f1內部的所有區域性變數,對f2都是可見的。既然f2可以讀取f1的區域性變數,那麼只要把f2作為返回值,我們不就可以在f1外部讀取它的內部變數了嗎!

二、閉包是什麼

我們可以對上面程式碼進行如下修改:

   function f1(){
   var a = 999;
   function f2(){
    console.log(a);
   }
   return f2; // f1返回了f2的引用
   }
   var result = f1(); // result就是f2函式了
   result();  // 執行result,全域性作用域下沒有a的定義,
         //但是函式閉包,能夠把定義函式的時候的作用域一起記住,輸出999			
複製程式碼

上面程式碼中,函式f1的返回值就是函式f2,由於f2可以讀取f1的內部變數,所以就可以在外部獲得f1的內部變數了。

閉包就是函式f2,即能夠讀取其他函式內部變數的函式。由於在JavaScript語言中,只有函式內部的子函式才能讀取內部變數,因此可以把閉包簡單理解成“定義在一個函式內部的函式”。閉包最大的特點,就是它可以“記住”誕生的環境,比如f2記住了它誕生的環境f1,所以從f2可以得到f1的內部變數。在本質上,閉包就是將函式內部和函式外部連線起來的一座橋樑。

那到底什麼是閉包呢?

當函式可以記住並訪問所在的詞法作用域,即使函式是在當前詞法作用域之外執行,這就產生了閉包。 ----《你不知道的Javascript上卷》

我個人理解,閉包就是函式中的函式(其他語言不能函式再套函式),裡面的函式可以訪問外面函式的變數,外面的變數的是這個內部函式的一部分。

閉包形成的條件

  • 函式巢狀
  • 內部函式引用外部函式的區域性變數

三、閉包的特性

每個函式都是閉包,每個函式天生都能夠記憶自己定義時所處的作用域環境。把一個函式從它定義的那個作用域,挪走,執行。這個函式居然能夠記憶住定義時的那個作用域。不管函式走到哪裡,定義時的作用域就帶到了哪裡。接下來我們用兩個例子來說明這個問題:

//例題1
var inner;
function outer(){
var a=250;
inner=function(){
alert(a);//這個函式雖然在外面執行,但能夠記憶住定義時的那個作用域,a是250
  }
}
outer();
var a=300;
inner();//一個函式在執行的時候,找閉包裡面的變數,不會理會當前作用域。
複製程式碼
//例題2
function outer(x){
  function inner(y){
  console.log(x+y);
  }
return inner;
}
var inn=outer(3);//數字3傳入outer函式後,inner函式中x便會記住這個值
inn(5);//當inner函式再傳入5的時候,只會對y賦值,所以最後彈出8
複製程式碼

四、閉包的記憶體洩漏

棧記憶體提供一個執行環境,即作用域,包括全域性作用域和私有作用域,那他們什麼時候釋放記憶體的?

  • 全域性作用域----只有當頁面關閉的時候全域性作用域才會銷燬
  • 私有的作用域----只有函式執行才會產生

一般情況下,函式執行會形成一個新的私有的作用域,當私有作用域中的程式碼執行完成後,我們當前作用域都會主動的進行釋放和銷燬。但當遇到函式執行返回了一個引用資料型別的值,並且在函式的外面被一個其他的東西給接收了,這種情況下一般形成的私有作用域都不會銷燬

如下面這種情況:

function fn(){
var num=100;
return function(){
  }
}
var f=fn();//fn執行形成的這個私有的作用域就不能再銷燬了
複製程式碼

也就是像上面這段程式碼,fn函式內部的私有作用域會被一直佔用的,發生了記憶體洩漏。所謂記憶體洩漏指任何物件在您不再擁有或需要它之後仍然存在。閉包不能濫用,否則會導致記憶體洩露,影響網頁的效能。閉包使用完了後,要立即釋放資源,將引用變數指向null

接下來我們看下有關於記憶體洩漏的一道經典面試題:

  function outer(){
  var num=0;//內部變數
  return function add(){//通過return返回add函式,就可以在outer函式外訪問了
  num++;//內部函式有引用,作為add函式的一部分了
  console.log(num);
  };
 }
  var func1=outer();
  func1();//實際上是呼叫add函式, 輸出1
  func1();//輸出2 因為outer函式內部的私有作用域會一直被佔用
  var func2=outer();
  func2();// 輸出1  每次重新引用函式的時候,閉包是全新的。
  func2();// 輸出2  
複製程式碼

五、閉包的作用

1.可以讀取函式內部的變數

2.可以使變數的值長期儲存在記憶體中,生命週期比較長。因此不能濫用閉包,否則會造成網頁的效能問題

3.可以用來實現JS模組

JS模組:具有特定功能的js檔案,將所有的資料和功能都封裝在一個函式內部(私有的),只向外暴露一個包信n個方法的物件或函式,模組的使用者,只需要通過模組暴露的物件呼叫方法來實現對應的功能

具體請看下面的例子:

//index.html檔案
<script type="text/javascript" src="myModule.js"></script>
<script type="text/javascript">
  myModule2.doSomething()
  myModule2.doOtherthing()
</script>
複製程式碼
//myModule.js檔案
(function () {
  var msg = 'Beijing'//私有資料
  //運算元據的函式
  function doSomething() {
    console.log('doSomething() '+msg.toUpperCase())
  }
  function doOtherthing () {
    console.log('doOtherthing() '+msg.toLowerCase())
  }
  //向外暴露物件(給外部使用的兩個方法)
  window.myModule2 = {
    doSomething: doSomething,
    doOtherthing: doOtherthing
  }
})()
複製程式碼

深入淺出Javascript閉包

六、閉包的運用

我們要實現這樣的一個需求: 點選某個按鈕, 提示"點選的是第n個按鈕",此處我們先不用事件代理:

.....
<button>測試1</button>
<button>測試2</button>
<button>測試3</button>
<script type="text/javascript">
  var btns = document.getElementsByTagName('button')
  //遍歷加監聽
    for (var i = 0; i < btns.length; i++) {
      btns[i].onclick = function () {
        console.log('第' + (i + 1) + '個')
      }
    }
</script>  
複製程式碼

萬萬沒想到,點選任意一個按鈕,後臺都是彈出“第四個”,這是因為i是全域性變數,執行到點選事件時,此時i的值為3。那該如何修改,最簡單的是用let宣告i

 for (let i = 0; i < btns.length; i++) {
      btns[i].onclick = function () {
        console.log('第' + (i + 1) + '個')
      }
    }
複製程式碼

另外我們可以通過閉包的方式來修改:

   for (var i = 0; i < btns.length; i++) {
      (function (j) {
        btns[j].onclick = function (i) {
          console.log('第' + (i + 1) + '個')
        }
      })(i)
    }
複製程式碼

如果覺得文章對你有些許幫助,歡迎在我的GitHub部落格點贊和關注,感激不盡!

ps:文章於2018.11.16重新修改,希望對你們有所收穫!

參考文章

Javascript教程

你不知道的Javascript上卷

相關文章