作用域

Posted 2020-08-14

js中变量分为两种，一种是全局变量，一种是局部变量

浏览器的js解析器对于script内部的内容分为两步

1、预解析：找一些东西，如变量var、函数function、参数，所有的变量在执行代码之前都是undefined，所有的函数在执行代码之前都是函数块
遇到重名的则只留下一个，变量和函数重名了，则只留下函数
2、逐行解读代码
　　　　表达式  可以修改预解析的值
　　　　函数调用
　　　　　　　　预解析
　　　　　　　　逐行解读代码

看个例子 demo1

alert(a);     // function a(){alert(4)}
var a =1;　　 
alert(a);　　　//  1
function a() {
    alert(2);
};
alert(a);     //  1
var a = 3;
alert(a);     //  3
function a() {
     alert(4);
};
alert(a);     //  3
a()          // 报错

 demo2

script 全局变量 全局函数
<script>
    alert(a); // 报错
</script>

<script>
   var a = 1;
</script>

// 由上至下依次执行

demo3

<script>
    var a = 1;
    function fn1() {
        alert(a);   // undefined;
        var a =2;
    }
    fn1();
　　alert(a);       // 1
</script>

<script>
    var a = 1;
    function fn1() {
        alert(a);   // 1;  预解析没有找到，会执行逐行解读代码，会顺着作用域链 由里到外 往父级作用域找
        a =2;       // 修改了父级作用域的值
    }
    fn1();
    alert(a);       // 2
</script>

<script>
    var a = 1;
    function fn1(a) {
        alert(a);   // 参数a 类似于 (var a;) 所以 为undefined
        a =2;       // 修改了本级作用域的值，只能修改内部的值
    }
    fn1();    // 注意此处没有传递参数
    alert(a);       // 1
</script>