深入理解 javascript 作用域链（Scope Chain）

前言：

作用域和作用域链这块的东西，是不管在工作中还是面试中最常问到的一个问题。今天就接着上一篇 深入理解JavaScript作用域 来继续说一下。

作用域链

在JavaScript中，函数也是对象，实际上，JavaScript里一切都是对象。函数对象和其它对象一样，拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是[[Scope]]，该内部属性包含了函数被创建的作用域中对象的集合，这个集合被称为函数的作用域链，它决定了哪些数据能被函数访问。

作用域链决定了哪些数据能被函数访问。当一个函数创建后，它的作用域链会被创建此函数的作用域中可访问的数据对象填充。

说直白一点就是 作用域的集合就是作用域链（子集可以访问父集，父集不能访问子集）

function fn(){
    var a=10;
    function fn1(){
        var b=20;
        alert(a) //10
        function fn2(){
            alert(b) //20
            alert(a) //10  子集可以跨级访问父级
        }
        fn2()
    }
    fn1()
}
fn()
alert(b) // 报错

上面这个案例就说明了作用域链的概念，它就是作用域的集合组合起来的一个东西

从作用域链的结构可以看出，函数在执行的过程中，先从自己内部寻找变量，如果找不到，再从创建当前函数所在的作用域去找，从此往上，也就是向上一级找，直到找到全局作用域还是没找到。

作用域链代码优化

在运行期上下文的作用域链中，标识符所在的位置越深，读写速度就会越慢。如上面案例所示，因为全局变量总是存在于运行期上下文作用域链的最末端，因此在标识符解析的时候，查找全局变量是最慢的。

所以，在编写代码的时候应尽量少使用全局变量，尽可能使用局部变量。

执行顺序

当在作用域内访问 变量/方法 的时候，会找离自己最近的那个 变量/方法 （就近原则）

var a=10;
function fn(){
    var a=20;
    console.log(a) //20
}
fn()

 

总结

定义：作用域的集合就是作用域链
1、函数在执行的过程中，先从自己内部寻找变量
2、如果找不到，再从创建当前函数所在的作用域去找，从此往上，也就是向上一级找。
当在作用域内访问 变量/方法 的时候，会找离自己最近的那个 变量/方法 （就近原则）