美文网首页
js中函数和变量同名的执行顺序

js中函数和变量同名的执行顺序

作者: 和风拂柳花香醉人 | 来源:发表于2018-08-08 20:48 被阅读85次

    定义一个abs函数

    function abs(x){
        log('这是一个function');
        return x<0?-x:x;
    }
    

    同时定义一个变量abs,赋值为一个匿名函数

    var abs = function(x){
                log('这是一个匿名function');
                return x<0?-x:x;
            };
    

    情况1: 函数>变量>执行
    结果:全是执行变量

    function abs(x){
        log('这是一个function');
        return x<0?-x:x;
    }
    
    var abs = function(x){
        log('这是一个匿名function');
        return x<0?-x:x;
    };
    
    abs(-1);    //匿名
    abs(2);     //匿名        
    abs(-8);    //匿名
    

    情况2:变量>函数>执行
    结果:全是执行变量

        var abs = function(x){
                log('这是一个匿名function');
                return x<0?-x:x;
            };
    
            function abs(x){
                log('这是一个function');
                return x<0?-x:x;
            }
    
            abs(-1);    //匿名
            abs(2);     //匿名        
            abs(-8);    //匿名
    

    情况3:执行>函数>变量
    结果:全是执行函数

            abs(-1);    //function
            abs(2);     //function      
            abs(-8);    //function
    
            function abs(x){
                log('这是一个function');
                return x<0?-x:x;
            }
    
            var abs = function(x){
                log('这是一个匿名function');
                return x<0?-x:x;
            };
    

    情况4:执行>变量>函数
    结果:全是执行函数

            abs(-1);    //function
            abs(2);     //function      
            abs(-8);    //function
    
            var abs = function (x) {
                log('这是一个匿名function');
                return x < 0 ? -x : x;
            };
    
            function abs(x) {
                log('这是一个function');
                return x < 0 ? -x : x;
            }
    

    情况5: 变量>执行>函数
    结果:全是执行变量

            var abs = function(x){
                log('这是一个匿名function');
                return x<0?-x:x;
            };
    
            abs(-1);    //匿名
            abs(2);     //匿名        
            abs(-8);    //匿名
    
            function abs(x){
                log('这是一个function');
                return x<0?-x:x;
            }
    

    情况6: 函数>执行>变量
    结果:全是执行函数

            function abs(x) {
                log('这是一个function');
                return x < 0 ? -x : x;
            }
    
            abs(-1);    //function
            abs(2);     //function        
            abs(-8);    //function
    
            var abs = function (x) {
                log('这是一个匿名function');
                return x < 0 ? -x : x;
            };
    

    情况7:执行>变量>执行>函数>执行
    结果:执行函数>变量>变量

            abs(-1);    //function
            var abs = function (x) {
                log('这是一个匿名function');
                return x < 0 ? -x : x;
            };
            abs(-1);    //匿名
            function abs(x) {
                log('这是一个function');
                return x < 0 ? -x : x;
            }
            abs(-1);     //匿名 
    

    情况8:执行>函数>执行>变量>执行
    结果:执行函数>函数>变量

            abs(-1);    //function
            function abs(x) {
                log('这是一个function');
                return x < 0 ? -x : x;
            }
            abs(-1);    //function
            var abs = function (x) {
                log('这是一个匿名function');
                return x < 0 ? -x : x;
            };
            abs(-1);     //匿名 
    

    推论:

    1. 通过1和2,执行语句前找到变量和函数,先执行变量(因为变量提升)
    2. 通过3和4,执行语句后找到变量和函数,先执行函数(因为变量提升)
    3. 通过5和6,执行语句前找到变量(已赋值)或函数,马上执行
    4. 通过7和8,证明前面3个结论

    学习了下一节的变量提升,变量无论在哪里定义,总是后提升到函数顶部,赋值为undefined

    举个例子,情况3:
    执行的时候,代码如下:

            var abs ;                  // 变量abs被提升到这里,此时的值为 undefinded
    
            //执行到这一句时,变量abs的值还是undefined,所以不会被当成函数来调用
            //所以,会去查找 function abs() 调用
            abs(-1);    //function
            abs(2);     //function      
            abs(-8);    //function
    
            function abs(x){
                log('这是一个function');
                return x<0?-x:x;
            }
    
            //代码执行到这里,abs才进行赋值
            abs = function(x){
                log('这是一个匿名function');
                return x<0?-x:x;
            };
    

    如果变量在执行语句前已经赋值(非undefined),那么同名的函数和变量会先执行变量,如情况1,2,5。反之会执行函数,如情况3,4,6。

    所以

    存在变量(赋值为匿名函数)和函数同名的情况,执行顺序取决于变量的赋值顺序(在函数调用的前与后)

    相关文章

      网友评论

          本文标题:js中函数和变量同名的执行顺序

          本文链接:https://www.haomeiwen.com/subject/gwaxbftx.html