前端农民工
0%

浅析JavaScript闭包

发表于 更新于 分类于

引用维基百科：在计算机科学中，闭包（英语：Closure），又称词法闭包（Lexical Closure）或函数闭包（function closures），引用了自由变量的函数。这个被引用的自由变量将和这个函数一同存在，即使已经离开了创造它的环境也不例外。

从维基百科对闭包的解释来看，我们可以这么认为：定义在闭包中的函数，可以记住它被创建时的环境。

闭包是JavaScript非常重要的一个语言特性，在理解闭包之前，我们先来看看JavaScript中的变量以及变量作用域。

变量与变量作用域

  1. 变量的声明

JavaScript是大小写敏感的，使用Unicode字符集。在JavaScript中，语句被称为statements,并用分号分隔（；）。在程序中，使用变量来为值命名，变量的名称称为identifiers,它需要遵守一定的规则，在JavaScript语言中，一个标识符(identifier)必须以字母、下划线(_)或者美元($)符号开头；后续的字符可以包含数字(0~9)。关于变量的声明有三种：

  • var:使用关键字var声明变量，例如：var x = 666,同时可以将变量初始化为一个值，这个语法也可以用来声明局部和全局变量。值得注意的是,如果对变量直接赋值，例如：x = 2333,这样会声明一个全局变量并会导致JavaScript编译时产生一个严重警告，所以要尽量避免这种声明方式。

  • let:使用关键字let声明了一个块范围作用域变量，例如：let = 999, 同时将变量初始化为一个值。

  • const:使用const关键字可以声明一个只读的常量，例如π。

2.对变量求值

使用var或者let声明变量时，如果未赋值，会被设定一个默认值undefined，在程序中访问一个未初始化(未声明)的变量，会抛出ReferenceError异常：

var a;
console.log("a的值是：" + a);//输出-> a的值是：undefined
console.log("b的值是：" + b);//输出-> Uncaught ReferenceError: b is not defined

undefined值在布尔类型环境中会被当做false，例如下面的代码：

var a;
if(a){
    console.log("a的值是：" + a);
}else{
    console.log("a的值是：" + a + ",证明undefined在布尔环境中被当做false。");
}
//以上代码执行后输出-> a的值是：undefined,证明undefined在布尔环境中被当做false。

undefined值在数值型环境中会被转换为NaN，例如下面的代码：

var a;
consoloe.log(a+666);//输出 ->NaN

另外，对一个null的变量求值，空值null会在数值型环境中被当做0，在布尔类型环境中会被当做false。

3.变量的作用域

在函数之外声明的变量是全局变量，它的值在整个程序都可以访问和修改，在函数内部声明的变量是局部变量，每当函数执行时，就会创建和摧毁该变量，并且无法通过函数之外的任何代码访问该变量。变量的参数也属于局部变量。

var a = 666;
function test() {
    var b = 999;
    console.log('a的值是：' + a);
}
test();//a的值是：666
console.log('b的值是：' + b);//ReferenceError: b is not defined

关于let和const声明的块范围变量，本文暂不作讨论。

4.变量提升

JavaScript的变量声明具有变量提升(hoisting)机制，JavaScript引擎在执行的时候，会把所有变量的声明都提升到当前作用域的最前面。如果变量是局部变量，则提升到函数的最前面，如果变量是全局变量，则提升到全局作用域的开头。看下面一段代码：

var a = 'hello';
(function(){
    console.log(a);
    var a = 'javascript'
})();

这段代码的运行结果是：undefined。从运行结果来看，我们可以发现两点，一是function作用域里的变量v遮盖了上层作用域变量v；二是在function作用域内，变量v的声明被提升了。也就是说，上面的代码等价于：

var a = 'hello';
(functiton(){
    var v;
    console.log(v);
    v = 'world';
})();

当前作用域内的的变量和函数的声明都会提升到作用域的最前面，另外函数表达式不会被提升，这也是函数表达式与函数声明的区别。看以下代码：

(function(){
    f1();//Uncaught ReferenceError: f1 is not defined
    f2();
    var f1 = function(){};
    function f2(){}
})();

5.作用域链

当代码在一个环境中执行时，会创建变量对象的一个作用域链(scope chain)。作用域链的用途，是保证对执行环境有权访问的所有变量和函数的有序访问。作用域链的前端，始终都是当前执行的代码所在环境的变量对象。如果这个环境是一个函数，则将其活动对象作为变量对象。

每一个函数都有自己的执行环境，当执行流进一个函数时，函数环境就会被推入一个环境栈中，而在函数执行之后，栈将其环境弹出，把控制权返回给之前的执行环境，这个栈也就是作用域链。

看下面一段代码：

var name = 'javascript-closures';
function test(){
    var name = 'javascript';
    function f1(){
        var name = 'closures';
        console.log(name);
    }
    function f2(){
        console.log(name);
    }
    f1();
    f2();
}
test();

