通过代码简单了解什么是JavaScript的词法作用域

词法作用域

简单的通过两段代码说一下什么是词法作用域

/* 
 * @ 1.词法作用域:
 *     基本概念：先看以下函数init创建了为name的局部变量和一个名为displayName的函数,
 *              但是displayName是定义在函数内容的局部，仅在init函数内容可用,外部调
 *              会报错,这里displayName是没有name这个变量的,然而他在init调用之后是
 *              可以弹出name值为张三的这个变量，所以他是一个闭包，所为词法这一词,具
 *              体就是指根据声明变量或者函数的位置确定该变量(函数)在何处使用。
 */

    function init() {
        var name = "张三"
        function displayName() {
            alert(name)
        }
        displayName()
    }
    init()

这里是在知乎上看到的一个评论，对闭包的一个精简版的理解

/* 
 *  @ 2.作用域:
 *      先说作用域：作用域就是指程序源代码中定义变量的区域
 *                 作用域规定了如何去查找变量，也就是确定当前执行代码对变量的访问权限
 *      在JS中采用了词法作用域也就是静态作用域
 *  @ 3.静态作用域和动态作用域
 *      区别:
 *          在JS中是采用了词法作用域,函数的作用域在函数定义的时候就决定了,
 *          而与词法作用域正好相反的就是动态作用域了,函数的作用域是在函数
 *          调用的时候定义的。
 *  @ 4.举例
 *      上面的都是关于作用域的概念,下面这个例子很好的解释了什么是词法作用域，先看执行顺序
 *      
 *      定义了一个名为value的变量，还有两个函数foo和bar在foo内打印value的值,根据执行顺序
 *      可以得知,调用bar函数执行foo函数，先从foo函数内部查找如果有value这个局部变量,打印
 *      出结果,没有的话根据书写的位置,查找上面的一层代码，最后得出结果也就是value等于1,打
 *      印结果也是为1。（其实就是一个函数作用域链的过程）
 *
 *      反观: 动态作用域打印结果这里只讲打印过程
 *           调用bar函数,执行foo,查找value局部变量,没有那么ok,调用bar函数作用域,有value
 *           值为666,好了最后打印结果为6666
 */

    var value = 1;

    function foo() {
        console.log(value)
    }

    function bar() {
        var value = 666;
        foo()
    }
    bar()

断点调试gif图