javascript中的作用域和闭包详解_javascript技巧

一、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闭包详解、javascript 闭包、javascript闭包面试题、javascript闭包的作用、javascript 闭包理解,以便于您获取更多的相关知识。

时间: 2016-01-13

javascript中的作用域和闭包详解_javascript技巧的相关文章

JavaScript中浅讲ajax图文详解_javascript技巧

1.ajax入门案例 1.1 搭建Web环境 ajax对于各位来说,应该都不陌生,正因为ajax的产生,导致前台页面和服务器之间的数据传输变得非常容易,同时还可以实现页面的局部刷新.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 对于JavaWeb项目而言,ajax主要用于浏览器和服务器之间数据的传输. 如果是单单地堆砌知识点,会显得比较无聊,那么根据惯例,我先不继续介绍ajax,而是来写一个案例吧. 打开

JavaScript中的splice方法用法详解_javascript技巧

JavaScript中的splice主要用来对js中的数组进行操作,包括删除,添加,替换等. 注意:这种方法会改变原始数组!. 1.删除-用于删除元素,两个参数,第一个参数(要删除第一项的位置),第二个参数(要删除的项数) 2.插入-向数组指定位置插入任意项元素.三个参数,第一个参数(插入位置),第二个参数(0),第三个参数(插入的项) 3.替换-向数组指定位置插入任意项元素,同时删除任意数量的项,三个参数.第一个参数(起始位置),第二个参数(删除的项数),第三个参数(插入任意数量的项) 示例:

JavaScript中push(),join() 函数 实例详解_javascript技巧

定义和用法 push方法 可向数组的末尾添加一个或多个元素,并返回一个新的长度. join方法 用于把数组中所有元素添加到一个指定的字符串,元素是通过指定的分隔符进行分割的. 语法 arrayObject.push(newelement1,newelement2,....,newelementX) arrayObject.join(separator). 参数描述newelement1必需.要添加到数组的第一个元素.newelement2可选.要添加到数组的第二个元素.newelementX可选

JavaScript中定义类的方式详解_javascript技巧

本文实例讲述了JavaScript中定义类的方式.分享给大家供大家参考,具体如下: Javascript本身并不支持面向对象,它没有访问控制符,它没有定义类的关键字class,它没有支持继承的extend或冒号,它也没有用来支持虚函数的virtual,不过,Javascript是一门灵活的语言,下面我们就看看没有关键字class的Javascript如何实现类定义,并创建对象. 一.定义类并创建类的实例对象 在Javascript中,我们用function来定义类,如下: function Sh

JavaScript中文件上传API详解_javascript技巧

对于Web程序员来说,在网页上处理文件上传,总是一件很麻烦的事情.在过去,我们不能够通过拖拽上传图片,也没有复杂Ajax上传技术,很少处理多文件批量上传.我们也无法获取上传过程中的信息,除非上传完成后从服务器端获得.有时候,等你上传完毕后才发现上传的文件不合适! 如今,HTML5的革命,现代浏览器的诞生,JavaScript的升级,这些给我们提供了使用Javascript和input[type=file]元素获取上传文件过程信息的能力. 下面就来看看这些上传文件API是如何使用的! 访问要上传的

Javascript中内建函数reduce的应用详解_javascript技巧

前言 一般而言,可以通过reduce方法实现的逻辑都可以通过forEach方法来变相的实现,虽然不清楚浏览器的js引擎是如何在C++层面实现这两个方法,但是可以肯定的是reduce方法肯定也存在数组的遍历,在具体实现细节上是否针对数组项的操作和存储做了什么优化,则不得而知. 数组的reduce方法的应用 reduce方法有两个参数,第一个参数是一个callback,用于针对数组项的操作:第二个参数则是传入的初始值,这个初始值用于单个数组项的操作.需要注意的是,reduce方法返回值并不是数组,而

JavaScript中window.open用法实例详解_javascript技巧

本文较为详细的分析了JavaScript中window.open用法.分享给大家供大家参考.具体如下: 复制代码 代码如下: <script LANGUAGE="javascript"> window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no,resizable=no,location=no, sta

javascript中活灵活现的Array对象详解_javascript技巧

前言 JavaScript中的Array对象,就是我们常说的数组对象,主要用于封装多个任意类型的数据,并对它们进行管理. 所有主流浏览器均支持Array对象. 大家都知道Array实例有这四个方法:push.pop.shift.unshift.大家也都知道 push + pop实现栈, shift + push实现队列.在这里不讨论什么先进后出.先进先出. 但一面这个题将要用到这几个方法. 题目 螺旋矩阵这个名词,在后台语言中可能很熟悉,他是个二维数组,他有什么特点呢?请看下图: 以上是一个从外

JavaScript中的迭代器和生成器详解_javascript技巧

处理集合里的每一项是一个非常普通的操作,JavaScript提供了许多方法来迭代一个集合,从简单的for和for each循环到 map(),filter() 和 array comprehensions(数组推导式).在JavaScript 1.7中,迭代器和生成器在JavaScript核心语法中带来了新的迭代机制,而且还提供了定制 for-in 和 for each 循环行为的机制. 迭代器 迭代器是一个每次访问集合序列中一个元素的对象,并跟踪该序列中迭代的当前位置.在JavaScript中