js閉包是什麼？對js閉包的理解（附程式碼）-js教程-PHP中文網

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

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

本教學操作環境：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;

登入後複製