面试题：Foo与getName()

Jun 14, 2021
javascript 面试题变量提升

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();

以上代码打印结果是？

先标注一些细节

function Foo() {
  //注意这里getName前面没有var关键字，定义的是一个全局变量。
  getName = function () {
    console.log(1);
  };
  //这里是this的默认绑定，返回值为window
  return this;
}
//给Foo定义getName方法，注意区分和Foo函数里面的那一段代码，意义并不相同。
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());

做完变量提升后的代码

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

Foo.getName();
getName();
Foo().getName();
getName();
new Foo.getName();
new Foo().getName();
new new Foo().getName();

结果

最终打印结果：2，4，1，1，2，3，3
1.Foo.getName() 调用Foo里的getName方法。没有什么好说的，直接输出2
2.getName() 这里getName被赋值了两次，取最后一次赋值，输出4
3.Foo().getName() 首先执行Foo()，getName被再次赋值，然后返回this（即window），然后执行this.getName() ，输出1
4.再次调用getName() 此时全局的getName() 已经被修改为Foo内的那个函数，输出1
5.new Foo.getName() 这里是使用new方法调用Foo.getName()，输出2
6.new Foo().getName() 先new一个Foo对象，然后调用Foo的实例对象的getName()方法，实例对象中并不存在getName方法，于是返回原型链查找，调用原型链上的方法，输出3
7.new new Foo().getName() 先new一个Foo对象，然后用new的方式调用原型链上的方法，输出3