JS作用域与闭包

?JS作用域与闭包

在JavaScript中,作用域是可访问变量,对象,函数的集合。

变量分为全局变量和局部变量。全局变量在函数外定义,HTML中全局变量是window对象,所有数据对象都属于window对象。局部变量在函数内定义,只能在函数内部访问,在函数开始执行时创建,在函数执行完之后会自动销毁。

JS的作用域分为全局作用域和函数作用域。

全局作用域

全局作用域在页面打开时创建,在页面关闭时销毁。在全局作用域中,创建的变量都会作为window对象的属性保存;创建的函数都会作为window对象的方法保存。

变量在函数外定义就是全局变量,在全局作用域中有一个全局对象window,可以直接使用。

全局作用域中的变量都是全局变量,在页面的任意部分都可以访问到。

var a=10; console.log(window.a);  //相当于console.log(a);  function fun(){  console.log('我是fun函数'); } window.fun(); 

变量声明提前

使用var关键字声明的变量,会在所有的代码执行之前被声明,但是不会被赋值

但是如果声明变量时不使用var关键字,则变量不会被声明提前

console.log("a="+a);  //a=undefined var a=123; 

如果是访问了未声明的变量,控制台会报错:xxx is not defined

但是在这个例子中,我们可以发现在变量a声明之前,依然可以访问到a这个变量,只是这个变量的类型是undefined,还没有被赋值。

使用函数声明形式创建的函数 function 函数(){} 会在所有的代码执行之前就被创建,所以可以在函数声明前被调用。

使用函数表达式创建的函数,不会被声明提前,所以不能在声明前创建。

函数作用域

调用函数时创建函数作用域,函数执行完毕后,函数作用域销毁。

每调用一次函数就会创建一个新的函数作用域,他们之间是互相独立的。

在函数作用域中,可以访问到全局作用域的变量,在全局作用域中无法访问到函数作用域的变量。

