JS闭包那些事

Posted 全凭一口仙气儿活着

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS闭包那些事相关的知识,希望对你有一定的参考价值。

      关于闭包,我曾经一直觉得它很讨厌,因为它一直让我很难搞,不过有句话怎么说来着,叫做你越想要一个东西,就要装作看不起它的样子。所以,抱着这个态度,我终于掳获了闭包。

  首先来认识一下什么是闭包,闭包,一共有三大特征:

   1 函数嵌套函数
   2 内部的函数可以引用外部函数的参数和变量
   3 参数和变量不会被垃圾回收机制所收回

举个栗子:

function aaa(){
   var b = 5;
    function bbb(){

        b++; 

        alert(b);

    }

}

aaa(); 

这个栗子就是很明显的闭包,函数里面嵌套函数,同时内部的函数bbb,又可以访问到外部函数aaa中的变量,至于第三个特征,我们都知道在JS解析机制中,函数内的变量在函数调用完后会被销毁,但在这里b并没有被销毁,因为他还会被里面的函数bbb引用,那么怎么证明呢?首先,我们要注意,在上面这个栗子中,是不会弹出值的,因为里面的函数bbb,只是声明了,并没有被调用,我们都知道,函数它不会主动执行的,那么怎么执行呢,看下面:

function aaa(){ 

    var b = 5;
     function bbb(){
          b++;

        alert(b); // 6

     }
    return bbb;

}

var c = aaa(); // 此时aaa被执行 同时把返回结果bbb 赋给c
c(); //6

将里面的函数作为返回结果,然后可以调用,这种经常会遇见,当aaa执行后,返回结果为一个函数,然后再调用。e而且会弹出6,因为它的值被里面的函数改变。

现在知道了闭包的特征,那最重要的是知道它的好处和应用:

  1 希望一个变量长期驻扎在内存当中

  2 避免全局变量的污染

  3 私用成员的存在

1 首先呢,我们肯定有过这样的需求,我们需要这样一个变量,在全局的很多都可以被改变,于是我们会声明一个全局变量,但是也就因为它可以在任何地方被改变,所以很容易出问题被污染。我们既希望它可以不被污染,又希望它可以在很多地方都能访问到,这样就闭包就产生了作用。

看个栗子。

function aaa(){
     var a = 1;
    return function(){
    a++;
    alert(a);
    }
}
var c = aaa();
c(); //2
c(); //3
c(); //4

当我们每调用一次,a的值就被累加,同时它又没有被污染,因为闭包的第三个特性,它的变量不会被垃圾机制回收,所以每调用一次都会在原来的基础上加1。

其实这个时候改写成更简单的方式,就是改成函数表达式:

var aaa =(function(){
var a = 1;
return function(){
a++;
alert(a);
}
})();

aaa(); //2
aaa(); //3

这样是不是省事很多了呢,如果不明白函数表达式,可以参考我前面的文章,讲的很清楚。

 

2 我们通过一个例子来看看第三个好处

var aaa =(function(){
  var a = 1;
  function bbb(){
    a++;
    alert(a);
  }
 function ccc(){
  a++;
  alert(a);
  }
  return {
    b:bbb,
    c:ccc
  } // 返回json对象

})();

aaa.b(); // 2
aaa.c(); // 3

当在一个函数里声明了多个函数,可以通过json的格式返回,然后我们就可以在外面这样调用,这些函数就长了函数aaa的私有成员,如果对json不太了解,可以我看看w3cschool的介绍,很好理解。

3 下面我们看第三个栗子。它非常优秀的体现了闭包的优点,就是我们经常写的选项卡切换的例子,一般我们会循环给每个列表加上一个索引,通过闭包就不用再加索引了。

在循环中直接找到对应元素的索引。如下 没循环一次 内部函数调用一次 将i的值直接作为参数传进去。
window.onload = function(){
  var aLi = document.getElementsByTagName(‘li‘);
  for(var i=0;i<aLi.length;i++){
    (function(i){
      aLi[i].onclick = function(){
        alert(i);
      }
    })(i);
  }

}

上面代码就是在点击事件的函数的外面再加上一个函数,就形成了闭包,然后没循环一次,通过函数表达式的形式,将i传进去,而通过闭包特性可以知道,事件绑定的函数就可以访问外面函数里面的参数i。

其实还有另一种写法:

window.onload = function(){
  var aLi = document.getElementsByTagName(‘li‘);

  for(var i=0;i<aLi.length;i++){
    aLi[i].onclick = (function(i){
      return function(){
      alert(i);
      }
    })(i);
  }

}

这种方法的原理是这样的,首先将一个函数表达式的调用赋给了点击事件,我们都知道,当事件后面等于的不是函数名,而直接是调用的话,那不点击,函数也已经执行了,所以在循环的时候,i已经作为参数,传进了函数表达式,而这个函数表达式的返回值又是一个函数,函数嵌套,闭包关系,这个函数可以访问外面函数传进来的每个i。

如果是初学者,不熟悉选项卡,可以先去了解选项卡原理。

闭包需要注意的地方(这个先做简单了解)

1 在IE下有可能引发内存泄漏 (内存泄漏指当你的页面跳转的时候 内存不会释放 一直占用你的CPU 只有当你关闭了浏览器才会被释放)

内存泄漏产生的条件:

当获取一个节点或者一组节点 然后又给这个节点添加了属性( 比如事件) 而在事件内部你又引用外部的东西。

解决;
1 在页面未加载的时候将添加的属性去掉

window.onunload = function(){
    odiv.onclick = null;
}

2 var id = odiv.id;
odiv.onclick = function(){

  alert(id);
}
odiv = null;

 

以上是关于JS闭包那些事的主要内容,如果未能解决你的问题,请参考以下文章

JS异步那些事 四(HTML 5 Web Workers)

React.js入门必须知道的那些事

js 属性的那些事

关于js中属性那些事

JS获取radio的那些事

探讨 JS 的面向对象中继承的那些事