javascript执行环境和作用域

之前没有系统的对javascript进行学习，主要用来操作DOM，每次看js的书，也就是看到变量类型和语句就停下来了。因为这一块跟c语言还是很像，就没什么兴趣继续读下去,最近写了一个比较长的js，发现变量，函数的作用域很重要，虽然看懂了问题，但是没有理解到位，今天看了《javascript高级程序设计》，提到的执行环境和作用域，才总算是弄明白了问题的来龙去脉。

例子1

function f2(){
    var s=10;
    function f1(){
        console.log(s);
    }
    f1();
}
f2();//输出10

在上述代码中，函数f2中定义了函数f1,在f1中输出s。结果是10。不难理解

例子2

var s = 100;
function f1(){
    console.log(s);
}
function f2(){
    var s=10;
    f1(); //输出100
    console.log(s);
}
f2();//输出10

这个例子中，f1函数定义在全局中，在f2中调用f1函数，输出的s还是全局中的s。这个就是执行环境的问题。

原书中的例子

有点尴尬，在hexo中还不知道怎么可以便捷的插入图片，暂时把图片文件传到主页吧。
看到图中的解释，其实就是，定义函数的位置，决定了函数的执行环境，也就是决定了在该函数中变量的访问权限：只能访问到高级以及同级的变量，不论该函数在哪里调用（例子2中就是在同级函数中进行调用，并没有修改s的值，s还是同级的s，而不是函数f2中的局部变量s），都不会改变它对变量的访问权限。 这一点跟c语言很不一样，这次就因为这个错调试了一会。记录一下这个坑，其实不算坑，书上写的明明白白，只是自己没有注意。

最后一次确认问题

最后用一个同级函数的子函数的子函数对f1()函数进行调用，彻底验证执行环境以及作用域问题。

var s = 1;
function f1(){
    console.log(s);
}
function f2(){
    var s=2;
    function f3(){
        var s=3
        function f4(){
            var s=4;
        f1();//输出1
        console.log(s);//输出4
      }
        f4();
  }
    f3();
}
f2();

f1(),不论在何时进行调用，内部的s由f1()定义的位置决定，必定是同级定义的或者更外层定义的s起作用。

总结

定义函数的位置，决定了函数的执行环境，也就是决定了在该函数中变量的访问权限：只能访问到高级以及同级的变量，不论该函数在哪里调用，都不会改变它对变量的访问权限。