什么是作用域？几种常见的作用域详解

什么是作用域？几种常见的作用域详解

几乎所有编程语言就是在变量中存储值，并且能读取和修改此值。事实上，在变量中存储值和取出值的能力，给程序赋予了状态。

 

如果没有这样的概念，一个程序虽然可以执行一些任务，但是它们将会受到极大的限制而且不会非常有趣。

 

但是这些变量该存储在哪，又给如何读取？为了完成这个目标，需要制定一些规则，这个规则就是：作用域。

常见的作用域主要分为几个类型：全局作用域、函数作用域、块状作用域、动态作用域。

对象	类型
global/window	全局作用域
function	函数作用域（局部作用域）
{}	块状作用域
this	动态作用域

 

如果一个 变量 或者其他表达式不在 “当前的作用域”，那么JavaScript机制会继续沿着作用域链上查找直到全局作用域（global或浏览器中的window）如果找不到将不可被使用。 作用域也可以根据代码层次分层，以便子作用域可以访问父作用域，通常是指沿着链式的作用域链查找，而不能从父作用域引用子作用域中的变量和引用

• 全局作用域

变量在函数或者代码块{  }外定义，即为全局作用域。不过，在函数或者代码块{  }内未定义的变量也是拥有全局作用域的（不推荐）。

1. var carName = "Volvo";

2. //此处可以调用carName变量

3. function myFunction(){

4. //函数内可调用carName变量

5. }

上述代码中变量carName就是在函数外定义的，它是拥有全局作用域的。这个变量可以在任意地方被读取或者修改，当然如果变量在函数内没有声明（没有使用 var 关键字），该变量依然为全局变量。

1. //此处可以调用carName变量

2. function myFunction(){

3. carName = "Volvo";

4. //函数内可调用carName变量

5. }

以上实例中 carName 在函数内，但是拥有全局作用域，它将作为 global 或者 window 的属性存在。

在函数内部或代码块中没有定义的变量实际上是作为 window/global 的属性存在，而不是全局变量。换句话说没有使用 var 定义的变量虽然拥有全局作用域，但是它是可以被 delete 的，而全局变量不可以。

• 函数作用域

在函数内部定义的变量，就是局部作用域。函数作用域内，对外是封闭的，从外层的作用域无法直接访问函数内部的作用域！

1. function bar(){

2. var testValue = 'inner';

3. }

4. console.log(testValue) //报错：ReferenceError:testValue is not defined

如果想读取函数内的变量，必须借助 return 或者闭包。

1. function bar(value){

2. var testValue = 'inner';

3. return testValue+value;

4. }

5. console.log(bar('fun')) //"innerfun"

这是借助return的方式，下面是闭包的方式：

1. function bar(value){

2. var testValue = 'inner';

3. var result = testValue+value;

4. function innser(){

5. return result

6. };

7. return innser();

8. }

9. console.log(bar('fun')) //"innerfun"

通俗的讲，return 是函数对外交流的出口，而 return 可以返回的是函数，根据作用域的规则，函数内部的子函数是可以获取函数作用域内的变量的。

说到这其实大家会想到嵌套函数的作用域问题，如果 inner 函数再嵌套函数呢？这就涉及到另一个概念：作用域链。

仔细观察上图，其实不难理解作用域链是什么，因为你可以按照原型链那样去理解。任何一个作用域链都是一个堆栈，首先先把全局作用域压入栈底，再按照函数的嵌套关系一次压入堆栈。在执行的时候就按照这个作用域链寻找变量。

• 块状作用域

在其他编程语言中，块状作用域是很熟悉的概念，但是在JavaScript中不被支持，就像上述知识一样，除了全局作用域就是函数作用域，一直没有自己的块状作用域。在 ES6 中已经改变了这个现象，块状作用域得到普及。关于什么是块，只要认识

1. if(true){

2. let a = 1

3. console.log(a)

4. }

在这个代码中，if 后 {  } 就是“块”，这个里面的变量就是拥有这个块状作用域，按照规则，{  }之外是无法访问这个变量的。ES6中的let。

• 动态作用域

在 JavaScript 中很多同学对 this 的指向时而清楚时而模糊，其实结合作用域会对 this 有一个清晰的理解。不妨先来看下这段代码：

1. window.a = 3

2. function test () {

3. console.log(this.a)

4. }

5. test.bind({ a : 2 })() //2

6. test() //3

7.  

在这里bind已经把作用域的范围进行了修改指向了{ a:2},而 this 指向的是当前作用域对象，是不是可以清楚的理解了呢？

接下来我们再思考另一个问题：作用域是在代码编写的时候就已经决定了呢，还是在代码执行的过程中才决定的？

1. var carName = "Volvo";

2. //此处可调用 carName 变量

3. function myFunction(){

4. //函数内可调用 carName 变量

5. }

在看看这段代码，写代码的时候就知道 carName 就是全局作用域，函数内部的用 var 定义的变量就是函数作用域。这个也就是专业术语：词法作用域。

通俗的讲变量的作用域是在定义时决定而不是执行时决定，也就是说词法作用域取决于源码，通过静态分析就能确定，因此词法作用域也叫做静态作用域。

相反，只能在执行阶段才能决定变量的作用域，那就是动态作用域。

看看下面的代码是遵循了动态作用域还是静态作用域呢？

1. function foo(){

2. console.log(a) //2 (不是3！)

3. }

4. function bar(){

5. var a=3;

6. foo();

7. }

8. var a=2;

9. bar()

为什么会这样？

如果按照动态作用域分析：当 foo() 不能为 a 解析出一个变量引用时，它不会沿着嵌套的作用域链向上走一层，而是沿着调用栈向上走，以找到 foo() 是 从何处 被调用的。因为 foo() 是从 bar() 中被调用的，它就会在 bar() 的作用域中检查变量，并且在这里找到持有值 3 的 a。

 

如果按照静态作用域分析：foo执行的时候没有找到 a 这个变量，它会按照代码书写的顺序往上找，也就是 foo 定义的外层，就找到了 var a=2 ，而不是 foo 调用的 bar 内找。

所以结果就是 2。

从这个示例可以看出 JavaScript 默认采用词法（静态）作用域，如果要开启动态作用域请借助 bind、with、eval 等。