var a=10 function fun(){  var b = 20  console.log("a="+a); //a=10 } fun() console.log("b="+b); //b is not defined 

在这个例子中,a使全局变量,可以在函数内部被访问到;b是定义在函数内部的局部变量,在函数执行完之后这个变量会被自动销毁,所以在函数外访问不到变量b。

当在函数作用域操作一个变量时,会现在自身作用域中寻找,如果有就直接使用,如果没有则向上一级作用域中寻找

在函数作用域中也有声明提前的特性

使用var关键字声明的变量,会在函数中所有的代码执行之前被声明

function fun3(){  console.log(a);  var a= 35; } fun3();   //undefined 

在函数中,不使用var声明的变量都会成为全局变量。

下面的例子中,变量myName在函数内没有使用var关键字声明,为全局变量。

function fun4(){  myName = "xiaoming"; } 

作用域链

在介绍作用域链之前我们需要了解以下几个概念:

①执行环境(execution context):定义了变量或函数有权访问的其他数据,决定了他们各自的行为

②每个执行环境都有一个与之关联的变量对象(variable object),环境中所有定义的变量和函数都保存在这个对象中(下面会用VO()来表示一个变量对象)

③每个函数都有自己的执行环境,当执行流进入一个函数时,函数的环境就会被推入一个环境栈中。在函数执行之后,栈将其环境弹出,把控制权返回给之前的执行环境。

当代码在一个环境中执行时,会创建变量对象的一个作用域链(scope chain)。作用域链是由当前环境与上层环境的一系列变量对象组成,保证了当前执行环境对符合访问权限的变量和函数的有序访问。

我们可以分析一个例子

var a = 30; function test() {     var b = a + 10;     function innerTest() {         var c = 10;         return b + c;     }     return innerTest(); } test(); 

这里有三个变量对象,我们把全局、test函数,innerTest()的变量对象分别用VO(global)、VO(test)、VO(innerTest)。对于innerTest来说,他的作用域链包含了这三个变量对象,所以可以用数组将innerTest的作用域链进行表示:

scopeChain:[VO(innerTest),VO(test),VO(global)] 

数组的第一项是作用域链的最前端,最后一项是作用域链的末端。

作用域链的前端,始终都是当前执行的代码所在的环境的变量对象。如果这个环境是函数,则将其活动对象(activation object)作为变量对象(下面会用AO()来表示一个活动对象)。活动对象在其最开始时只包含一个变量,即arguments对象(这个对象在全局环境中时不存在的)。作用域链的末端始终为全局变量对象。

作用域链是由一系列变量对象组成,我们可以在这条链中,查询变量对象中的标识符,这样就可以访问到上一层作用域中的变量了。

在这个例子中,innerTest()内部能够访问到其他两个环境中的所有变量,即能够访问到的变量有:变量c、变量b和变量a。因为这两个环境是它的父执行环境。

图中的矩形表示特定的执行环境。其中,内部环境可以通过作用域链访问所有的外部环境,但外部环境不能访问内部环境中的任何变量和函数。这些环境之间的联系是线性的、有次序的。每个环境都可以向上搜索作用域链,以查询变量和函数名;但任何环境都不能通过向下搜索作用域链而进入另一个执行环境。例如:innerTest()的局部环境开始时会先在自己的变量对象中搜索变量和函数名,如果搜索不到则再搜索上一级作用域链。test()的作用域链中只包含两个对象:自己的变量对象和全局变量对象。也就是说,它不能访问innerTest()的环境。

闭包

闭包是一个可以访问外部(封闭)函数作用域链中变量的内部函数。闭包可以访问3种范围中的变量,这3个范围具体如下:

  • 自己范围内的变量
  • 封闭函数范围内的变量
  • 全局变量

创建闭包的常见方式,就是在一个函数内部创建另一个函数。

function createComparisonFunction(propertyName) {     return function(object1, object2) {         var value1 = object1[propertyName];         var value2 = object2[propertyName];          if (value1 < value2) {          return -1;         } else if (value1 > value2) {          return 1;         } else {          return 0;         }     }; } 

在这个例子中内部函数(匿名函数)访问了外部函数中的变量propertyName。即使这个内部函数被返回了,而且是在其他地方被调用了,但它仍然可以访问变量propertyName。因为内部函数的作用域链中包含createComparisonFunction()的作用域。

一般来讲,当函数执行完毕后,局部活动对象就会被销毁,内存中仅保存全局作用域(全局执行环境的变量对象)。但是闭包的情况又不同。

在匿名函数从createComparisonFunction()中被返回后,它的作用域链被初始化为包含createComparisonFunction()函数的活动对象和全局变量对象。这样匿名函数就可以访问在createComparisonFunction()中定义的所有变量。更为重要的是createComparisonFunction()函数在执行完毕之后,其活动对象也不会被销毁,因为匿名函数的作用域链仍然在引用这个活动对象。即:当createComparisonFunction()函数返回后,其执行环境的作用域链会被销毁,但它的活动对象仍然会留在内存中,直到匿名函数被销毁后,createComparisonFunction()的活动对象才会被销毁。

//创建函数 var compareNames = createComparisonFunction("name"); //调用函数 var result = compareNames({name: "mike"}, {name: "lisa"}); //解除对匿名函数的引用(释放内存) compareNames = null; 

首先,创建的比较函数被保存在变量compareNames中,通过将compareNames设置为null解除该函数的引用,将其清除。随着匿名函数的作用域链被销毁,其他作用域(除了全局作用域)也都可以安全的被销毁了。下图展示了调用compareNames()的过程中产生的作用域链之间的关系。

作用域链的配置机制引出了一个问题,就是闭包只能取得包含函数中任何变量的最后一个值。闭包所保存的是整个变量对象,而不是某个特殊的变量。

function createFunction() {     var result = new Array();     for (var i = 0; i < 10; i++) {         result[i] = function() {          return i;         };     }     return result; } 

这个函数会返回一个函数数组。表面上看,每个函数都应该返回自己的索引值。即位置0的函数返回0,位置1的函数返回1。但实际上,每个函数都会返回10。因为每个函数的作用域链中都保存着ceateFunction()函数的活动对象,所以他们引用的都是同一个变量 i 。当ceateFunction()函数返回后,变量 i 的值是10,此时每个函数都引用着保存变量 i 的同一个变量对象,所以在每个函数内部 i 的值都是10。

我们可以通过创建另一个匿名函数强制让闭包的行为符合预期。

function createFunction() {     var result = new Array();     for (var i = 0; i < 10; i++) {         result[i] = function(num) {             return function() {              return num;          };         }(i);     }     return result; } 

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

闭包的优点:不产生全局变量,可以避免全局变量的污染,实现属性私有化

闭包的缺点:会常驻内存,增加内存使用量,使用不当很容易造成内存泄漏,在不用的时候需要删除

闭包有3个特性:

  1. 函数嵌套函数
  2. 在函数内部可以引用外部的参数和变量
  3. 参数和变量不会以垃圾回收机制回收

最后来练习一下:

for(var i=0;i<5;i++){  (function(){   setTimeout(function(){    console.log(i);   },i*1000);  })(); } 

上面的代码会显示5 5 5 5 5。

原因是,在循环中执行的每个函数将整个循环完成之后执行,因此会引用存储在i中的最后一个值——5

闭包可以为每次迭代创建一个唯一的作用域,存储作用域内的循环变量。

for(var i=0;i<5;i++){  (function(x){   setTimeout(function(){    console.log(x);   },x*1000);  })(i); } 

上述写法会按预期输出0、1、2、3和4到控制台。

商匡云商
Logo
注册新帐户
对比商品
  • 合计 (0)
对比
0
购物车