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 相关文章推荐
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
Aug 13 Javascript
jquery ajax方式直接提交整个表单核心代码
Aug 15 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
Nov 25 Javascript
当达到输入长度时表单自动切换焦点
Apr 06 Javascript
javascript实例--教你实现扑克牌洗牌功能
May 15 Javascript
js动态添加onclick事件可传参数与不传参数
Jul 29 Javascript
Javascript实现的Map集合工具类完整实例
Jul 31 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
Jun 25 Javascript
深入分析javascript中的错误处理机制
Jul 17 Javascript
JavaScript实现瀑布流以及加载效果
Feb 11 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
Mar 07 Javascript
vue.js实现左边导航切换右边内容
Oct 21 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
PHP yii实现model添加默认值的方法(两种方法)
2016/11/10 PHP
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
2007/06/29 Javascript
jquery下json数组的操作实现代码
2010/08/09 Javascript
JS函数验证总结(方便js客户端输入验证)
2010/10/29 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
2014/12/12 Javascript
分享10个原生JavaScript技巧
2015/04/20 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
2015/05/03 Javascript
javascript自定义in_array()函数实现方法
2015/08/03 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
2016/04/17 Javascript
轻松掌握JavaScript代理模式
2016/08/26 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
2017/08/11 Javascript
JavaScript中如何判断一个值的类型
2017/09/15 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
2017/10/12 Javascript
javascript数组拍平方法总结
2018/01/20 Javascript
Array数组对象中的forEach、map、filter及reduce详析
2018/08/02 Javascript
微信 jssdk 签名错误invalid signature的解决方法
2019/01/14 Javascript
基于Tensorflow高阶读写教程
2020/02/10 Python
Python 定义只读属性的实现方式
2020/03/05 Python
python判断是空的实例分享
2020/07/06 Python
5 分钟读懂Python 中的 Hook 钩子函数
2020/12/09 Python
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
2012/12/09 HTML / CSS
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
html5视频常用API接口的实战示例
2020/03/20 HTML / CSS
毕业典礼主持词大全
2014/03/26 职场文书
廉洁使者实施方案
2014/03/29 职场文书
请假条标准格式规范
2014/04/10 职场文书
取保候审保证书
2014/04/30 职场文书
奠基仪式策划方案
2014/05/15 职场文书
青春励志演讲稿范文
2014/08/25 职场文书
离婚财产处理协议书
2014/09/30 职场文书
公司庆典欢迎词
2015/01/26 职场文书
交通事故被告答辩状
2015/05/22 职场文书
2015暑假假期总结
2015/07/13 职场文书
2019同学聚会主持词
2019/05/06 职场文书
详解CSS故障艺术
2021/05/25 HTML / CSS
ConditionalOnProperty配置swagger不生效问题及解决
2022/06/14 Java/Android