JavaScript之变量及作用域

本文共 1700 字，读完只需 7 分钟

概述

变量，编程语言中我们用来模拟现实概念的工具，比方说，变量可以表示对象，数组，数字，字符。既然是工具，那么就用工具的适用范围，这个工具在这个适用范围中才有效，在编程语言中，我们称这个适用范围叫作用域(scope)。

本文会总结 JS 中作用域的相关概念。

1. 什么是作用域
2. 全局作用域
3. 函数作用域
4. 块级作用域
5. 词法作用域(静态作用域)
6. 作用域链

一、什么是作用域？

作用域, 英文意思是 scope, 我自己的话来理解就是：

变量访问规则的有效范围

1. 作用域外，无法引用作用域内的变量
2. 离开作用域后，作用域的变量的内存空间会被清除，比如执行完函数或者关闭浏览器。

二、全局作用域

先看一段代码：

foo = "bar";
console.log(window.foo);  // bar

在浏览器环境中声明变量，该变量会默认成为全局 windows 对象的属性。

再看下面这段代码：

function foo() {
    name = "bar"
}
foo();
console.log(window.name) // bar

在函数中，如果不加 bar声明一个变量，那么这个变量会默认被声明为全局变量，如果是严格模式则会报错。

全局变量可以在任何地方访问到，但是有很大的问题存在。

全局变量会造成命名污染，如果在多处对同一个全局变量进行操作，那么就会覆盖全局变量的定义。同时全局变量数量过多，非常不方便管理。

这也是为什么像jQuery 和 underscore 这样的类库，要在全局建立 $ 和 _ 变量，其余私有方法属性挂载到该全局变量下。

三、函数作用域

JS 是函数作用域，在函数中定义一个局部变量，那么该变量只可以在该函数作用域中被访问。

function doSomething() {
    var thing = "吃早餐";
}

console.log(thing);  // Uncaught ReferenceError: thing is not defined

嵌套函数作用域：

function outter() {
    var thing = "吃早餐";
    function inner() {
        console.log(thing);
    }
    inner();
}

outter();  // 吃早餐

在外层函数中，嵌套一个内层函数，那么这个内层函数可以向上访问到外部作用域的变量。

那么，既然内层函数可以访问到外层函数的变量，那么把内层函数返回后呢？

function outter() {
    var thing = "吃晚餐";
    
    function inner() {
        console.log(thing);
    }
    return inner;
}

var foo = outter();
foo();  // 吃晚餐

前面我们提到了，函数执行完后，函数作用域的变量会被垃圾回收，以上代码可以看出当我们返回了一个访问了外部函数变量的内部函数，最后外部函数的变量得以保存。

这种当变量存在的函数已经执行结束，但仍在可以访问的方式就是`闭包`。

闭包的具体实践，后续文章会详细说明。

四、块级作用域

JS 在 ES6 之前只有函数作用域，没有块级作用域的概念。
看一下代码:

function doSomething() {
    for (var i = 0; i < 10; i++) {
        ...
    }
    console.log(i)
}
doSomething();  // 10

由于 JS 没有块级作用域，变量 i 在函数作用域中只有一个，每次 for 循坏都在改变这一个变量。

再看阮一峰老师 ES6 教程里的一段代码:

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6]();   // 10;

以上代码中，由于没有块级作用域，i 变量全局只有一个，当 for 循坏结束，变量 i 的值等于 10, 所以 a[6]() 对应函数内的变量 i 的打印值就是 10。

ES 6 中通过 let 和 const关键字 引用了块级作用域的概念，所谓块级作用域，就是以 {}包裹的区域。

我们将阮一峰老师 ES6 教程里的一段代码改成 let 的形式:

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6]();   // 6;

这时，数组内的索引为6函数内的变量打印值为6，每次循环，会创建新的块级作用域，然后重新声明一个新的变量 i；JS 的解释引擎会记住上次循环的变量值，所以能够返回正确的结果。

let 和 const 会声明一个块级作用域的变量及常量，不易发生变量命名污染的问题，能规避冲突，帮助你写出简洁优雅的代码，建议一直使用。

五、词法作用域(静态作用域)

词法作用域，也可以叫做静态作用域，是什么意思呢？

无论函数在哪里调用，词法作用域都只由函数被声明时所处的位置决定。

既然有静态作用域，那么也有动态作用域。

而动态作用域的作用域则是由函数被调用执行的位置所决定。

var a = 123;

function func1() {
    console.log(a);
}

function func2() {
    var a = 456;
    func1();
}

func2(); // 123

以上代码，最后输出结果 a 的值，来自于 func1 声明时所在位置访问到的 a 值 123。

所以 JS 的作用域是静态作用域，也叫词法作用域。

六、作用域链

在 JS 引擎中，通过标识符查找标识符的值，会从当前作用域向上寻找，直到作用域找到第一个匹配的标识符为止。就是 JS 的作用域链

如果嵌套作用域有多个相同标识符，那么，最内部的标识符会覆盖外层标识符，这叫做“遮蔽效应”

var a = 1;
function func1() {
    var a = 2;
    function func2() {
        var a = 3;
        console.log(a);  // 3
    }
    func2();
}

func1(); // 3

func2 中变量 a,会从内部开始向外部上层寻找，找到最近的 a 标识符的声明为止。

总结

JS 是一门基于词法作用域（静态作用域）的语言，JS 会沿着作用域链像气泡一样向外部寻找变量声明。

JS 又是函数作用域的语言，在 ES6 中，使用 let 和 const 关键字后，能让变量处于块作用域中，而且不存在声明提升。

后面的文章会介绍 JS 中的声明提升和闭包，敬请期待。