javascript中的閉包概念簡單介紹

螞蟻小編發表於2017-04-04

所謂的閉包應該是指: 內部函式讀取當前函式以外的變數,即建立時所處的上下文環境。

[JavaScript] 純文字檢視 複製程式碼
function hello(){
  var char = "softwhy.com";
  function print(){
    console.log(char);
  };
  return print();
}

需要注意的是這裡的print函式引用了外部hello函式的char變數,於是在這裡我們能夠返回"softwhy.com"。

這個功能在某種意義上來說,是要歸功於作用域。我們沒有辦法直接訪問char,除非是宣告這個變數的時候沒有帶var。

程式碼例項如:

[JavaScript] 純文字檢視 複製程式碼
function hello(){
  char = "softwhy.com";
  function print(){
    console.log(char);
  };
  return print();
}

在這裡hello變成一個閉包。 閉包是一種特殊的物件,它由兩部分構成:函式,以及建立該函式的環境。環境由閉包建立時在作用域中的任何區域性變數組成。

Javscript閉包與this:

需要注意的是讀取this與arguments時,可能是會出問題的。

[JavaScript] 純文字檢視 複製程式碼
function hello(){
  this.char = "softwhy.com";
  function output(){
    char = "antzone";       
    console.log(this.char);
  };
  return output();
}

當然了這個例子並不夠貼切,我們需要一個額外的例子來解釋這個問題,下面引用一個《Javascript高階程式設計》中的一個例子,來說明這個問題。

[JavaScript] 純文字檢視 複製程式碼
var name = "The window";
var object = {
  name: "My Object",
  getNameFunc: function(){
    return function(){
      return this.name;
    }
  }
};
object.getNameFunc()()

只是這種用法實在是,而解決方法便是儲存一個臨時變數that,如之前在《關於Javascript的this的一些知識》一文中所說的。

[JavaScript] 純文字檢視 複製程式碼
var name = "The window";
var object = {
  name: "My Object",
  getNameFunc: function(){
    var that = this;
    return function(){
      return that.name;
    }
  }
};
object.getNameFunc()()

Javscript 閉包與讀寫變數:

值得注意的是,如果我們沒有處理好我們的變數時,我們也可以修改這些變數。

[JavaScript] 純文字檢視 複製程式碼
function hello(){
  var char = "hello,world";
  return{
    set:function(string){
      return char = string;
    },
    print: function(){
      console.log(char)
    }
  }
}
var say = hello();
say.set('new hello,world') 
say.print() // new hello world

Javascript 閉包與效能:

引用MDC的說法:

如果不是因為某些特殊任務而需要閉包,在沒有必要的情況下,在其它函式中建立函式是不明智的,因為閉包對指令碼效能具有負面影響,包括處理速度和記憶體消耗。


相關文章