何為閉包
- 根據(jù)詞法作用域的規(guī)則绅作，內(nèi)部函數(shù)總是可以訪問其外部函數(shù)中聲明的變量鸭津，當通過調(diào)用一個外部函數(shù)返回一個內(nèi)部函數(shù)后，即使外部函數(shù)已經(jīng)執(zhí)行結束了败砂，但是內(nèi)部函數(shù)引用外部函數(shù)的變量依然保存在內(nèi)存中辨嗽，我們就把這些變量的集合叫做閉包世落。
function fn1(){
var a =10;
function fn(){
console.log(a); // 10
}
return fn;
}
- 再比如下面的代碼，隨著函數(shù)的每次執(zhí)行糟需，變量的值都會進行遞增1屉佳，原因是因為外層函數(shù)的變量處于內(nèi)層函數(shù)的作用域鏈當中，被內(nèi)層函數(shù)所使用著洲押，當js垃圾回收機制讀取到這一情況后就不會進行垃圾回收武花。
function fn1(){
var a = 1;
function fn(){
a++;
console.log(a);
}
return fn;
}
// 調(diào)用函數(shù)
var x = fn1();
x(); // 2
x();//3
- 閉包函數(shù)在js的開發(fā)當中是非常常見的寫法，例如下面這種寫法杈帐，功能是實現(xiàn)了對數(shù)組的一些常規(guī)操作的封裝体箕，也是屬于對閉包函數(shù)的一種應用专钉。
let Utils = (function(){
var list = [];
return {
add:function(item){
if(list.indexOf(item)>-1) return; // 如果數(shù)組內(nèi)元素存在，那么不在重復添加
list.push(item);
},
remove:function(item){
if(list.indexOf(item) < 0) return; // 如果要刪除的數(shù)組數(shù)組之內(nèi)不存在累铅，那么就返回
list.splice(list.indexOf(item),1);
},
get_length:function(){
return list.length;
},
get_showData:function() {
return list;
}
}
})();
Utils.add("hello,world");
Utils.add("this is test");
console.log(Utils.get_showData());// ["hello,world","this is test"]
在上面的代碼中跃须，函數(shù)嵌套函數(shù)形成了閉包函數(shù)的結構，在開發(fā)中是比較常見的寫法娃兽。
閉包的概念：閉包是指有權限訪問上一級父作用域的變量的函數(shù).
閉包函數(shù)的應用
- 閉包函數(shù)是js當中非常重要的概念菇民，在諸多的地方可以應用到閉包，通過閉包投储，我們可以寫出很多優(yōu)秀的代碼第练，下面是一些常見的內(nèi)容：
// 數(shù)組排序
[1, 2, 3].sort(function (a, b) {
... // 排序條件
});
// map方法的應用，根據(jù)函數(shù)中定義的條件將原數(shù)組映射到一個新的數(shù)組中
[1, 2, 3].map(function (element) {
return element * 2;
}); // [2, 4, 6]
// 常用的 forEach
[1, 2, 3].forEach(function (element) {
if (element % 2 != 0) {
alert(element);
}
}); // 1, 3
- 例如我們常用的call和apply方法玛荞，它們是兩個應用函數(shù)娇掏，也就是應用到參數(shù)中的函數(shù)(在apply中是參數(shù)列表，在call中是獨立的參數(shù)):
(function () {
alert([].join.call(arguments, ';')); // 1;2;3
}).apply(this, [1, 2, 3]);
- 還有最常使用的寫法：
var a = 10;
setTimeout(function () {
alert(a); // 10, after one second
}, 1000);
- 當然勋眯，ajax的寫法也就是回調(diào)函數(shù)其實本質也是閉包：
//...
var x = 10;
// only for example
xmlHttpRequestObject.onreadystatechange = function () {
// 當數(shù)據(jù)就緒的時候婴梧，才會調(diào)用;
// 這里，不論是在哪個上下文中創(chuàng)建
// 此時變量“x”的值已經(jīng)存在了
alert(x); // 10
};
//...
- 當然也包括我們上邊說的封裝獨立作用域的寫法：
var foo = {};
// 初始化
(function (object) {
var x = 10;
object.getX = function _getX() {
return x;
};
})(foo);
alert(foo.getX()); // 獲得閉包 "x" – 10
