美文网首页
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中函数和变量同名的执行顺序

    定义一个abs函数 同时定义一个变量abs,赋值为一个匿名函数 情况1: 函数>变量>执行结果:全是执行变量 情况...

  • JS学习记录

    JS Learning 一、请做好准备 基本操作 引用js文件 执行顺序 分隔符 注释 变量 判断语句 函数 函数...

  • 分类中同名函数的执行顺序

    1.主类,子类,分类中+load方法的执行顺序 +load方法是在main函数执行之前执行的,并不需要主动调用. ...

  • 我的关于前端一些知识点的理解《二》(如一)

    js函数执行的一些问题 js中的执行环境定义了变量和函数有权访问的其他数据。 每个执行环境都有一个与之相关的变量对...

  • js中函数执行顺序以及变量提升

    例题 我这就不卖关子了,输出的结果分别是:2、4、1、1、2、3、3不知你答对了吗? 解析 下面进入重点,我们进行...

  • 前端经典面试题合集(一)

    1.谈谈变量提升 考察点:js基础知识,js执行机制,变量的提升答:执行js代码时,会生成执行环境,在函数中的代码...

  • 2021-03-04

    js 判断执行顺序 手动编写new方法 为什么输出函数 首先进行变量提升b,然后执行自定义函数,里面的b = 20...

  • 函数、变量提升

    变量和 函数声明提升 js自上而下的执行顺序受到很多新手和部分老手的共识,但这其实并不完全正确。这涉及到js的编译...

  • PHP 的复杂函数篇 -- PHP 学习 (六)

    可变函数 定义:变量名后有圆括号, PHP 将寻找与变量的值同名的函数, 并且尝试执行它; 通过变量名来执行函数:...

  • JS预解析(变量提升)

    JS预解析(变量提升) JS的正常执行顺序是从上往下依次执行,但是JS在执行之前会读取一遍JS代码 将所有变量声明...

网友评论

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

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