这篇文章为大家理一下原型链的经典面试题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().__proto__.getName();
new Foo.getName();
new new Foo().getName();
答案
这里由于某些小伙伴基础较好这里先放上答案,需要在看后面的解析啦
分析
首先先整个题目
创建GO
先提升 var声明的 getName 到最前面并且赋值为underfined ,然后提升 function Foo()赋值函数体,将 function getName() {
console.log(5); }覆盖上面声明的getName,然后从上看到下,我们发现有getName = function() { console.log(4); }赋值语句,这时我们的getName重新赋值
此时,我们的题目变成了
getName = function() {
console.log(4);
}
function Foo() {
getName = function() {
console.log(1);
}
return this;
}
Foo.getName = function() {
console.log(2);
};
Foo.prototype.getName = function() {
console.log(3);
}
第一问 Foo.getName(); //2
这里相当于调用了Foo这个构造函数里面的getName的静态方法,所以这里输出2
第二问 getName(); //4
这里显然我们找的是全局的getName方法,从上面的分析中,我们可以看出全局的getName执行输出4,所以这里打印4
第三问 Foo().getName(); //1
这一题分为两个步骤
- 首先我们从左到右执行Foo()执行时,由于foo内部的getName不是var声明的,也没有形参来声明他,所以这里将全局的getName = function() { console.log(1); },而且这里返回了this指向window,所以这里下面相当于window.getName()
- 由上一步,我们可以得知全局中的getName已经改变,并且Foo执行指向了全局,所以这里我们在全局中找到getName,指向1,所以这里输出1
第四问 getName();//1
这里基于第三问,第三问已经将全局的getName改变,所以这里输出1,不在多说
第五问 new Foo().getName();//3
这题 从左往右 先new了一个Foo(),当new的时候this指向我们new出来的新对象,而且由于Foo()本身并没有带有this.getName的方法,于是向原型链上寻找,因此找到了 Foo.prototype.getName = function() {console.log(3); },所以这里输出3
第六问 new Foo().proto.getName();//3
这一题我们可以看这个图
上面相当于Foo.prototype.getName();所以这里直接拿到3;
第七问 new Foo.getName(); //2
这里去头去尾,先看中间,拿到的是 Foo.getName = function() { console.log(2); };,所以这里打印2,我们这里可以看控制台打印
一个普通函数new出来打印结果还是原本的输出,所以这里上面打印结果为2
最后一问 new new Foo().getName();//3
从内向外,去头去尾,我们 发现这一题等价于new Foo().getName,等同于第五问,在应用上一题的方法,这里new出来结果还是为3
总结
在做原型链的题目时,可以画一个简单的原型图,再涉及到this时,牢记new指向new出来的新对象,详细的this 指向问题可以查看我的另外一篇博客: 关于JS中this的指向问题