一道全面考察 JS 基础的一道题

4,793 阅读2分钟
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()

这个道题看似简单,但考察了很多JS 基础知识点

Foo.getName() // 2 这个应该没有什么质疑的, 因为函数 Foo 内部没有执行,所以执行外面的结果是 2

getName() // 4 这个可能就有疑问❓为什么是 4 ,不应该是5吗,这个在我第一次做这道提的时候,就写了 5,结果在电脑上试了一下❎了, 因为这里考察了一个相对久远的 var 和 function 预解析的问题,他们两个是有优先级的 函数的优先级更高一下,而且预解析时函数是声明 + 赋值(这就是因为为什么日常函数声明写在下面,调用写在上面,也是可以用的) 而 var 是只声明,还没有赋值

console.log(a) // undefined 
var a = 1
console.log(a) // 1

所有这个题的答案是 4

Foo().getName() //1 这个应该没有什么质疑的,函数执行,调用里面的 getName 方法,所以结果打印 1

getName() // 1 因为上面的 Foo().getName() 执行, 里面的 getName 替换了外面的 getName 函数到全局上,所有执行的是 Foo 内部的 getName

new Foo.getName() // 2 这里应该又会有疑问,因为我这里第一次也写错了🤣,我以为会是 1 😅 因为:. 的优先级比 new 高,所以这里就是一个次 Foo.getName() 调用,所以是 2 ,new 是误导用的

new Foo().getName() // 3 这里我第一次写的 1 😳,然后不是和上面那个一样吗 🤔 其实不是,因为:new Foo() 加个括号,是提升了优先级,会去先执行 new Foo(), 然后在调用 .getName(), 那问题又来了,为啥不是 1,因为内部的 getName 不是绑定在 this 上的呀,所以就去找原型上的方法,结果是 3