JS中的作用域(浏览器剖析JS的历程)

一、预剖析

找一些东西:var function 参数(找要干活的东西)
变量var 在正式运转之前,都赋值为未定义
function 函数在运转之前,取全部函数

二、逐行解读

表达式=、+、-、*、/、++、–、!、%…..number()、参数都可以赋值
①碰到重名的,只留下一个
变量和函数重名,只留下函数
②函数挪用(函数是一个作用域,碰到作用域都邑根据先举行预剖析,然后逐行解读的历程实行)
先部分找参数,部分找不到就向上一级找(作用域链)

例1:

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

剖析历程:
1)预剖析:

第9行:没操纵
第10行:a为未定义
第11行:没操纵
第12行:a为function a(){ alert(2);}
第13行:没操纵
第14行:a为function a(){ alert(2);}
第15行:没操纵
第16行:a为function a(){ alert(4);}
第17行:没操纵

2)逐行解读:

第9行:弹出function a(){ alert(4);}
第10行:赋值操纵 a=1;
第11行:弹出1
第12行:没操纵
第13行:弹出1
第14行:a=3
第15行:弹出3
第16行:没操纵
第17行:弹出3

例2:

<script type="text/javascript">
        var a=1;
        function fn(){
            alert(a);
            var a=2;
        }
        fn();
        alert(a);
    </script>

实行效果:未定义,1;

1)预剖析

a未定义
函数

2) 逐行解读:

a=1;   
函数挪用:1)预剖析:碰到var 部分变量a为未定义
          2)逐行解读:弹出未定义
                      部分a赋值为2  
弹出全局变量a,值为1  

例3:

<script type="text/javascript">
        var a=1;
        function fn(){
            alert(a);
            a=2;
        }
        fn();
        alert(a);
    </script>

效果:1,2

例4:

 <script type="text/javascript">
        var a=1;
        function fn(a){
            alert(a);
            a=2;
        }
        fn();
        alert(a);
    </script>

效果:未定义,1

例5:

<script type="text/javascript">
        var a=1;
        function fn(a){
            alert(a);
            a=2;
        }
        fn(a);
        alert(a);
    </script>    

效果:1,1

    原文作者:kimqifu
    原文地址: https://segmentfault.com/a/1190000006263870
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