闭包函数(Closure Function)是一种特殊的函数,它可以捕获并保存在其定义时可访问的外部变量。换句话说,闭包函数可以记住并访问其创建时所处的作用域,即使在其定义之外被调用时也可以使用这些变量。
使用闭包函数的一个常见场景是在函数内部定义另一个函数,并返回内部函数作为结果。这样,内部函数可以访问外部函数的局部变量,即使外部函数已经执行完毕,这些局部变量的状态仍然保留在内部函数中。闭包函数可以用来创建具有私有变量和数据封装的功能模块。
形成闭包必须要满足三个条件:
1.函数嵌套函数
2.内部函数使用了外部函数的变量或参数
3.在所在作用域外被调用
闭包会将局部变量变成自由变量,储存在内存中,不会被垃圾回收机制回收 ,所有用完自由变量 需要手动清除,手动赋值为null。
闭包函数的10种写法:
1.返回值
var fn = function (){
var name = 'asd';
return function(){
return name;
}
}
var fnc = fn();
console.log(fnc());
2.函数赋值
var fn2;
var fn = function(){
var name = 'waw';
var a = function(){
return name;
}
fn2 = a;
}
fn();
console.log(fn2());
3.函数参数
function fn2(f){
console.log(f());
}
function fn(){
var name = 'uuj';
var a = function(){
return name;
}
fn2(a);
}
fn();
4.IIFE 立即执行函数
function fn3(f){
console.log(f());
}
(function(){
var name = 'alex';
var a = function(){
return name;
}
fn3(a);
})();
5.循环赋值
function foo(){
var arr = [];
for(var i = 0; i < 10; i++){
// (function(i){
// arr[i] = function(){
// return i;
// }
// })(i);
arr[i] = (function(n){
return function(){
return n;
}
})(i);
}
return arr;
}
var bar = foo();
console.log(bar);
console.log(bar[3]());
6.getter、setter
var getValue,setValue;
(function(){
var num = 0;
getValue = function (){
return num;
}
setValue = function (v){
if (typeof v=== 'number'){
num = v;
}
}
})();
console.log(getValue());
setValue(10);
console.log(getValue());
7.迭代器
//计数器
var add = function(){
var num = 0;
return function (){
return ++num;
}
}();
console.log(add());
console.log(add());
//
function setUp(arr){
var i = 0;
return function (){
return arr[i++];
}
}
var next = setUp(['a1','a2','a3']);
console.log(next());
console.log(next());
console.log(next());
8.区分首次
var firstLoad = (function(){
var list = [];
return function(id){
if (list.indexOf(id) >= 0){
return false;
}else{
list.push(id);
return true;
}
}
})();
firstLoad(19); // true
firstLoad(19); // false
9.缓存机制
未加入缓存:
function mult(){
var sum = 0;
for(var i= 0;i < arguments.length;i++){
sum = sum + arguments[i];
}
return sum;
}
console.log(mult(1,2,3,1,1,2,3));
console.log(mult(1,2,3,1,1,2,3));
有缓存的:
var mult = function(){
var cache = {};
var calculate = function(){
var sum = 0;
for (var i= 0;i < arguments.length;i++){
sum = sum + i;
}
return sum;
}
return function(){
var args = Array.prototype.join.call(arguments,',');
if (args in cache){
return cache[args];
}
console.log(args);
return cache[args] = calculate.apply(null,arguments);
}
}();
console.log(mult(1,2,3,1,1,2,3));
console.log(mult(1,2,3,1,1,2,3));
10.img图片对象上报
var report = function(src){
var imgs = [];
return function (src){
var img = new Image();
imgs.push(img);
imgs.src = src;
}
}();
report('http:xxx.com/getinfo');