JS作用域

JS作用域相关知识点归纳总结

JS作用域相关理论基础：

作用域：
域：空间、范围、区域……
作用：读、写

script：自上而下  全局变量、全局函数   
函数：由里到外 

浏览器：
“JS解析器”
    1）“找一些东西”： var  function  参数

        a = undefine
        所有的变量，在正式运行代码之前，都提前赋了一个值：未定义
        fn1 = function fn1(){ alert(2); }
        所有的函数，在正式运行代码之前，都是整个函数块

    JS 的预解析原则：
        遇到重名的：只留一个
        变量和函数重名了，就只留下函数

    2）逐行解读代码：
        表达式：= + - * / % ++ -- ! 参数……        
        注意：表达式可以修改预解析的值！

注意:函数块不要放在if/else、for的{}里面执行    

案例分析：

<script>
    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

    alert( typeof a );         //number
    a();                       // 报错
</script>

4段相似的代码 (对比分析)：

<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>

有参数，未传参，参数相当于 var a ;
<script>
    var a = 1;
    function fn1(a){
        alert(a);                       // undefined
        a = 2;
    }
    fn1();
    alert(a);                           // 1
</script>

有参数，且传参，参数相当于 var a =1 ;
<script>
    var a = 1;
    function fn1(a){
        alert(a);                       // 1
        a = 2;
    }
    fn1(a);
    alert(a);                           // 1
</script>

获取函数内的值：

函数内的值在全局获取
<script>
    var str = '';
    function fn1(){
        var a = '我在这儿...';
        str = a;
    }
    fn1();
    alert( str );               //  "我在这儿..."
</script>

函数内的值在另一个函数获取
<script>
    function fn2(){
        var a = '我在这儿...';
        fn3(a);
    }
    fn2();

    function fn3(a){
        alert(a);              //  "我在这儿..."  
    }
</script>

常见的实际案例问题：将ver改为let

<input type="button" value="按钮1" />
<input type="button" value="按钮2" />
<input type="button" value="按钮3" />

<script>
    window.onload = function (){
        var aBtn = document.getElementsByTagName('input');
        for( var i=0; i<aBtn.length; i++ ){
            aBtn[i].onclick = function (){
                alert( i );         // 只能弹出3
            };
        }
    };
</script>

<input type="button" value="按钮1" />
<input type="button" value="按钮2" />
<input type="button" value="按钮3" />

<script>
    window.onload = function (){
        var aBtn = document.getElementsByTagName('input');
        for( let i=0; i<aBtn.length; i++ ){
            aBtn[i].onclick = function (){
                alert( i );         // 分别弹出0，1，2（执行正确）
            };
        }
    };
</script>