javascript中的作用域和闭包详解

更新时间：2016年01月13日 15:58:39 作者：奋飛

这篇文章主要向大家介绍了javascript中的作用域和闭包，以及利用js闭包实现循环绑定事件，感兴趣的小伙伴们可以参考一下

一、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.onload=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闭包实现循环绑定事件

<html> 
<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>

以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。

您可能感兴趣的文章:

H5 js点击按钮复制文本到粘贴板
这篇文章主要为大家详细介绍了H5 js点击按钮复制文本到粘贴板，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11
javascript判断是手机还是电脑访问网页的简单实例分享
在智能手机越来越普及甚至是泛滥的时候，确实给大家的生活带来了很大的方便，但是对于web前端设计师来说，可就麻烦多了，现在很多的网站在制作过程中都要考虑到手机访问的问题，那么我们如何来判断客户端是不是手机呢，下面分享个例子吧
2014-06-06
Javascript定义类（class）的三种方法详解
这篇文章主要介绍了Javascript定义类（class）的三种方法详解,本文讲解了构造函数法、Object.create()法、极简主义法三种方法,需要的朋友可以参考下
2015-03-03
javascript正则表达式之search()用法实例
这篇文章主要介绍了javascript正则表达式之search()用法,实例分析了search()的使用技巧,需要的朋友可以参考下
2015-01-01
Qt6基于Qml的文件对话框演示效果
这篇文章主要介绍了Qt6基于Qml的文件对话框演示,包括打开单个文件配置和打开多个文件配置及保存文件配置的方法，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下
2022-10-10
javascript验证内容为数字以及长度为10的简单实例
下面小编就为大家带来一篇javascript验证内容为数字以及长度为10的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-08-08
JavaScript类型相关的常用操作总结
这篇文章主要给大家总结介绍了关于JavaScript类型相关的常用操作，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-02-02
深入理解JavaScript系列(6)：S.O.L.I.D五大原则之单一职责SRP
Bob大叔提出并发扬了S.O.L.I.D五大原则，用来更好地进行面向对象编程
2012-01-01
5个书写JavaScript代码的坏习惯，看看你中枪了没？
这篇文章主要介绍了5个书写JavaScript代码的坏习惯，看看你中枪了没？,本文指出了你没有使用命名空间、变量定义的东一个西一个、Javascript的变量范围、Javascript的面向对象、new关键字等问题,需要的朋友可以参考下
2014-11-11
Fetch超时设置与终止请求详解
这篇文章主要给大家介绍了关于Fetch超时设置与终止请求的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Fetch具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-05-05