zoukankan      html  css  js  c++  java
  • 浅谈JavaScript中的闭包

     

    浅谈JavaScript中的闭包

    在JavaScript中,闭包是指这样一个函数:它有权访问另一个函数作用域中的变量。

    创建一个闭包的常用的方式:在一个函数内部创建另一个函数。
    比如:
     
    1 function compareByProperty(propertyName){
    2     returnfunction(obj1,obj2){
    3         return obj1[propertyName] -  obj2[propertyName];
    4     }
    5 }

     

     
    该例中,compareByProperty内部的匿名函数有权利访问compareByProperty函数中的活动变量。
     
    调用:
    1 var compareNames = compareByProperty("name");
    2 var result = compareNames({name:"jack"},{name:"rose"});// < 0

     

    在compareByProperty()执行完之后,其活动对象不会被销毁,这是因为匿名函数的作用域链仍在引用这个活动对象。也就是说:当compareByProperty()函数返回之后,其本身执行环境的作用域会被销毁,但是它的活动对象仍留在内存中,供匿名函数使用。直到这个匿名函数被销毁了,这个活动对象才会被销毁。
    所以,当执行:
    compareNames = null;
    之后,解除掉了匿名函数,compareByProperty()的活动对象也随之被销毁。
    下图展示了调用compareNames()时产生的作用域链:
     
     
    1、闭包与变量:
    思考一下这样一个问题:
     1 function createFunction(){
     2     var func =newArray();
     3     vari;
     4     for(i=0;i<10;i++){
     5         func[i]=function(){
     6             return i;
     7         };
     8     }
     9     return func;
    10 }

     

    你可能会觉得func数组里面的函数应该返回其对应的索引值,
    比如你觉得下面这些代码的执行结果是:0-9
    1 var funArr = createFunction();
    2 var i;
    3 for(i=0;i<funArr.length;i++){
    4     console.log(funArr[i]());
    5 }

     

    (我强烈建议你在你的浏览器中执行一下这些代码)。
     
    但是,很不幸,它们每一个都返回10,不用觉得不科学,这和我们日常的思维习惯不同。
    请注意:闭包的作用域链保存的是包含这个闭包的活动对象。
    也就是说,func里面的每一个元素,其作用域链保存(或者说“引用”更为恰当)的都是 createFunction()这个函数的活动对象(其中包括 i )
    每一次循环,i 都会变化,最后返回createFunction()返回时,i 的值是10,看到这里,如果你真的理解了,那么你就知道,为什么func里面的每一个元素调用后都是返回10.
     
    如果将代码改变一下,结果就完全不一样了:
     1 function createFunction(){
     2     var func =newArray();
     3     var i;
     4     for(i =0; i<10;i++){
     5         func[i]=function(num){
     6             returnfunction(){
     7                 return num;
     8             }
     9         }(i);
    10     }
    11     return func;
    12 }
     
    在上面的代码中,我们不将一个匿名函数赋值给func[i],而是立即调用一个匿名函数,然后将这个匿名函数的返回值(也是一个匿名函数) 赋值给func[i],这样做能达到我们预想的效果(func的每一个元素调用后的返回值都是其对应的下标)的原因是:我们传入了变量i,由于函数参数是值传递的,所以变量i的值会被复制给参数num,而在这个匿名函数内部,创建了一个闭包,这个闭包访问的是包含它的那个函数的活动变量(num),这样一来,func数组里面的每一个元素调用后都会得到一个自己的num变量的副本,所以就可以返回各自对应的num的值了。
     
    2、闭包中的this对象(为什么又是this!!!)
    看一个例子:
     1 var name = "The window";
     2 var myObj = {
     3         name : "My Object",
     4         getNameFunc : function(){
     5             return function(){
     6                 return this.name;
     7             }
     8         }
     9 }
    10 console.log(myObj.getNameFunc()()); //非严格模式下

     

     
    程序运行的结果是在控制台打印出"The window";
    为什么?
     
    我们看这一句:myObj.getNameFunc()(),拆解一下:
    var a = myObj.getNameFunc();
    a();
     
    当调用myObj.getNameFunc()时,其作用域是myObj这个对象,它返回了一个闭包,我们将这个闭包赋值给a
    当调用a时,其作用域不再是 myObj这个对象了,这次我们是在window这个对象中用它,这个时候,由于闭包的特性(访问包含这个闭包的那个函数的活动变量),this就指向window这个对象,而this.name自然就是指在全局定义的"The window"。
     
    我们把代码改一下:
     1 var name = "The window";
     2 var myObj = {
     3         name : "My Object",
     4         getNameFunc : function(){
     5             var that = this;
     6             return function(){
     7                 return that.name;
     8             }
     9         }
    10 }
    11 console.log(myObj.getNameFunc()()); //非严格模式下

     

    在这里,调用myObj.getNameFunc()时,作用域是myObj这个对象,它先是将this(即myObj)赋值给 that
    然后,返回一个闭包,我们将这个闭包赋值给b。前面我们提到,函数getNameFunc()返回之后,它自身的作用域会被销毁,但是,由于存在闭包仍然在引用着它的活动变量,所以,这个来自于getNameFunc()的活动变量(this)并不会被销毁,而是一直保留在内存中,供闭包使用,直到闭包被销毁(如:赋值为null),再没有别的闭包引用这个活动变量,这个活动变量才会被垃圾回收。这样,当调用b时,访问到的that.name,是来自于myObj的。
     
    总之:如果想访问this 或者 是arguments对象,必须要将这两个对象的引用保存到另一个闭包能访问到变量中。
  • 相关阅读:
    矩阵特征值和椭圆长短轴的关系?
    Harris角点检测原理详解
    SIFT特征提取分析
    Sift中尺度空间、高斯金字塔、差分金字塔(DOG金字塔)、图像金字塔
    图像处理与计算机视觉的经典书籍
    霍夫变换
    熔断原理与实现Golang版
    如何利用go-zero在Go中快速实现JWT认证
    如何让服务在流量暴增的情况下保持稳定输出
    企业级RPC框架zRPC
  • 原文地址:https://www.cnblogs.com/iceseal/p/3868660.html
Copyright © 2011-2022 走看看