闭包经典使用场景一:通过循环给页面上多个dom节点绑定事件
场景描述:假如页面上有5个button,要给button绑定onclick事件,点击的时候,弹出对应button的索引编号。
闭包使用场景二:封装变量
闭包可以将一些不希望暴露在全局的变量封装成“私有变量”。
假如有一个计算乘积的函数,mult函数接收一些number类型的参数,并返回乘积结果。为了提高函数性能,我们增加缓存机制,将之前计算过的结果缓存起来,下次遇到同样的参数,就可以直接返回结果,而不需要参与运算。
这里,存放缓存结果的变量不需要暴露给外界,并且需要在函数运行结束后,仍然保存,所以可以采用闭包。
示例:
var mult = (function(){ var cache = {}; var calculate = function() { var a = 1; for(var i = 0, len = arguments.length; i < len; i++) { a = a * arguments[i]; } return a; } return function() { var args = Array.prototype.join.call(arguments, ','); if(args in cache) { 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');
这段代码在运行时,发现在一些低版本浏览器上存在bug,会丢失部分数据上报,原因是img是report函数中的局部变量,当report函数调用结束后,img对象随即被销毁,而此时可能还没来得及发出http请求,所以此次请求就会丢失。
因此,我们使用闭包把img对象封闭起来,就可以解决数据丢失的问题:
var report = (function() { var imgs = []; return function(src) { var img = new Image(); imgs.push(img); img.src = src; } }())
闭包+设计模式
在诸多设计模式中,闭包都有广泛的应用。对象==数据+方法。而闭包是在过程中以环境的形式包含了数据。因此,通常面向对象能实现的功能,使用闭包也可以实现。
以上就是javascript什么时候要用闭包?的详细内容,更多请关注易知道|edz.cc其它相关文章!