【亡羊补牢】JS灵魂之问 第20期 一道经典的JS输出题 一共七连问，你能答到第几问？

引言

一道经典的阿里考察输出题目，连续七问，你能闯到第几问？

仰望星空的人，不应该被嘲笑

经典题

下面来一道最经典的题，特别容易出错，注意！

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。详细解释一下：

第一问，执行Foo.getName();我们执行的是这段代码：

Foo.getName = function(){
    
    
  console.log(2);
}

因为，这里访问的对象的属性，把函数充当了一个特殊对象，我们直接访问它的属性，然后打印 2。

第二问，执行 getName();在全局GO里面，是这样的情况，存在函数提升。

GO: {
    
    
	getName: function getName(){
    
     console.log(5);} -> function(){
    
    console.log(4);}
}

第三问，执行 Foo().getName();时，里面有一个变量 getName，没有申明，放到外面，就会给到全局，此时

GO: {
    
    
	getName: function getName(){
    
     console.log(5);} -> function(){
    
    console.log(4);} -> function(){
    
    console.log(1);}
}

于是访问 getName又进行了覆盖，打印 1。

第四问，执行 getName(); GO和上一问一样，打印 1。

第五问，执行 new Foo.getName();这里要牵扯到优先级问题了，. 运算符的优先级要比 new要高。因此，先执行Foo.getName();（即先执行下面这段代码）

Foo.getName = function(){
    
    
  console.log(2);
}

先打印 2，然后new没有什么意义，等于没写。

第六问，执行new Foo().getName();这里又要牵扯到优先级问题了，()运算符的优先级要比 .高。而在执行()时会带着 new一起执行。然后返回 this，此时我们执行的是 this.getName，发现此时没有 this.getName，然后就会去原型链上找，能找到如下代码：

Foo.prototype.getName = function(){
    
    
  console.log(3);
}

于是最终结果打印 3。

第七问，执行 new new Foo().getName();，也是与优先级有关，首先，()运算符的优先级要比 .高，先得到 new this.getName(); 然后. 运算符的优先级要比 new要高，和第六问一样了，访问原型链上的方法，得到 3，最后new没有什么意义，等于没写。

最后

文章产出不易，还望各位小伙伴们支持一波！

往期精选：

小狮子前端の笔记仓库

访问超逸の博客，方便小伙伴阅读玩耍~

学如逆水行舟，不进则退