什么是作用域?
以下来自于百度百科的定义：
通常来说，一段程序代码中所用到的名字并不总是有效/可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。
作用域的使用目的是为了提高了程序逻辑的局部性，增强程序的可靠性，减少名字冲突。
在JavaScript中,作用域指的是你代码的当前上下文环境
补充
函数的每次调用都有与之紧密相关的作用域和上下文。从根本上来说，作用域是基于函数的，而上下文是基于对象的。 换句话说，作用域涉及到所被调用函数中的变量访问，并且不同的调用场景是不一样的。上下文始终是this关键字的值， 它是拥有（控制）当前所执行代码的对象的引用。
作用域分类
全局作用域
当我们书写JavaScript代码的时候,所处的作用域就是我们所说的 全局作用域 。
<pre>
//Global Scope
var name = "caicai";
</pre>
在这里，我们使用它去创建能够在别的作用域访问的模块以及接口
块级作用域
任何一对花括号中的语句集都属于一个块，在这之中定义的所有变量在代码块外都是不可见的，我们称之为块级作用域。
大多数类C语言都是有块级作用域的，然而在JS当中是没有块级作用域
<pre>
functin test(){
for(var i=0;i<3;i++){
}
alert(i);
}
test();
执行结果：弹出"3"
</pre>
可见，在块外，块中定义的变量i仍然是可以访问的。
****如何在模拟块级作用域呢?****
首先要明白一点：在一个函数中定义的变量，当这个函数调用完后，变量会被销毁。利用闭包模拟：
<pre>
function test(){
(function (){
for(var i=0;i<4;i++){
}
})();
alert(i);
}
test();
执行结果：会弹出"i"未定义的错误
</pre>
另外说明一点：从ES6开始，你可以通过let关键字来定义变量，它修正了var关键字的缺点，能够让你像Java语言那样定义变量，并且支持块级作用域。
函数作用域
JavaScript中所有的作用域在创建的时候都只伴随着 函数作用域 ,循环语句像 for 或者 while ,条件语句像 if 或者 switch，属于块作用域范畴，由于js不存在块级作用域，所以都不能够产生新的作用域. 规则：新的函数 = 新的作用域
<pre>
// Scope A
var myFunction = function () {
// Scope B
var myOtherFunction = function () {
// Scope C
};
};
</pre>
动态作用域
采用动态作用域的变量叫做动态变量。只要程序正在执行定义了动态变量的代码段，那么在这段时间内，该变量一直存在；代码段执行结束，该变量便消失。举一个例子：如果有个函数f，里面调用了函数g，那么在执行g的时候，f里的所有局部变量都会被g访问到。而在在静态作用域的情况下，g不能访问f的变量。有兴趣的可以看这里
<pre>
var foo=1;
function static(){
alert(foo);
}
function(){
var foo=2;
static();
}();
</pre>
执行结果：会弹出1而非2，因为static的scope在创建时，记录的foo是1。
如果js是动态作用域，那么他应该弹出2。
总之，JS不支持动态作用域~
词法作用域
静态作用域又叫做词法作用域，采用词法作用域的变量叫词法变量。词法变量有一个在编译时静态确定的作用域。词法变量的作用域可以是一个函数或一段代码，该变量在这段代码区域内可见（visibility）；在这段区域以外该变量不可见（或无法访问）。词法作用域里，取变量的值时，会检查函数定义时的文本环境，捕捉函数定义时对该变量的绑定。
注意一点就是：词法作用域是不可逆的
<pre>
// name = undefined
var scope1 = function () {
// name = undefined
var scope2 = function () {
// name = undefined
var scope3 = function () {
var name = 'Todd'; // locally scoped
};
};
}
</pre>
作用域链
再此之前，请先了解下js预编译和执行过程
当代码在一个环境中执行时，会创建变量对象的一个作用域链（scope chain）；它为一个给定的函数建立了作用域，保证对执行环境有权访问的所有变量和函数的有序访问。 作用域链包含了在环境栈中的每个执行环境对应的变量对象。通过作用域链，可以决定变量的访问和标识符的解析。 注意，全局执行环境的变量对象始终都是作用域链的最后一个对象。
虽然JS的语法风格和C/C++类似, 但作用域的实现却和C/C++不同，并非用“堆栈”方式，而是使用列表，具体过程如下(ECMA262中所述):
任何执行上下文时刻的作用域, 都是由作用域链(scope chain, 后面介绍)来实现.
在一个函数被定义的时候, 会将它定义时刻的scope chain链接到这个函数对象的[[scope]]属性.
在一个函数对象被调用的时候，会创建一个活动对象(也就是一个对象), 然后对于每一个函数的形参，都命名为该活动对象的命名属性, 然后将这个活动对象做为此时的作用域链(scope chain)最前端, 并将这个函数对象的[[scope]]加入到scope chain中.
下面我们通过代码俩讲解下一下：
<pre>
var rain = 1;
function rainman(){
var man = 2;
function inner(){
var innerVar = 4;
alert(rain);
}
inner(); //调用inner函数
}
rainman(); //调用rainman函数
</pre>
通过js预编译和执行过程来分析：
<pre>
Global LE = {
rainman:对函数引用
rain:1
}
rainman LE {
innerVar :对函数引用
man:2;
}
inner LE {
innerVar：4
}
</pre>
观察alert(rain);这句代码。JavaScript首先在inner函数中查找是否定义了变量rain，如果定义了则使用inner函数中的rain变量；如果inner函数中没有定义rain变量，JavaScript则会继续在rainman函数中查找是否定义了rain变量，在这段代码中rainman函数体内没有定义rain变量，则JavaScript引擎会继续向上（全局对象）查找是否定义了rain；在全局对象中我们定义了rain = 1，因此最终结果会弹出'1'。
作用域链：JavaScript需要查询一个变量x时，首先会查找作用域链的第一个对象，如果以第一个对象没有定义x变量，JavaScript会继续查找有没有定义x变量，如果第二个对象没有定义则会继续查找，以此类推。
上面的代码涉及到了三个作用域链对象，依次是：inner、rainman、window。
总之，结合js预编译和执行过程来看，函数对象的[[scope]]属性是在定义一个函数的时候决定的, 而非调用的时候而且内部环境可以通过作用域链访问所有的外部环境，但是外部环境不能访问内部环境中的任何变量和函数。 这些环境之间的联系是线性的、有次序的。
对于标识符解析（变量名或函数名搜索）是沿着作用域链一级一级地搜索标识符的过程。搜索过程始终从作用域链的前端开始， 然后逐级地向后（全局执行环境）回溯，直到找到标识符为止。
闭包
闭包是指有权访问另一函数作用域中的变量的函数。换句话说，在函数内定义一个嵌套的函数时，就构成了一个闭包， 它允许嵌套函数访问外层函数的变量。通过返回嵌套函数，允许你维护对外部函数中局部变量、参数、和内函数声明的访问。 这种封装允许你在外部作用域中隐藏和保护执行环境，并且暴露公共接口，进而通过公共接口执行进一步的操作。
<pre>
var sayHello = function (name) {
var text = 'Hello, ' + name;
return function () {
console.log(text);
};
};
调用方式：
var helloTodd = sayHello('Todd');
helloTodd(); // will call the closure and log 'Hello, Todd'
or
sayHello('Bob')();
</pre>
闭包用处
- 模块模式:允许你模拟公共的、私有的、和特权成员
<pre>
var Module = (function(){
var privateProperty = 'foo';
function privateMethod(args){
// do something
}
return {
publicProperty: '',
publicMethod: function(args){
// do something
},
privilegedMethod: function(args){
return privateMethod(args);
}
};
})();
</pre>
模块类似于一个单例对象。由于在上面的代码中我们利用了(function() { ... })();的匿名函数形式，因此当编译器解析它的时候会立即执行。 在闭包的执行上下文的外部唯一可以访问的对象是位于返回对象中的公共方法和属性。然而，因为执行上下文被保存的缘故， 所有的私有属性和方法将一直存在于应用的整个生命周期，这意味着我们只有通过公共方法才可以与它们交互。
- 立即执行的函数表达式
<pre>
(function(window){
var foo, bar;
function private(){
// do something
}
window.Module = {
public: function(){
// do something
}
};
})(this);
</pre>
对于保护全局命名空间免受变量污染而言，这种表达式非常有用，它通过构建函数作用域的形式将变量与全局命名空间隔离， 并通过闭包的形式让它们存在于整个运行时（runtime）。在很多的应用和框架中，这种封装源代码的方式用处非常的流行， 通常都是通过暴露一个单一的全局接口的方式与外部进行交互。
其他
对于其他改变作用域的方式，后续文章介绍，比如 ： call,apply,bind ,ES6的箭头函数等等
总结：
1.着重理解 JS 预编译和执行过程，有助于理解jS作用域链
2.闭包的引入带来了如下好处：
- 减少全局变量
- 减少了传递给函数的参数变量
- 封装
参考文章
1.http://wwsun.github.io/posts/scope-and-context-in-javascript.html
2.http://ryanmorr.com/understanding-scope-and-context-in-javascript/
网友评论