首页

js闭包-javascript-closure

kkcode
2018-08-13  阅读 414

概念

先看一段代码

function t1(){
     var age = 22;
     function t2(){
        alert(age);
     }
     return t2;
}
var tmp = t1();
var age = 99;
tmp();//22复制代码

在大部分的语言中,t1被调用执行,则申请内存,并把局部变量push入栈。t1函数执行完毕,内部的局部变量随着函数的退出而销毁。因此,age = 22这个局部变量就消失了。

但是在js中,age = 20这个变量却被t2捕捉,即使t1执行完毕,通过t2依然能够访问该变量。这种情况》返回的函数,并非孤立的函数,甚至把其周围的变量环境,形成了封闭的“环境包”,共同返回,所以叫闭包。

概括:函数的作用域取决于声明时,而不取决于调用时。

闭包计数器

问题:多个人开发js程序,需要一个全局计数器,多个人的函数共同用一个计数器,计数器一直增长。
答:设立一个全局变量, window.cnt = 0;调用:++window.cnt; 分析:虽然这个方法可行,但是应该避免过多的使用全局变量,防止全局变量被污染。当你引用其他人的js程序时,如果他的程序内也有一个全局变量window.cnt = 'hello';那么你的全局变量就会被无情的改变了

那么如何使用闭包做计数器呢?

第一版

function counter(){
   var cnt = 0;
   var cnter = function (){
      return ++cnt;
   }
   return cnter;
}
var inc = counter();
alert(inc());
alert(inc());
alert(inc());复制代码

当counter执行完毕后,除了返回的cnter函数谁也访问不到cnt变量了 但是,这样有2个问题,全局多了一个counter函数和inc变量 下面,我们使用立即执行函数。

第二版简化

var cnt = (function (){
    var cnt = 0;
    return function(){
        return ++cnt;
    }
})();

alert(cnt());
alert(cnt());复制代码

疑问:cnt不依然是全局变量吗?

在工作中,如何避免全局污染和冲突。

  1. 统一放在一个全局对象上,如:jquery ->$
  2. 每人用自己的命名空间。如:省份+姓名(hn-yk)河南+yk

第三版

jquery的计数器插件形式

var $ = {};//jquery对象
$.cnt = (function (){
    var cnt = 0;
    return function(){
        return ++cnt;
    }
})();

alert($.cnt());
alert($.cnt());复制代码

个人命名空间,在团队开发中也很常见。

var HN_YK = {};
HN_YK.cnt = (function (){
    var cnt = 0;
    return function(){
        return ++cnt;
    }
})();

alert(HN_YK.cnt());
alert(HN_YK.cnt());复制代码

【一起进步,微信公众号:qdgithub】

本文为作者原创文章,转载无需和我联系,但请注明转载链接。 【前端黑猫】