闭包的更多作用

最新推荐文章于 2022-04-29 18:38:54 发布

原创最新推荐文章于 2022-04-29 18:38:54 发布 · 186 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

27 篇文章

订阅专栏

本文探讨了如何使用JavaScript中的闭包技术来封装变量，提高函数性能，延续局部变量的寿命，并实现命令模式。通过具体实例，如计算乘积函数的优化和数据上报功能的改进，展示了闭包在实际编程中的应用。

封装变量
闭包可以帮助把一些不需要暴露在全局的变量封装成“私有变量”。假设有一个计算乘积的简单函数：

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));