JS 闭包应用

1. 代替全局变量

//闭包应用1：代替全局变量的使用
//多个函数都用到一个变量，通常我们会定义一个全局变量，然后在各函数中应用它，
//为了避免使用全局变量，可以通过使用立即执行函数定义临时变量，子函数即是闭包函数
//               *********************************实际上任何函数都是全局作用域的内部函数，都能访问全局变量，所以都是window的闭包************************************************
(function(){
  var result='hello';
  function fun1(){
      alert(result);
  }
  fun1(); //hello 形成闭包
)(); 

alert(result); //在立即执行函数外部，这里就访问不到test2

// JQuery的闭包结构：用一个函数域包起来，就是所谓的沙箱
// 在这里边 var 定义的变量，属于这个函数域内的局部变量，避免污染全局
// 把当前沙箱需要的外部变量通过函数参数引入进来
// 只要保证参数对内提供的接口的一致性，你还可以随意替换传进来的这个参数
(function(window, undefined) {
   // jQuery 代码
})(window);

 

2. 把方法当参数的情况，使用闭包

// 1）延时函数 
function fun1(arg){
return function(){console.dir(arg);}
}
var test=fun1('hello');//返回f3的内部函数的引用
setTimeout(test,100);  //这里直接传递fun1是不正确的

// 2)方法注册

document.getElementById("hello").onclick=test;//正确,

document.getElementById("hello").attachEvent("onclick",test);//正确,

 

3. 惰性模式: 减少代码每次执行时的重复性判断，通过重新定义对象来避免原对象中的分支判断，提高网站性能。

// 每次调用方法时，都会进行条件的判断。
var AddEvent = function(dom, type, fn){
  if(dom.addEventListener){
    dom.addEventListener(type, fn, false);
  }else if(dom.attachEvent){
    dom.attachEvent('on'+type, fn);
  }else{
    dom['on'+type] = fn;
  }

通过惰性模式：加载即执行：JavaScript文件加载时通过闭包执行对方法进行重新定义，在页面加载时会消耗一定的资源

var AddEvent = function(dom, type, fn){
  if(dom.addEventListener){
    return function(dom, type, fn){
        dom.addEventListener(type, fn, false);
      }
  }else if(dom.attachEvent){
    return function(dom, type, fn){
        dom.attachEvent('on'+type, fn);
      }
  }else{
    return function(dom, type, fn){
        dom['on'+type] = fn;
      }
  }
}();