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 相关文章推荐
Webkit的跨域安全问题说明
Sep 13 Javascript
document.write()及其输出内容的样式、位置控制
Aug 12 Javascript
ActiveX控件与Javascript之间的交互示例
Jun 04 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
Mar 02 Javascript
基于JS实现EOS隐藏错误提示层代码
Apr 25 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
Sep 06 Javascript
security.js实现的RSA加密功能示例
Jun 06 Javascript
JavaScript执行环境及作用域链实例分析
Aug 01 Javascript
npm qs模块使用详解
Feb 07 Javascript
javascript中的with语句学习笔记及用法
Feb 17 Javascript
React.js组件实现拖拽排序组件功能过程解析
Apr 27 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
Nov 16 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获取后台Job管理的实现代码
2011/06/10 PHP
PHP经典实用正则表达式小结
2017/05/04 PHP
laravel框架学习笔记之组件化开发实现方法
2020/02/01 PHP
非常好的js代码
2006/06/27 Javascript
extjs form textfield的隐藏方法
2008/12/29 Javascript
基于jquery的超简单上下翻
2010/04/20 Javascript
textarea中的手动换行处理的jquery代码
2011/02/26 Javascript
这些年、我收集的JQuery代码小结
2012/08/01 Javascript
javascript中window.event事件用法详解
2012/12/11 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
2013/01/11 Javascript
js浏览器本地存储store.js介绍及应用
2014/05/13 Javascript
JavaScript基础教程之alert弹出提示框实例
2014/10/16 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
2016/07/24 Javascript
AngularJS基础 ng-include 指令简单示例
2016/08/01 Javascript
Javascript typeof与instanceof的区别
2016/10/18 Javascript
javascript获取元素的计算样式
2019/05/24 Javascript
vue实现路由切换改变title功能
2019/05/28 Javascript
JS开发 富文本编辑器TinyMCE详解
2019/07/19 Javascript
微信小程序商品详情页底部弹出框
2019/11/22 Javascript
jQuery实现数字华容道小游戏(实例代码)
2020/01/16 jQuery
Javascript原型链及instanceof原理详解
2020/05/25 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
2020/06/24 jQuery
[45:25]完美世界DOTA2联赛循环赛 PXG vs IO 第一场 11.06
2020/11/09 DOTA
pycharm下查看python的变量类型和变量内容的方法
2018/06/26 Python
Python通过调用有道翻译api实现翻译功能示例
2018/07/19 Python
python 利用浏览器 Cookie 模拟登录的用户访问知乎的方法
2019/07/11 Python
Python chardet库识别编码原理解析
2020/02/18 Python
Python使用ElementTree美化XML格式的操作
2020/03/06 Python
python 基于PYMYSQL使用MYSQL数据库
2020/12/24 Python
纯CSS3实现绘制各种图形实现代码详细整理
2012/12/26 HTML / CSS
HTML5语音识别标签写法附图
2013/11/18 HTML / CSS
2014年迎新年联欢会活动策划方案
2014/02/26 职场文书
财务总监岗位职责范本
2015/04/03 职场文书
党员反四风学习心得体会
2016/01/22 职场文书
Python如何解决secure_filename对中文不支持问题
2021/07/16 Python
游戏《我的世界》澄清Xbox版暂无计划加入光追
2022/04/03 其他游戏