JavaScript闭包及实现循环绑定事件

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

一、JavaScript作用域：

JavaScript变量实际上只有两种作用域，全局变量和函数的内部变量。在函数内部任何一个地方定义的变量(var scope)其作用域都是整个函数体。
全局变量：指的是window对象下的对象属性。
作用域划分：基于上下文，以函数进行划分的，而不是由块划分的。
强调两点：
1. 在同一作用域中，JavaScript是允许变量的重复定义，并且后一个定义将覆盖前一个定义。
2. 函数内部如果不加关键字var而定义的变量，默认为全局变量。

var scope="global";
function t(){
    console.log(scope); //"global"
    scope="local"
    console.log(scope); //"local"
}
t();
console.log(scope); //"local"

var scope="global";
function t(){
    console.log(scope); //"undefined"
    var scope="local"
    console.log(scope); //"local"
}
t();
console.log(scope); //"global"

在变量解析过程中首先查找局部的作用域，然后查找上层作用域。在第一段代码的函数当中没有定义变量scope，于是查找上层作用域（全局作用域），进而进行输出其值。但是在第二段代码的函数内定义了变量scope（无论是在console之后还是之前定义变量，都认为在此作用域拥有变量scope），于是不再向上层的作用域进行查找，直接输出scope。但是不幸的是此时的局部变量i并没有赋值，所以输出的是undefined。

//所以根据函数作用域的意思，可以将上述第二段代码重写如下：
var scope="global";
function t(){
    var scope;
    console.log(scope);
    scope="local"
    console.log(scope);
}
t();

由于函数作用域的特性，局部变量在整个函数体始终是由定义的，我们可以将变量声明”提前“到函数体顶部。

var b;  //第1步
function fun(){ 
  b = "change"; 
} 
alert(b);//输出undefined，由于第1步只定义未赋值


var b;  //第1步
function fun(){ 
  b = "change"; 
}
fun(); //调用上述函数
alert(b); //输出change

当使用var声明一个变量时，创建的这个属性是不可配置的，也就是说无法通过delete运算符删除。

二、作用域实例：

<html>
<head>
  <script type="text/javascript">
    function buttonInit(){
      for(var i=1;i<4;i++){
        var b=document.getElementById("button"+i);
        b.addEventListener("click"，function(){ alert("Button"+i);}，false);
      }
    }
    window.οnlοad=buttonInit;
  </script>
</head>
<body>
  <button id="button1">Button1</button>
  <button id="button2">Button2</button>
  <button id="button3">Button3</button>
</body>
</html>

当注册事件结束后，i的值为4，当点击按钮时，事件函数即function(){ alert("Button"+i);}这个匿名函数中没有i，根据作用域链，所以到buttonInit函数中找，此时i的值为4，所以弹出”button4“。

三、javaScript闭包：

在js中，闭包主要涉及到js的几个其他的特性：作用域链，垃圾(内存)回收机制，函数嵌套，等等。

1. 作用域链：简单来说，作用域链就是函数在定义的时候创建的，用于寻找使用到的变量的值的一个索引，而他内部的规则是，把函数自身的本地变量放在最前面，把自身的父级函数中的变量放在其次，把再高一级函数中的变量放在更后面，以此类推直至全局对象为止。当函数中需要查询一个变量的值的时候，js解释器会去作用域链去查找，从最前面的本地变量中先找，如果没有找到对应的变量，则到下一级的链上找，一旦找到了变量，则不再继续。如果找到最后也没找到需要的变量，则解释器返回undefined。

2. Javascript的垃圾回收机制：在Javascript中，如果一个对象不再被引用，那么这个对象就会被GC回收。如果两个对象互相引用，而不再被第3者所引用，那么这两个互相引用的对象也会被回收。因为函数a被b引用，b又被a外的c引用，这就是为什么函数a执行后不会被回收的原因。构建一个闭包，这些变量将不会被内存回收器所回收，只有当内部的函数不被调用以后，才会销毁这个闭包，而没有任何一个闭包引用的变量才会被下一次内存回收启动时所回收。

3. 有了闭包,嵌套的函数结构才可以运作

四、利用js闭包实现循环绑定事件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
  <title>闭包</title>
</head>
<body>
  <ul id="list">
    <li>第1条记录</li>
    <li>第2条记录</li>
    <li>第3条记录</li>
    <li>第4条记录</li>
    <li>第5条记录</li>
    <li>第6条记录</li>
  </ul>
  <script type="text/javascript">
    function tt(nob) {
      this.clickFunc = function() {
        alert("这是第" + (nob + 1) + "记录");
      }
    }
    var list_obj = document.getElementById("list").getElementsByTagName("li"); //获取list下面的所有li的对象数组
    for (var i = 0; i<= list_obj.length; i++){
      console.log(list_obj[i])
      list_obj[i].onmousemove = function(){
        this.style.backgroundColor = "#cdcdcd";
      }
      list_obj[i].onmouseout = function() {
        this.style.backgroundColor = "#FFFFFF";
      }
      //list_obj[i].onclick = function() {
      //  alert("这是第" + i + "记录"); //不能正常获取 alert出来的都是：“这是第6记录”
      //}
      var col = new tt(i); //调用tt函数
      list_obj[i].onclick = col.clickFunc; //执行clickFunc函数
    }
  </script>
</body>
</html>