javascript中的作用域和闭包详解


Posted in Javascript onJanuary 13, 2016

一、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程序设计有所帮助。

Javascript 相关文章推荐
Prototype Object对象 学习
Jul 12 Javascript
Jquery.addClass始终无效原因分析
Sep 08 Javascript
jQuery 实现侧边浮动导航菜单效果
Dec 26 Javascript
js实现点击文本框显示日期选择器特效代码分享
May 21 Javascript
jquery动态增加删减表格行特效
Nov 20 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
May 15 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
Mar 03 Javascript
原生JS京东轮播图代码
Mar 22 Javascript
详解Node.js中exports和module.exports的区别
Apr 19 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
May 22 Javascript
Vue2.0如何发布项目实战
Jul 27 Javascript
Javascript组合继承方法代码实例解析
Apr 02 Javascript
JSON+Jquery省市区三级联动
Jan 13 #Javascript
Easyui form combobox省市区三级联动
Jan 13 #Javascript
轻松实现javascript图片轮播特效
Jan 13 #Javascript
简单的JS时钟实例讲解
Jan 13 #Javascript
基于jquery实现的仿优酷图片轮播特效代码
Jan 13 #Javascript
详解iframe与frame的区别
Jan 13 #Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
Jan 13 #Javascript
You might like
vs中通过剪切板循环来循环粘贴不同内容
2011/04/30 PHP
shopex中集成的站长统计功能的代码简单分析
2011/08/11 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题分析
2007/08/12 Javascript
jQuery中判断一个元素是否为另一个元素的子元素(或者其本身)
2012/03/21 Javascript
JQuery的自定义事件代码,触发,绑定简单实例
2013/08/01 Javascript
js获取上传文件大小示例代码
2014/04/10 Javascript
JavaScript实现九九乘法表的简单实例
2016/06/07 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
2017/04/12 Javascript
微信小程序开发入门基础教程
2017/04/19 Javascript
js实现水平滚动菜单导航
2017/07/21 Javascript
Vue组件和Route的生命周期实例详解
2018/02/10 Javascript
vue服务端渲染添加缓存的方法
2018/09/18 Javascript
在微信小程序中渲染HTML内容的方法示例
2018/09/28 Javascript
vue.js层叠轮播效果的实例代码
2018/11/08 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
2019/08/05 Javascript
微信小程序页面间传递数组对象方法解析
2019/11/06 Javascript
JavaScript实现点击图片换背景
2020/11/20 Javascript
零基础写python爬虫之抓取百度贴吧并存储到本地txt文件改进版
2014/11/06 Python
python网络爬虫之如何伪装逃过反爬虫程序的方法
2017/11/23 Python
浅谈django model postgres的json字段编码问题
2018/01/05 Python
Python Tkinter模块实现时钟功能应用示例
2018/07/23 Python
Python数据分析matplotlib设置多个子图的间距方法
2018/08/03 Python
python中几种自动微分库解析
2019/08/29 Python
css3隔行变换色实现示例
2014/02/19 HTML / CSS
css3 伪类选择器快速复习小结
2019/09/10 HTML / CSS
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
2014/06/16 HTML / CSS
匈牙利最大的健身制造商和销售商:inSPORTline
2018/10/30 全球购物
技术学校毕业生求职信分享
2013/12/02 职场文书
房屋继承公证书
2014/04/10 职场文书
科学育儿宣传标语
2014/10/08 职场文书
群众路线教育查摆剖析材料
2014/10/10 职场文书
北京故宫导游词
2015/01/31 职场文书
公司慰问信范文
2015/03/23 职场文书
2015年医院药剂科工作总结
2015/05/04 职场文书
MySQL中order by的使用详情
2021/11/17 MySQL
python_tkinter事件类型详情
2022/03/20 Python