JavaScript的做用域详解

做用域

做用域（scope），程序设计概念，一般来讲，一段程序代码中所用到的变量并不老是有效/可用的，而限定这个变量的可用性的代码范围就是这个变量的做用域。通俗一点就是我要把个人变量分红一坨一坨保管起来，有些地方只能用这几个变量，有些地方只能用另外几个变量，而这个分开的一坨一坨的区域就是做用域~

那这个做用域何时用到的呢？

没错就是编译的时候~
让咱们来看看编译的大概流程

• 词法分析（这个过程会将由字符组成的字符串分解成（对编程语言来讲）有意义的代码块）
• 语法分析（这个过程是将词法单元流（数组）转换成一个由元素逐级嵌套所组成的表明了程序语法结构的树。这个树被称为“抽象语法树”）
• 代码生成（将这棵“树” 转换为可执行代码，将咱们写的代码变成机器指令并执行）

比起上面这些编译过程只有三个步骤的语言的编译器，JavaScript 引擎要复杂得多。例如，在语法分析和代码生成阶段有特定的步骤来对运行性能进行优化，包括对冗余元素进行优化等，可是大致上也是差很少的流程~

那咱们要编译var a = 2的话，是‘谁’来执行编译的过程呢？

当当当当~

• 引擎：负责整个编译运行的所有过程。
• 编译器：负责词法分析以及代码生成。
• 做用域：负责收集维护全部声明的标识符，肯定当前执行代码对标识符的访问权限。

当咱们看到var a = 2的时候，咱们认为是一条声明，可是对于引擎来讲，这是两个彻底不同的声明，分为下面两部分

• 1.遇到 var a，编译器会询问做用域是否已经有一个该名称的变量存在于同一个做用域的集合中。若是是，编译器会忽略该声明，继续进行编译；不然它会要求做用域在当前做用域的集合中声明一个新的变量，并命名为a（严格模式下报错）。
• 2.接下来编译器会为引擎生成运行时所需的代码，这些代码被用来处理 a = 2这个赋值操做。引擎运行时会首先询问做用域，在当前的做用域集合中是否存在一个叫做 a的变量。若是是，引擎就会使用这个变量；若是否，引擎会继续查找该变量。

能够看到，编译的时候，编译器和引擎须要询问做用域，所求变量是否存在，而后根据查询结果来进行不一样的操做

做用域嵌套

上面咱们展现了只有一个做用域，变量的声明和赋值过程。
实际状况中，咱们一般须要同时顾及几个做用域。当一个块或函数嵌套在另外一个块或函数中时，就发生了做用域的嵌套。所以，在当前做用域中没法找到某个变量时，引擎就会在外层嵌套的做用域中继续查找，直到找到该变量，或抵达最外层的做用域（也就是全局做用域）为止；可是反过来，外层的做用域没法访问内层做用域的变量，若是能够的话那不就全都是全局变量了吗嘿嘿嘿

function foo(a) {
console.log( a + b );
}
var b = 2;
foo( 2 ); // 4

当引擎须要变量b的时候，首先在foo的做用域中查找，发现没有b的踪迹，因而就跑出来，往上面一层做用域走一走，发现了这个b原来在全局做用域里待着，那可不得一顿引用！若是全局做用域也没有b的话，那就得报错了，告诉写代码的傻子“你猪呢？一天到晚净会写bug！”。

第一层楼表明当前的执行做用域，也就是你所处的位置。建筑的顶层表明全局做用域。
变量引用都会在当前楼层进行查找，若是没有找到，就会坐电梯前往上一层楼，若是仍是没有找到就继续向上，以此类推。一旦抵达顶层（全局做用域），可能找到了你所需的变量，也可能没找到，但不管如何查找过程都将中止

函数做用域

能够看到咱们在上面生成两层做用域（一层foo一层全局）的时候用了函数。由于JavaScript的函数能够产生一层函数做用域。
上代码！

function foo(a) {
    var b = a * 2;
    function bar(c) {
        console.log( a, b, c );
    }
    bar( b * 3 );
}
foo( 2 ); // 2, 4, 12

咱们来分析一下上面几行代码。这个例子里面包含了三层逐级嵌套的做用域，其中两个函数生成了两层嵌套做用域。

1.包含着整个全局做用域，其中只有一个标识符： foo 。
2.包含着 foo 所建立的做用域，其中有三个标识符： a 、 bar 和 b 。
3.包含着 bar 所建立的做用域，其中只有一个标识符： c 。

因为bar是最内层的做用域，若是在它做用域内的查询不到它须要的值，它会逐级往外查询外层做用域的同名变量。若是查询到了则取用~

块级做用域

尽管函数做用域是最多见的做用域单元，固然也是现行大多数 JavaScript 中最广泛的设计方法，但其余类型的做用域单元也是存在的，而且经过使用其余类型的做用域单元甚至能够实现维护起来更加优秀、简洁的代码。（若是你会其余一些语言你就会发现一个花括号不就一个块级做用域了吗）
咱们来看看JavaScript中的花括号~

for(var i=0;i<5;i++){console.log(window.i)} //0 1 2 3 4

你惊奇的发现，妈耶，我这个var不等于白var嘛，反正都是全局变量（若是你没在函数内使用的话）。
是的JavaScript就是这么的高端兼灵性~（滑稽）
if的花括号和for是同样的，不作赘述。

那咱们怎样整一个独立做用域？而后我又不想一直声明函数
JavaScript有四种方式能够产生块级做用域。

• with
• try/catch
• let
• const

让咱们来介绍一下这四种东西吧~

1.首先是with，算了，垃圾，不讲。好处很少，坏处却是挺多，有兴趣百度用法~不建议使用
2.而后是try/catch， ES3 规范中规定 try / catch 的 catch 分句会建立一个块做用域，其中声明的变量仅在 catch 内部有效

