js大公司面试题——方法执行顺序

前言

对于方法执行的顺序，讲真在面试时遇到这题目一开始挺开心的，毕竟自己也大概了解，但是这题考察的并不是一个知识点那么简单，再加上在原型的问题上绕来绕去地可以说十分磨心态的。

直接上题：

    function Number() {
        getNumber=function () {
            console.log(0)
        }
        return this;
    }
    Number.getNumber=function () {
        console.log(1)
    }
    Number.prototype.getNumber=function () {
        console.log(2)
    }
    var getNumber=function () {
        console.log(3)
    }
    function getNumber() {
        console.log(4)
    }

    
    Number.getNumber();//静态方法
    getNumber();//普通函数
    Number().getNumber();//执行Number()后执行内部函数
    getNumber();//普通函数
    new Number.getNumber();//静态方法的实例
    new Number().getNumber();//实例对象的方法
    new new Number().getNumber();

正确的答案：

1
3
0
0
1
2
2

第一个Number.getNumber()静态方法，没有任何争议；
第二个getNumber()，则涉及到函数执行的预编译问题，在预编译中执行：
如果遇到执行的是function，则会先以查找原型链的方式查找到方法，并执行；但如果想题目这种有function和函数表达式var、let、const等，则会先执行function的方法，即上面所说的查找原型链，因此这里先执行了

function  getNumber() {
   console.log(4)
}

而后执行

var getNumber=function () {
  console.log(3)
}

那么，预编译完成后则先执行的function被函数表达式覆盖，而执行的是函数表达式的方法——第一坑
第三个式子Number().getNumber()，当执行Number()后返回了this，此时指向的是Window，则这是相对于执行了this.getNumber()，而内部函数关系式的上下文为window，所以执行内部函数
第四个式子还是执行内部函数，如果看到这还不明白，可以试着把第三个式子拆分为Number()和getNumber()再F12调试看this，你就明白了——第二坑
第五个式子new了静态函数，即调用了静态函数
第六个、第七个式子都是实例对象的成员方法

以上均是本人通过个人理解与查阅资料而来，如果有错误的地方请指出，谢谢！！
另外觉得文章写得不错的话可以点赞并关注我哦~