版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/HCJS_Zee/article/details/83076392
- 封装变量
闭包可以帮助把一些不需要暴露在全局的变量封装成“私有变量”。假设有一个计算乘积的简单函数:
var mult = function(){
var a = 1;
for(var i = 0, l = arguments.length; i < l; i++) {
a = a * arguments[i];
}
return a;
};
// 加入缓存机制,提高函数性能
var cache = {};
var mult = function(){ //1,2,3,2
var args = Array.prototype.join.call(arguments, ',');
if(cache[args]){
return cache[args];
}
var a = 1;
for(var i = 0, l = arguments.length; i < l; i++) {
a = a * arguments[i];//1*1*2*3*2
}
return cache[args] = a;
};
alert(mult(1,2,3));
// cache这个变量仅仅在mult函数中被使用,与其让mult函数一起平行地暴露在全局作用域下,不如把它封闭在mult函数内部,这样可以减少页面中的全局变量,以避免这个变量在其他地方被不小心修改而引发错误
var mult = (function(){
var cache = {};
return function(){
var args = Array.prototype.join.call(arguments, ',');
if(args in cache) {
return cache[args];
}
var a = 1;
for(var i = 0, l = arguments.length;i < l; i++) {
a = a * arguments[i];
}
return cache[args] = a;
}
})();
如果小函数不需要在程序的其他地方使用,最好是把他们用闭包封闭起来
var mult = (function(){
var cache = {};
var calculate = function(){
var a = 1;
for(var i = 0,l = arguments.length;i < l;i++) {
a = a * arguments[i];
}
return a;
};
return function(){
var args = Array.prototype.join.call(arguments, ',');
if(cache[args]) {
return cache[args];
}
return cache[args] = calculate.apply(null, arguments);
}
})();
- 延续局部变量的寿命
img对象经常用于进行数据上报
var report = function(src){
var img = new Image();
img.src = src;
}
report('http://xxx.com/getUserInfo');
// 函数report并不是每一次都成功发起了HTTP请求,丢失数据的原因是img使局部变量,当report函数调用结束后,img局部变量随机被销毁,而此时或许还没来得及发出HTTP请求。
var report = (function(){
var imgs = [];
return function(src){
var img = new Image();
img.push(src);
img.src = src;
}
})();
- 闭包实现的命令模式
var Tv = {
open: function(){
console.log('打开电视机0');
},
close: function(){
console.log('关闭电视机');
}
};
var createCommand = function(receiver) {
var execute = function(){
return receiver.open();
}
var undo = function(){
return receiver.close();
}
return {
execute: execute,
undo: undo
}
};
var setCommand = function(command) {
document.getElementById('execute').onclick = function(){
command.execute();
};
document.getElementById('undo').onclick = function(){
command.undo();
}
};
setCommand(createCommand(Tv));