try{throw 2}catch(a){console.log(a)};
console.log(a);//Uncaught ReferenceError

3.let,这个是es6引入的新关键字，很是香~看下面能够和上面的var i的循环作对比

for(let j=0;j<5;j++)(console.log(window.j));//undefined *5

4.这个跟let差很少，可是是用来定义常量的。const a = 5;a = 6;//报错

ok~这个很敢单~让咱们来学习下一部分

提高

在最开始以前，咱们先来学习一下两种报错。

• ReferenceError 异常
• TypeError

第一种的出现是由于遍历了全部的做用域都查找不到变量，第二种是找到了这个变量，可是对这个变量的值进行了错误的操做，好比试图对一个非函数类型的值进行函数调用

咱们先来看看下面的代码会输出什么

a = 2;
var a;
console.log( a );

你可能会觉得，我先给a赋值了2，而后var a又给a赋值了undefined，因此会输出undefined。可是这个输出了2。
咱们再来看一题

console.log( a );
var a = 2;

这个时候你可能认为会报ReferenceError异常，由于使用在前，使用的时候a尚未定义，做用域确定也找不到a，可是这个却输出了undefined。

Why？

为了搞明白这个问题，咱们须要回顾一下前面关于编译器的内容。回忆一下，引擎会在解释 JavaScript 代码以前首先对其进行编译。编译阶段中的一部分工做就是找到全部的声明，并用合适的做用域将它们关联起来。
所以，正确的思考思路是，包括变量和函数在内的全部声明都会在任何代码被执行前首先被处理。当你看到 var a = 2; 时，可能会认为这是一个声明。但 JavaScript 实际上会将其当作两个声明： var a; 和 a = 2; 。第一个定义声明是在编译阶段进行的。第二个赋值声明会被留在原地等待执行阶段。
上面的第一段代码就能够看作

var a;
a = 2;
console.log(a)

第二段代码则能够当作

var a;
console.log(a);//此时a还没赋值，因此是undefined
a = 2;

打个比方，这个过程就好像变量从它们在代码中出现的位置被“移动”到了最上面（变量所在做用域）。这个过程就叫做提高。

咱们从上面能够看到变量声明的提高，那么对于函数声明呢？固然是no趴笨啦~

foo();
function foo() {
    console.log( a ); // undefined
    var a = 2;
}

可是，须要注意的是，函数声明会被提高，可是函数表达式却不会。

foo(); // 不是 ReferenceError, 而是 TypeError!
var foo = function bar() {
// ...
};

这个就至关于

var foo;
foo(); // 此时foo确定是undefined啦，undefined()? 对undefined值进行函数调用显然是错误操做！TypeError！
foo = function bar() {
// ...
};

既然函数声明和变量声明都会被提高，那它们两个哪一个提高到更前面呢？

是函数！！函数做为JavaScript的一名大将，确实是有一些牌面。

foo(); // 1
var foo;
function foo() {
    console.log( 1 );
}
foo = function() {
    console.log( 2 );
};

咱们能够将上面当作

function foo() {
    console.log( 1 );
}
var foo;//重复声明，能够去掉
foo(); // 1
foo = function() {
    console.log( 2 );
};

注意：后面的声明会覆盖前面的声明。

foo(); // 3
function foo() {
    console.log( 1 );
}
var foo = function() {
    console.log( 2 );
};
foo();//2
function foo() {
    console.log( 3 );
}

至关于

function foo() {
    console.log( 1 );
}
function foo() {
    console.log( 3 );
}
var foo;
foo(); // 3
foo = function() {
    console.log( 2 );
};
foo();//2

闭包

咱们刚刚讲那么多，相信你们都已经知道而且深信，做用域只能一层一层往外查询，不能往里走，那我若是要找一个函数里的变量值呢？那可咋整啊？
很简单，咱们不能往里走，可是咱们能够再给这个函数里面整一层做用域，这样函数里面的子做用域不就能够访问它的变量了吗？
perfect~

function foo() {
    var a = 2;
    function bar() {
        console.log( a ); // 2
    }
    return bar;
}
var baz = foo();执行了foo()就返回了一个bar;如今至关于baz=bar;
baz();//2

这里咱们须要获取a的值，咱们就在里面写一个函数bar，显然这个bar是有权利访问a的,那咱们返回这个有权利访问a的函数不就顶呱呱了吗？

在 foo() 执行后，一般会期待 foo() 的整个内部做用域都被销毁，由于咱们知道引擎有垃圾回收器用来释放再也不使用的内存空间。因为看上去 foo() 的内容不会再被使用，因此很天然地会考虑对其进行回收。
而闭包的“神奇”之处正是能够阻止这件事情的发生。事实上内部做用域依然存在，所以没有被回收（频繁使用闭包可能致使内存泄漏）。谁在使用这个内部做用域？原来是 bar() 自己在使用。拜 bar() 所声明的位置所赐，它拥有涵盖 foo() 内部做用域的闭包，使得该做用域可以一直存活，以供 bar() 在以后任什么时候间进行引用。

来点练习题

第一题
var tt = 'aa'; 
function test(){ 
    alert(tt); 
    var tt = 'dd'; 
    alert(tt); 
} 
test();

第二题
var a = 100;
function test(){
    console.log(a);
    a = 10;
    console.log(a);
}
test();
console.log(a);

第三题
var a=10; 
function aaa(){ 
    alert(a);
};            
function bbb(){
    var a=20;
    aaa();
}
bbb();

答案：

1. undefined dd
2. 100 10 10
3. 10

参考文献

《你不知道的JavaScript》

最后

有什么错误或者建议能够在评论区告诉我~谢谢