JS“Foo”面试题

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

//请写出以下输出结果:
Foo.getName()
getName()
Foo().getName()
getName()
new Foo.getName()
new Foo().getName()
new new Foo().getName()

执行阶段:
●第一个:Foo.getName()
通过Foo创建了一个可以通过类直接调用的静态方法getName,那就执行它弹出2。

●第二个:getName()
直接getName函数,弹出4。这里存在变量提升,函数提升的问题,我有三个锦囊妙计,可以看看之前的文章。

●第三个:Foo().getName()
即先执行Foo(),函数Foo()返回当前的Foo对象,直接在调用该对象的getName方法,这里考察的是this的指向问题,Foo()直接执行,返回的是window对象,window对象上的getName()方法,会在Foo()执行完后,被其内部的getName = function(){alert(1)}覆盖掉。所以会alert(1)。

●第四个:getName()
再次调用getName方法,此时getName已经被覆盖掉,所以还是alert(1)

●第五个:new Foo.getName()
此处考察的是运算符优先级的问题,看下表

20181211144615262.png

可以看到 . 运算符的优先级大于new运算符,所以相当于new (Foo.getName)(),即将静态方法getName作为构造函数执行,最终alert(“2”)
●第六个:new Foo().getName()
也是运算符优先级的问题,new大于(),先new,该构造函数的返回值为this也就是代表当前的对象,相当于实例化了一个foo对象,然后调用该对象的getName方法,没有,怎么办,上原型链查找。所以alert(“3”)。

●第七个:new new Foo().getName()
还是运算符优先级的问题
相当于new (new Foo()).getName()也就是将实例化对象的原型上的方法getName当作构造函数,再new,所以alert(“3”)

青山不改,绿水常流。谢谢大家!

posted @ 2022-11-27 12:28  一眼万年的星空  阅读(113)  评论(0编辑  收藏  举报