一道前端面试题

Question

    function Person(){
        getAge = function(){
            console.log(10);
        }
        return this;
    }

    Person.getAge = function(){
        console.log(20);
    }

    Person.prototype.getAge = function(){
        console.log(30);
    }

    var getAge = function(){
        console.log(40);
    }

    function getAge(){
        console.log(50);
    }

    Person.getAge(); // 20 Person的静态方法
    getAge(); // 40 函数的预处理 函数表达式 覆盖了 函数声明

    Person().getAge();
    getAge();

    new Person.getAge();
    new Person().getAge();
    

以下是不太懂的地方，不知道自己的理解是否正确。

    Person().getAge(); // 10  普通的函数调用?
    getAge(); // 不懂为什么输出10

    new Person.getAge(); // 也是Person的静态方法调用？
    new Person().getAge(); // 30
    // new Person()返回一个Person实例, 沿着原型链寻找, 打印30？
    // Person里本身就有getAge()方法，为什么还会去原型链上寻找？

Answer 1

Person().getAge(); // 10  普通的函数调用?
（对就是普通的函数调用）

getAge(); // 不懂为什么输出10
（因为上面的函数调用，让全局变量getAge指针发生了变化，指向了新函数）

new Person.getAge(); // 也是Person的静态方法调用？
（这个是构造函数调用，创建了一个 Person.getAge 的实例）

new Person().getAge(); // 30
// new Person()返回一个Person实例, 沿着原型链寻找, 打印30？
// Person里本身就有getAge()方法，为什么还会去原型链上寻找？
（这个是构造函数调用，创建了一个 Person 的实例，而 Person 上面是没有getAge这个方法的，
所以从原型链上找。Person中的那个getAge不是它的属性，那是一个全局变量，可以说是window的属性。
你可以试一下window.getAge();//10）

Answer 2

Person().getAge(); // 10 普通的函数调用?
确实是普通的函数调用，但要明白return this 此时返回的是window，因为Person().getAge()实际上是window.Person().getAge()，所以this指的是window。现在分析getAge()那个更有效；
1.你上面说的 函数的预处理 函数表达式 覆盖了 函数声明，其实说成变量提升更准确，就是function比var更先声明，所以var会覆盖function声明的getAge()，到目前为止应该打印40。
2.但到这里并没有结束，为什么没有输出40,是输出10,是因为Person中又有一个函数表达式，按理说，这个方法只应在person中调用有效，但眼睛需要放光的是这个函数表达式没有var声明，说明这个getAge是直接挂载到window下面的，所以window.getAge()此时就打印了10.这也是为什么下一步的getAge会打印10；不信，你可以在getAge前面添加个var试试。
getAge(); // 不懂为什么输出10
看上面2的描述
new Person.getAge(); // 也是Person的静态方法调用？
嗯，new不new无所谓
new Person().getAge(); // 30
这个上面都说了，而且描述正确。理解构造方法Person()带new 和不带new的区别就行。前者只是普通的函数调用，后者会创建一个新的实例，并将this指向这个实例

Answer 3

function Person(){

getAge = function(){
    console.log(10);
}
console.log(this)
return this;

}

Person().getAge(); // 10
Person函数中定义了全局函数getAge，调用Person()，返回的是window，调用window.getAge结果自然是10
new Person().getAge(); // 30
new Person()创建了实例，console.log(this)打印出来的是这个实例，实例没有getAge构造方法，但有getAge原型方法

Answer 4

Person().getAge();为啥我运行这个行代码报错呢，显示未定义0_0