码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript中的闭包

时间:2018-01-13 18:49:04      阅读:203      评论:0      收藏:0      [点我收藏+]

标签:cat   前端   catch   关系   过多   val   array   bar   span   

  有不少开发人员总是搞不清匿名函数和闭包这两个概念,因此经常混用。闭包是指有权访问另一个函数作用域中的变量的函数。创建闭包的常见方式,就是在一个函数内部创建另一个函数。看下面的例子

 1 function createComparisonFunction(propertyName) {
 2   return function(object1, object2) {
 3     var value1 = object1[propertyName];
 4     var value2 = object2[propertyName];
 5     if (value1 < value2) {
 6       return -1;
 7     } else if (value1 > value2) {
 8       return 1;
 9     } else {
10       return 0;
11     }
12   }
13 }
14 
15 var clo = createComparisonFunction(‘name‘);
16 var res = clo({‘name‘:‘Jeff‘}, {‘name‘:‘Tim‘});
17 console.log(res);

  至于inner function为什么能够访问parent function中的变量(这里指的是propertyName)?

  我们需要先来搞清楚几个概念,执行环境(execution context),活动对象(activation object),变量对象(variable object),作用域链(scope chain)

  什么是执行环境?可以抽象的理解成是一个Object,它有一系列的属性,也叫做当前执行环境的状态。看下面的图表,除了这三个必要的属性,一个执行环境也可能会有其它的属性,这取决于它的实现。  

  技术分享图片

  什么是变量对象?变量对象是和当前执行环境相关联的一个数据容器,它是一个特殊的对象,存储着当前执行环境中的变量和函数声明,注意,不包括函数表达式,在不同的执行环境中,它指代的对象也不同,例如,在全局环境中,变量对象就是全局对象本身,这也是为什么我们能够通过全局对象(window)的属性引用全局变量了,那在function context中,变量对象又是什么呢?在函数作用域中,变量对象可认为是活动对象(activation object)

  那什么是活动对象呢?当一个函数被调用的时候活动对象会被创建,调用这个函数的主体我们称之为caller,caller也是一个特殊的对象,活动对象包含函数的参数,特殊的arguments对象(一个函数参数和索引的map),还有函数内部的变量和函数声明。在函数作用域中,活动对象被作为是当前环境中的变量对象使用。看下面的例子

1 function foo(x, y) {
2   var z = 30;
3   function bar() {} // FD
4   (function baz() {}); // FE
5 }
6  
7 foo(10, 20);
  foo function context的活动对象是这样的
  技术分享图片

  什么是作用域链呢?A scope chain is a list of objects that are searched for identifiers appear in the code of the context.规则类似于prototype chain,如果某个变量标识符在当前作用域中没有找到,则到parent的作用域(变量对象)中去查找,一层层往上查找,这样在当前环境中没有查找到需要到上层才能查到的变量称之为free variable。而free variable的查找则是通过作用域链实现的,通常来说,一个作用域链就是一系列的parent variable objects 加上 函数自身的变量对象或活动对象,然而,这个作用域链也可能包含一些在环境执行期间被动态添加的对象,例如使用with 声明 或 catch。

  来看下面的例子

 1 function compare(value1, value2) {
 2   if (value1 < value2) {
 3     return -1;
 4   } else if (value1 > value2) {
 5     return 1;
 6   } {
 7     return 0;
 8   }
 9 }
10 
11 var result = compare(5, 10);

 

  下图展示了包含上述关系的compare函数执行时的作用域链

  技术分享图片      

  全局环境的变量对象始终存在,而像compare()函数这样的局部环境的变量对象,则只在函数执行的过程中存在。注意这些对象的先后顺序,在创建compare函数时,会创建一个预先包含全局变量对象的作用域链,这个作用域链被保存在内部的[[Scope]]属性中。当调用compare函数时,会为函数创建一个执行环境,然后通过复制函数的[[Scope]]属性中的对象构建起执行环境的作用域链。此后,又有一个活动对象(在此作为变量对象使用)被创建并被推入执行环境作用域链的前端。对于这个例子中compare函数的执行环境而言,其作用域链中包含两个变量对象,本地活动对象和全局变量对象。显然,作用域链本质上是一个指向变量对象的指针列表,它只引用但不实际包含变量对象。

  下面回到最初的那个闭包函数,看一下它的作用域链

技术分享图片

  在一个函数内部定义的函数会将包含函数(即外部函数)的活动对象添加到它的作用域链中。因此在createComparisonFunction内定义的匿名函数的作用域链中,实际上会包含外部函数createComparisonFunction的活动对象。在匿名函数被返回后,它的作用域链被初始化为包含createComparisonFunction的活动对象和全局变量对象,这样匿名函数就可以访问在createComparisonFunction中定义的变量了。更为重要的是,createComparisonFunction函数在执行完毕后,其活动对象也不会被销毁,因为匿名函数的作用域链仍然在引用这个活动对象,换句话说,createComparisonFunction函数返回后,其执行环境的作用域链会被销毁,但它的活动对象仍然会留在内存中;直到匿名函数被销毁,createComparisonFunction的活动对象才会被销毁,这里执行代码clo = null即可销毁匿名函数。

  由于闭包会携带包含它的函数的作用域,因此会比其它函数占用更多的内存。过度使用闭包可能会导致内存占用过多。

  下面我们来看闭包与变量的两个例子

 1 function createFunctions() {
 2   var result = new Array();
 3   
 4   for (var i = 0; i < 10; i++) {
 5     result[i] = function() {
 6       return i;
 7     }
 8   }
 9   return result;
10 }
11 
12 var result = createFunctions();
13 console.log(result[1]());    // 10
14 console.log(result[3]());   // 10
15 
16 function createFunctionsChanged() {
17   var result = new Array();
18   
19   for (var i = 0; i < 10; i++) {
20     result[i] = function(num) {
21       return function(){
22         return num;
23       };
24     }(i)
25   }
26   return result;
27 }
28 
29 var result = createFunctionsChanged();
30 console.log(result[1]());   // 1
31 console.log(result[3]());  // 3

 

  在第二个例子中,我们没有直接把闭包赋值给数组,而是定义了一个匿名函数,并将立即执行匿名函数的结果赋值给数组。 在调用每个匿名函数时,我们传入了变量i。由于函数传值是按值传递的,所以就会将变量i的当前值复制给参数num。而在匿名函数的内部,又创建并返回了一个访问num的闭包。这样一来,result数组中的每个函数都有自己的num变量的一个副本,也就可以返回不同的数值了。

  更多详细解释请参考

JavaScript中的闭包

标签:cat   前端   catch   关系   过多   val   array   bar   span   

原文地址:https://www.cnblogs.com/wjf0/p/8279830.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!