JS作用域与闭包

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

变量分为全局变量和局部变量。

全局变量在函数外定义，HTML中全局变量是window对象，所有数据对象都属于window对象。

局部变量在函数内定义，只能在函数内部访问，在函数开始执行时创建，在函数执行完之后会自动销毁。

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

2|0全局作用域

全局作用域在页面打开时创建，在页面关闭时销毁。

在全局作用域中，创建的变量都会作为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 函数(){} 会在所有的代码执行之前就被创建,所以可以在函数声明前被调用。

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

3|0函数作用域

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

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

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

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"; }

4|0作用域链

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

①执行环境（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()的环境。

5|0闭包

闭包是一个可以访问外部(封闭)函数作用域链中变量的内部函数。

闭包可以访问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个特性：

函数嵌套函数

在函数内部可以引用外部的参数和变量

参数和变量不会以垃圾回收机制回收

最后来练习一下：

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到控制台。