前端经典面试题：Foo与getName()

这是一道关于前端的很经典的面试题：

function Foo() {
    getName = function () {
        console.log(1)
    };
    return this
}
Foo.getName = function () {
    console.log(2)
}
Foo.prototype.getName = function () {
    console.log(3)
}
var getName = function () {
    console.log(4)
}
function getName() {
    console.log(5)
}
Foo.getName()
getName()
Foo().getName()
getName()
new Foo.getName()
new Foo().getName()
new new Foo().getName() 

控制台输出结果为：2 4 1 1 2 3 3

这道题涉及到很多知识点，不明白的可以移步：
1、原型与原型链：https://editor.csdn.net/md/?articleId=119242364
2、关于this指向问题：https://blog.csdn.net/fish_skyyyy/article/details/119320800
3、Js的重写（覆盖）：https://blog.csdn.net/fish_skyyyy/article/details/119238521
4、关于js运算符优先级：()的优先级高于new的优先级

function Foo() {
	//这里的getName没有var关键字，定义的是一个全局变量
    getName = function () {
        console.log(1)
    };
    //this的默认绑定，返回window
    return this
}
//给Foo定义getName方法
Foo.getName = function () {
    console.log(2)
}
//给Foo的原型定义getName方法
Foo.prototype.getName = function () {
    console.log(3)
}
//定义全局getName方法
var getName = function () {
    console.log(4)
}
function getName() {
    console.log(5)
}

Foo.getName()
getName()
Foo().getName()
getName()

//关于运算符优先级的问题
new Foo.getName()   //new (Foo.getName())
new Foo().getName()  //(new Foo()).getName()
new new Foo().getName()   //new ((new.Foo()).getName)

首先来分析前面几个：

1、Foo.getName()：调用Foo里面的getName方法，输出2
2、getName()：JS的覆盖（重写），取最后一次赋值，输出4
3、Foo().getName()：先执行一次Foo()函数，函数返回this，指向window，覆盖了全局作用域下的getName，输出1
4、getName()：此时全局的getName已经被改变为Foo内的getName，输出1

接着来看后三个：

5、new Foo.getName() ：使用new方法调用Foo.getName()，输出2
6、new Foo().getName()：先new一个Foo对象，然后调用Foo的实例化对象的getName方法，但是实例对象中不存在该方法，于是沿着原型链向上查找，即Foo.prototype.getName，输出3
7、new new Foo().getName()：先new一个Foo对象，然后new调用原型链上的方法，输出3