作用域

什么是作用域?

---

在编程领域内，作用域是用来控制变量与参数的可见性及生命周期。对编程人员来说这是一项非常重要的服务，因为它减少了命名冲突以及提供了自动内存的管理。

类型

---

根据访问的范围不同，可以将作用域分为三种类型：全局作用域、局部作用域、块级作用域。

全局作用域

var a = 12; //全局变量
if (true) {
    console.log(a); //块级作用域范围内进行访问a
}
console.log(a); 
function f () {
    console.log(a); //局部作用域范围内进行访问a
}
f(); //执行f方法

如上所示的这样的，变量a就是全局变量，它被定义在了全局作用域里了。作为全局变量a，它可以在任意地方被访问到。

局部作用域（函数作用域）

所谓的局部作用域，指的是在函数范围内的作用域，故也可以称之为函数作用域

function f () {
    var a = 12; //局部作用域进行定义变量a
    console.log(a); //访问局部变量a
}
f(); //执行f方法
console.log(a); //全局范围内进行访问a，会是undefined
if (true) {
    console.log(a); //块级作用域访问a，依然是访问不到的
}

如上所示，变量a在函数方法里进行了定义，所以变量a作用范围只能是该函数内的局部作用域。跳出该作用域外部，无论是全局还是其他地方都访问不到该变量a

块级作用域（ES5不支持，ES6支持）

在大多数的类C的语言中都会拥有块级作用域的。所谓的块级作用域指的是在一个代码块中（括在一对花括号中的一组语句）定义的所有变量对外是不可见的。定义在代码块中的变量在代码块执行结束以后会被释放掉。这是一件好事，但是不幸的是在JS中，貌似语法上是支持块级作用域的，但实质是只支持全局作用域和局部作用域，不支持块级作用域，这会导致在块级作用域内定义的变量对外是可见的，会引发变量的外部泄露。这可能会成为一个错误之源。

if (true) {
    var a = 12;
} 
function f () {
    console.log(a);//可以访问到变量a
    for(var i = 0; i < 5; i++) {
          
    }
    console.log(i);//可以访问到变量i
}
f();//执行f方法

通过上面的示例可以看到这个问题是有多严重了，这会导致很多莫名其妙的问题出现。

注意事项

由于缺少块级作用域的支持，所以对于延迟变量的声明在JS中是不建议的，最好的做法是在函数体的顶部声明可能用到的所有变量。

词法作用域与动态作用域

词法作用域，也可以叫做静态作用域。意思是无论函数在哪里调用，词法作用域都只在由函数被声明时所处的位置决定。既然有静态作用域，那么也有动态作用域。而动态作用域的作用域则是由函数被调用时执行的位置所决定。

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

如上所看到的，因为js采用的是词法作用域（静态作用域），所以在调用foo函数的时候，变量value首先在函数内部作用域找对应的变量，如果没有找到，则去foo函数定义的时候的外层的作用域找寻变量也就是全局变量value。所以最终输出的是全局变量1。
这就是词法作用域，如果说是动态作用域的话，则它会根据被调用的时候所处的作用域进行查找变量，也就是会输出2。

ES5与ES6的区别

---

变量声明

在ES6中对于不支持块级作用域的问题得到了有效缓解。我们可以在块级作用域内用let进行变量的声明。被声明的变量只在该作用域内可见，外部是访问不到该内部的变量。

// 1.外层作用域无法获取到内层作用域
function fn1() {
    let a = 41;
    if(1 == 1) {
        let a = 3;
        console.log(2,a); // 2 3
    }
    console.log(1,a); // 1 41
}
fn1();

{  
    {
        let food = 'apple';
    }
    console.log(food); // Uncaught ReferenceError: food is not defined
}

{  
    {
        let food = 'apple';
    }
    console.log(food); // Uncaught ReferenceError: food is not defined
}

// 2. 外层和内层都使用相同变量名，也都互不干扰
{  
    {
        let food = 'apple';
        console.log(food); // apple
    }
    let food = 'orange';
    console.log(food); // orange
}

函数声明

在ES5中，函数只能在全局作用域和函数作用域中声明，不能在块级作用域中声明。但是在ES6中，函数可以在块级作用域中声明。

但是会有一定的问题，因为函数声明会被提到代码的最前面。所以会报错，最好在ES6中用函数表达式来表示一个函数。

//1.函数声明报错
{
    if (4 < 2) {
        function fn() {
            console.log('我在函数里面！');
        }
    }
}
fn(); // Uncaught TypeError: fn is not a function
//2.函数表达式没错
{
    let fa = '111';
    let fn = function () {
        console.log('我在函数里面！');
    }
    console.log(fa,fn); // 111 ƒ () { console.log('我在函数里面！');}
}

作用域链

Function对象有一个仅供 JavaScript 引擎存取的内部属性。
这个属性就是[[Scope]]。[[Scope]]包含了一个函数被创建的作用域中对象的集合。这个集合被称为函数的作用域链，它决定了哪些数据能被函数访问。

关于作用域链，局部作用域可以访问到全局作用域中的变量和方法，而全局作用域不能访问局部作用域的变量和方法。

var a = 0;

function fn () {
  var b = 1;
  console.log(a); // 输出 0
}

// 全局作用域并不能访问 fn 函数中定义的 b 变量
console.log(b); // 报错

fn();

当函数fn()创建时，它的作用域中插入了一个对象变量，这个全局对象代表所有在全局范围内定义的变量。

创建时作用域链.png

当函数fn()执行时，会创建一个名为执行环境的独一无二的内部对象。函数每执行一次，都会创建一个执行环境。当函数执行完毕，执行环境就会被销毁。

每个执行环境都有自己的作用域链，用来解析标识符。当执行环境被创建时，它的作用域就会初始化为当前运行函数的[[Scope]]属性中的对象。

执行环境创建完成之后，就会生成一个"活动对象"，这个对象包含了当前函数的所有局部变量，命名参数，参数集合和this。此对象会被推入作用域链的最前端。

当执行环境被销毁后，"活动对象"也会随之被销毁。

如下图所示：

fn函数执行时作用域链.png

当fn()时，会使用到a变量，这时候就会搜索执行环境的作用域链，找到就使用，找不到就会到作用域链的下一个对象找，如果搜寻到最后，还没找到，那就认定这个变量是未定义的。