js閉包是什麼？對js閉包的理解（附程式碼）

js中閉包closure，是指函數變數可以保存在函數作用域內，因此看起來是函數將變數「包裹」了起來，根據定義，包含變數的函數就是閉包。

本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

最初的定義

闭包(closure)，是指函数变量可以保存在函数作用域内，因此看起来是函数将变量“包裹”了起来。
//根据定义，包含变量的函数就是闭包
function foo() {
    var a = 0;
}
cosole.log(a) 
// Uncaught ReferenceError: a is not defined

《JavaScript高階程式設計》對閉包定義

閉包是指有權存取另一個函數作用域中的變數的函數

 //根据《JavaScript高级程序设计》，访问上层函数的作用域的内层函数就是闭包
function foo() {
    var a = 2;
    function bar() {
        console.log(a);
    }
    bar();
}
foo();

《JavaScript權威指南》對閉包定義

函數物件可以透過作用域鏈相互關聯起來，函數體內部變數可以保存在函數作用域內，這就是閉包。

 var global = "global scope"; //全局变量
function checkscope() {
    var scope = "local scope"; //局部变量
    function f() {
        return scope; //在作用域中返回这个值
    };
    return f();
}
checkscope(); // 返回 "local scope"

嚴格來說，閉包需要滿足三個條件：

【1】存取所在作用域；

【2】函數巢狀；

#【3】在所在作用域外被呼叫
有些人覺得只滿足條件1就可以，所以IIFE是閉包；有些人覺得滿足條件1和2才可以，所以被巢狀的函數才是閉包；有些人覺得3個條件都滿足才可以，所以在作用域以外的地方被呼叫的函數才是閉包

為什麼我們需要閉包，js閉包有什麼用處

先來看一個例子，我們來實作一個計數器。

var counter = 0;
function add() {
   return counter += 1;
}
add();
add();
add();// 计数器现在为 3

現在我們已經達到了目的，可是問題來了，程式碼中的任何一個函數都可以隨意改變counter的值，所以這個計數器並不完美。那我們把counter放在add函數裡面不就好了麼？

function add() {
    var counter = 0;
    return counter += 1;
} 
add();
add();
add();// 本意是想输出 3, 但输出的都是 1

所以這樣做的話，每次呼叫add函數，counter的值都要初始化為0，還是達不到我們的目的。

如何使用閉包

所以這時候我們就要用閉包去解決這個問題了，先看程式碼。

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
add();
add();
add();// 计数器为 3

這時候我們完美實現了計數器。這段非常精簡，可以分割成如下等價代碼。

function outerFunction () {
     var counter = 0;
     function innerFunction (){
         return counter += 1;
     }
     return innerFunction;
}
var add = outerFunction();
add();
add();
add();// 计数器为 3

這時候的add就形成了一個閉包。一個閉包由兩個部分組成，函數和創建該函數的環境。環境是由環境中的局部變數組成的。對於閉包add來說，它是由函數innerFunction和變數counter組成，所以這時候add是可以存取變數counter的。

使用閉包應注意的問題

由於閉包會攜帶包含它的函數的作用域，因此會比其他函數佔用更多的記憶體。因此可以手動解除對匿名函數的引用，以便釋放記憶體。

function f2(){
    var n=22;
    var nAdd=function(){n++};
    return function(){
        return {
            n:n,
            nAdd:nAdd
        }
    }
}
//result2就是创建了一个匿名函数
var result2=f2();
//调用函数
console.log(result2());
result2().nAdd();
console.log(result2());
//解除对匿名函数的引用，以便释放内存
result2=null;

相關推薦：

JS閉包的使用

#簡單理解JS閉包

javascript深入理解js閉包

#

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