这段代码执行，当执行到f1()时，此时的作用域链是：f1()->test()->window,很显然在f1函数作用域内，声明并赋值了变量name,所以这时控制台将输出：closures;当执行f2时，此时的作用域链则是：f2->test()->window,由于在f2内部没有声明变量name,所以解释器会向上一级作用域查找这个变量，直到找到该变量的标示符或不再存在父作用域了（若仍没找到该变量，则返回undefined），很显然f2的执行结果是：javascript。

理解闭包

简单回顾了一下关于JavaScript变量的基础知识后，接下来开始谈谈我对闭包的理解。当然，在前面讲到作用域链的时候，其实已经使用到闭包的特性了。

什么是闭包呢？其实闭包就是：一个函数和它所引用的外部变量组成的实体。由于外部变量被引用了，所以它的生命被延长。外层函数执行完，按理说它的变量是要全部销毁的，但由于闭包的存在，之后执行此内部函数，通过闭包仍能访问到外层函数的变量，这也是闭包的特点。闭包的本质是：内部函数创建时，会保存在当前环境的作用域链(内部属性[[scope]])中，并且函数被保留下来，引擎不会对外层环境的变量对象进行销毁。

简单来说，闭包就是指有权访问另外一个函数作用域中的变量的函数。首先它是一个函数，其次能访问另外一个函数作用域的变量。来看看下面一个例子：

function getWeChat(){
    var wechat = 'wechatnumber';
    console.log(wechat);
}
function displayWeChat(){
    console.log(wechat);
}

很显然上面的代码执行displayWeChat的时候会报错，在displayWeChat函数内部并不能访问到getWeChat函数内部的变量wechat,但假如就是想要别人的微信号(wechat)呢？可以对上面的代码进行如下改动，就可以欢快地拿到别人的wechat了：

function getWeChat() {
    var wechat = 'wechatnumber';
    function displayWeChat() {
        console.log(wechat);
    }
    return displayWeChat;
}
var getWeChatNumber = getWeChat();
getWeChatNumber();//此时getWeChatNumber其实就是一个闭包了

从上面的例子可以看出，关于闭包，有三个特点：

  • 闭包可以访问当前函数以外的变量

看下面一段代码，html结构如下：

<div id="list">
    <li>项目一</li>
    <li>项目二</li>
    <li>项目三</li>
    <li>项目四</li>
</div>

JavaScript代码如下：

function bindClick(){
    var oList = document.getElementById('list');
    var aLi = oList.getElementsByTagName('li');
    for(var i = 0;i<aLi.length;i++){
        aLi[i].onclick = function() {
            alert('You click the ' + i + ' li tag.');
        }
    }
}
bindClick();

上述代码原本想要实现的功能是点击相应的li时，弹出提示用户点击的是第几个li,但这段js代码运行后的结果是：点击每个li标签，弹出的都是相同的结果”You click the 4 li tag”,这是什么原因呢，其实也就是作用域导致的问题，我们可以通过闭包，实现我们想要的结果，对js代码进行如下修改：

function bindClick(){
    var oList = document.getElementById('list');
    var aLi = oList.getElementsByTagName('li');
    for(var i = 0;i<aLi.length;i++){
        function a(i){
            aLi[i].onclick = function() {
                alert('You click the ' + i + ' li tag.');
            }
        }

        a(i);
    }
}
bindClick();

这时，运行js就能达到我们想要的效果了，函数a就是一个闭包，从上面的代码也可以看到，闭包可以访问当前函数以外的变量。

  • 即使外部函数已经返回，闭包仍能访问外部函数定义的变量

      function getDate(){
      var date = new Date();
      var year = date.getYear();
      var month = date.getMonth()+1;
      var day = date.getDate();
      var hour = date.getHours();
      var minute = date.getMinutes();
      var second = date.getSeconds();
      function date(){
          console.log('Today is ' + year + '-' + month + '-' + day +'　　' + hour +':' + minute + ':'+ second);
      }
      return date;
  }

  getDate()();//Today is 2016-5-29　　15:49:35　0.772378174152599
  getDate()();//Today is 2016-5-29　　15:49:35　0.1944137749432555
  • 闭包可以更新外部的变量
      function f1(){
      var a = 1;
      function geta() {
          a++;
          alert(a);        
      }
      return geta;    
  }

  var myFunc = f1();
  myFunc();//alert 2
  myFunc();//alert 3

闭包思考题

思考题一：

var name = "The Window";

var object = {
　　name : "My Object",
 
　　getNameFunc : function(){
　　　　return function(){
　　　　　　return this.name;
　　　　};
 
　　}
 
};
 
alert(object.getNameFunc()());

思考题二：

var name = "The Window";

var object = {
　　name : "My Object",
 
　　getNameFunc : function(){
　　　　var that = this;
　　　　return function(){
　　　　　　return that.name;
　　　　};
 
　　}
 
};
 
alert(object.getNameFunc()());
  • 本文作者： xiaoweihuang
  • 版权声明： 本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！