深入理解javascript作用域和闭包

JavaScript 2018-12-31

作用域

作用域是一个变量和函数的作用范围，javascript中函数内声明的所有变量在函数体内始终是可见的，在javascript中有全局作用域和局部作用域，但是没有块级作用域，局部变量的优先级高于全局变量，通过几个示例来了解下javascript中作用域的那些“潜规则”（这些也是在前端面试中经常问到的问题）。

1. 变量声明提前示例1：

此处的输出是undefined，并没有报错，这是因为在前面我们提到的函数内的声明在函数体内始终可见，上面的函数等效于：

注意，如果忘记var，那么变量就被声明为全局变量了。

2. 没有块级作用域

和其他我们常用的语言不同，在Javascript中没有块级作用域：

输出10 } console.log(j);//输出1

}

在javascript中变量的作用范围是函数级的，即在函数中所有的变量在整个函数中都有定义，这也带来了一些我们稍不注意就会碰到的“潜规则”：

在①处输出的值竟然是undefined，简直丧心病狂啊，我们已经定义了全局变量的值啊，这地方不应该为hello吗？其实，上面的代码等效于：

声明提前、全局变量优先级低于局部变量，根据这两条规则就不难理解为什么输出undefined了。

作用域链

在javascript中，每个函数都有自己的执行上下文环境，当代码在这个环境中执行时，会创建变量对象的作用域链，作用域链是一个对象列表或对象链，它保证了变量对象的有序访问。作用域链的前端是当前代码执行环境的变量对象，常被称之为“活跃对象”，变量的查找会从第一个链的对象开始，如果对象中包含变量属性，那么就停止查找，如果没有就会继续向上级作用域链查找，直到找到全局对象中：

作用域链的逐级查找，也会影响到程序的性能，变量作用域链越长对性能影响越大，这也是我们尽量避免使用全局变量的一个主要原因。

闭包

基础概念作用域是理解闭包的一个前提，闭包是指在当前作用域内总是能访问外部作用域中的变量。

上面的示例在函数中返回了两个闭包，这两个闭包都维持着对外部作用域的引用，因此不管在哪调用总是能够访问外部函数中的变量。在一个函数内部定义的函数，会将外部函数的活跃对象添加到自己的作用域链中，因此上面实例中通过内部函数能够访问外部函数的属性，这也是javascript模拟私有变量的一种方式。

注意：由于闭包会额外的附带函数的作用域（内部匿名函数携带外部函数的作用域），因此，闭包会比其它函数多占用些内存空间，过度的使用可能会导致内存占用的增加。

闭包中的变量

在使用闭包时，由于作用域链机制的影响，闭包只能取得内部函数的最后一个值，这引起的一个副作用就是如果内部函数在一个循环中，那么变量的值始终为最后一个值。

上面的程序并没有按照我们预期的输入1-5的数字，而是5次全部输出了5。再来看一个示例：

调用createClosure()[0]()返回的是5，createClosure()[4]()返回值仍然是5。通过以上两个例子可以看出闭包在带有循环的内部函数使用时存在的问题：因为每个函数的作用域链中都保存着对外部函数（timeManage、createClosure）的活跃对象，因此，他们都引用着同一变量i，当外部函数返回时，此时的i值为5，所以内部的每个函数i的值也为5。那么如何解决这个问题呢？我们可以通过匿名包裹器（匿名自执行函数表达式）来强制返回预期的结果：

或者在闭包匿名函数中再返回一个匿名函数赋值：

输出1,2,3,4，5 function createClosure() { var result = []; for (var i = 0; i < 5; i++) { result[i] = function(num) { return function() { console.log(num); } }(i); } return result; } //createClosure()[1]()输出1；createClosure()[2]()输出2

无论是匿名包裹器还是通过嵌套匿名函数的方式，原理上都是由于函数是按值传递，因此会将变量i的值复制给实参num，在匿名函数的内部又创建了一个用于返回num的匿名函数，这样每个函数都有了一个num的副本，互不影响了。

闭包中的this

在闭包中使用this时要特别注意，稍微不慎可能会引起问题。通常我们理解this对象是运行时基于函数绑定的，全局函数中this对象就是window对象，而当函数作为对象中的一个方法调用时，this等于这个对象（TODO 关于this做一次整理）。由于匿名函数的作用域是全局性的，因此闭包的this通常指向全局对象window：

调用object.getScope()()返回值为global而不是我们预期的local，前面我们说过闭包中内部匿名函数会携带外部函数的作用域，那为什么没有取得外部函数的this呢？每个函数在被调用时，都会自动创建this和arguments，内部匿名函数在查找时，搜索到活跃对象中存在我们想要的变量，因此停止向外部函数中的查找，也就永远不可能直接访问外部函数中的变量了。总之，在闭包中函数作为某个对象的方法调用时，要特别注意，该方法内部匿名函数的this指向的是全局变量。