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 相关文章推荐
项目实践之javascript技巧
Dec 06 Javascript
什么是JavaScript
Aug 13 Javascript
代码获取历史上的今天发生的事
Apr 11 Javascript
JS实现复制功能
Mar 01 Javascript
vue router使用query和params传参的使用和区别
Nov 13 Javascript
微信小程序实现tab左右切换效果
Nov 15 Javascript
vue-router实现嵌套路由的讲解
Jan 19 Javascript
微信小程序template模版的使用方法
Apr 13 Javascript
通过jQuery学习js类型判断的技巧
May 27 jQuery
vue中axios的二次封装实例讲解
Oct 14 Javascript
基于原生js实现九宫格算法代码实例
Jul 03 Javascript
原生js实现简单轮播图
Oct 26 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
Terran建筑一览
2020/03/14 星际争霸
用PHP程序实现支持页面后退的两种方法
2008/06/30 PHP
PHP中比较两个字符串找出第一个不同字符位置例子
2014/04/08 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
jquery validation插件表单验证的一个例子
2010/03/03 Javascript
Javascript load Page,load css,load js实现代码
2010/03/31 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件。
2011/12/26 Javascript
对Jquery中的ajax再封装,简化操作示例
2014/02/12 Javascript
JavaScript与jQuery实现的闪烁输入效果
2016/02/18 Javascript
JS简单循环遍历json数组的方法
2016/04/22 Javascript
Javascript删除指定元素节点的方法
2016/06/21 Javascript
JS关闭窗口时产生的事件及用法示例
2016/08/20 Javascript
jQuery插件WebUploader实现文件上传
2016/11/07 Javascript
Vue.js 2.5新特性介绍(推荐)
2017/10/24 Javascript
微信小程序数据存储与取值详解
2018/01/30 Javascript
vue中实现移动端的scroll滚动方法
2018/03/03 Javascript
react 中父组件与子组件双向绑定问题
2019/05/20 Javascript
用Angular实现一个扫雷的游戏示例
2020/05/15 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
2020/07/21 Javascript
[02:40]DOTA2殁境神蚀者 英雄基础教程
2013/11/26 DOTA
[03:43]2014DOTA2西雅图国际邀请赛 newbee战队巡礼
2014/07/07 DOTA
Python中统计函数运行耗时的方法
2015/05/05 Python
Pyinstaller将py打包成exe的实例
2018/03/31 Python
Python字典推导式将cookie字符串转化为字典解析
2019/08/10 Python
pandas 空数据处理方法详解
2019/11/02 Python
关于Pytorch的MLP模块实现方式
2020/01/07 Python
手把手教你用Django执行原生SQL的方法
2021/02/18 Python
python 对xml解析的示例
2021/02/27 Python
购买美国制造的相框和画框架:Picture Frames
2018/08/14 全球购物
小学新教师培训方案
2014/02/03 职场文书
运动会跳远广播稿5篇
2014/09/17 职场文书
反腐倡廉剖析材料
2014/09/30 职场文书
升职自我推荐信范文
2015/03/25 职场文书
会计出纳岗位职责
2015/03/31 职场文书
绿色环保倡议书
2015/04/28 职场文书
怎么禁用Win11输入法 最新Win11输入法关闭教程
2022/08/05 数码科技