作用域和作用域链

作用域

在运行代码中的某些特定部分中变量、函数和对象的可访问性。

决定了代码区块中变量和其他资源的可见性

function outFun2() {
    var inVariable = "内层变量2";
}
outFun2();
console.log(inVariable); // Uncaught ReferenceError: inVariable is not defined

从上面的例子可以体会到作用域的概念，变量 inVariable 在全局作用域没有声明，所以在全局作用域下取值会报错。

可以这样理解：作用域是一个独立的地盘，让变量不会外泄、暴露出去。 也就是说 做作用域最大的用处就是隔离变量，不同作用域下同名变量不会冲突。

ES6 之前 JavaScript 没有块级作用域，只有全局作用域和函数作用域。ES6 的到来，为我们提供了“块级作用域”，可通过新增命令 let 和 const 来体现。

全局作用域

在代码中任何地方都能访问到的对象拥有全局作用域，一般来说 以下几种情形拥有全局作用域：

• 最外层函数和在最外层函数外面定义的变量拥有全局作用域

var outVariable = "我是最外层变量"; //最外层变量
function outFun() { //最外层函数
    var inVariable = "内层变量";
    function innerFun() { //内层函数
        console.log(inVariable);
    }
    innerFun();
}
console.log(outVariable); // 我是最外层变量
outFun(); // 内层变量
console.log(inVariable); // inVariable is not defined
innerFun(); // innerFun is not defined

• 所有未定义直接赋值的变量自动声明为拥有全局作用域

function outFun2() {
    variable = "未定义直接赋值的变量";
    var inVariable2 = "内层变量2";
}
outFun2();//要先执行这个函数，否则根本不知道里面是啥
console.log(variable); //未定义直接赋值的变量
console.log(inVariable2); //inVariable2 is not defined

• 所有 window 对象的属性拥有全局作用域
  一般情况下，window 对象的内置属性都拥有全局作用域，例如 window.name、window.location、window.top 等等。

函数作用域

**指声明在函数内部的变量，和全局作用域相反，局部作用域一般只在固定的代码片段内可访问到，**最常见的例如函数内部。

function doSomething(){
    var stuName="zhangsan";
    function innerSay(){
        console.log(stuName);
    }
    innerSay();
}
console.log(stuName); // 脚本错误
innerSay(); // 脚本错误

作用域是分层的，内层作用域可以访问外层作用域的变量，反之则不行。

块级作用域

块级作用域可通过新增命令 let 和 const 声明，所声明的变量在指定块的作用域外无法被访问。
块级作用域在如下情况被创建：

1. 在一个函数内部
2. 在一个代码块（由一对花括号包裹）内部

作用域链

访问一个变量，一层一层向上寻找，直到找到全局作用域还是没找到，就宣布放弃。这种一层一层的关系，就是作用域链 。

var a = 100
function f1() {
    var b = 200
    function f2() {
        var c = 300
        console.log(a) // 100 自由变量，顺作用域链向父作用域找
        console.log(b) // 200 自由变量，顺作用域链向父作用域找
        console.log(c) // 300 本作用域的变量
    }
    f2()
}
f1()

总结

什么是作业域 ？
ES5 中只存在两种作用域：全局作用域和函数作用域。

在 JavaScript 中，我们将作用域定义为一套规则，这套规则用来管理引擎如何在当前作用域以及嵌套子作用域中根据标识符名称进行变量（变量名或者函数名）查找。ES6 新增了块级作用域
什么是作用域链 ？

当访问一个变量时，编译器在执行这段代码时，会首先从当前的作用域中查找是否有这个标识符，如果没有找到，就会去父作用域查找，如果父作用域还没找到继续向上查找，直到全局作用域为止。

而作用域链，就是有当前作用域与上层作用域的一系列变量对象组成，它保证了当前执行的作用域对符合访问权限的变量和函数的有序访问。

作用域链有一个非常重要的特性，那就是作用域中的值是在函数创建的时候，就已经被存储了，是静态的。

所谓静态，就是说作用域中的值一旦被确定了，永远不会变。**函数可以永远不被调用，但是作用域中的值在函数创建的时候就已经被写入了，**并且存储在函数作用域链对象里面。

const food = "rice";
const eat = function () {
    console.log(`eat ${food}`);
};
(function () {
    const food = "noodle";
    eat(); // eat rice
})();

var x = 10
function fn() {
    console.log(x)
}
function show(f) {
    var x = 20;
    (function () {
        f() // 10，而不是 20
    })()
}
show(fn)