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>