js面试题Foo.getName()的故事

首先声明下：此题是本人面试时笔试题中的一道，回来一搜居然雷同，纯属偶然，特写此篇来整理一下思绪。。。

原题：

 

1. function Foo() {

2. getName = function () {

3. console.log (1);

4. };

5. console.log('this is'+this)

6. return this;

7. }

8. Foo.getName = function () {

9. console.log (2);

10. };

11. Foo.prototype.getName = function () {

12. console.log('baidu' && 'google');

13. };

14. var getName = function () {

15. console.log (4);

16. };

17. function getName() {

18. console.log (5);

19. }

20.  

21. // 请写出一下的输出结果

22. Foo.getName();

23. getName();

24. Foo().getName();

25. getName();

26. new Foo.getName();

27. new Foo().getName();

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

 

 

先输出一下结果：

 

1. Foo.getName(); // 2

2. getName(); // 4

3. Foo().getName(); // 1

4. getName(); // 1

5. new Foo.getName(); // 2

6. new Foo().getName(); // google

7. new new Foo().getName(); // google

 

此题涉及到的知识点广泛滴很，要做对此题，你得有一定的分析问题的能力，还得具备逻辑运算符、运算符的优先级、声明变量和声明函数的提升优先级、原型继承、闭包、覆盖等知识点。

 

下面就开始吧！

我先将每块函数进行编号：

 

1. // 方式1：一个构造函数嘛，里面有个全部变量getName 指向一个匿名函数（小心闭包）

2. function Foo() {

3. getName = function () {

4. console.log (1);

5. };

6. return this;

7. }

8. // 方式2：构造函数的一个属性getName 指向一个匿名函数

9. Foo.getName = function () {

10. console.log (2);

11. };

12. // 方式3：构造函数的原型上有个getName方法

13. Foo.prototype.getName = function () {

14. console.log('baidu' && 'google');

15. };

16. // 方式4：定义一个变量指针指向一个匿名函数

17. var getName = function () {

18. console.log (4);

19. };

20. // 方式5：声明一个叫getName的有名函数

21. function getName() {

22. console.log (5);

23. }

每块函数的意义都清楚了吧，接下来再分析执行语句的代码：
>>执行语句第一行： Foo.getName() 
         此句应该没什么要说的吧，就是调用方式2的函数代码块，结果为“2”！
>>执行语句第二行：getName() 
         如果单独看这条执行语句，一般会有个全局声明的函数方式5"function getName(){} ",但要是放在这么个复杂的上下文环境中，那肯定是不一样的啦，因为还有个方式4 “var getName = function(){}” 来捣乱，这就要考察一个知识点（你妈和你媳妇掉水里，你救谁的问题？nonono，可没那么纠结），当定义的变量和声明的函数重名了怎么办？答：它们都会进行预解析，函数声明提前于变量声明，但是最终会被变量覆盖！so方式4获胜，输出结果为“4”！
>>执行语句第三行：Foo().getName()
        本句，有个执行顺序的，先执行方式1的“Foo()”,结果是"this" 并指向window，并产生了一个全局getName(window.getName)指针指向一个匿名函数，然后再执行"this.getName()" , 其实就是执行刚刚造出来的那个全局getName指向的匿名函数，所以输出“1”.
>>执行语句第四行：getName()
        此句执行的是方式1执行出来的那个全局变量getName 指针指向的匿名函数，有人问为啥不执行方式4？俺想说方式4已经被覆盖了！所以结果为 “1”.
>>执行语句第五行：new Foo.getName()
        首先还是先看运算符优先级吧，我自个看完的结果是【new Foo() >  Foo() > new Foo】，先运算方式2的Foo.getName() 结果为“2”，再new一个Foo实例对象。
>>执行语句第六行：new Foo().getName()
        先执行 new Foo(), 结果产生一个新的实例对象，并且继承了Foo()这个构造函数中的getName方法，所以再执行方式3函数块，而接着有涉及到另一个知识点：逻辑运算符运算， 对于 “&&”来说，如果前者为真，那么就去执行后者，否则只执行前者； 对于“||”来说，如果前者为真，只执行前者，后者不必执行，否则还得执行后者。因此结果为 “google”。
>>执行语句第七行：new new Foo().getName()
        先执行new Foo(),变成了 new Foo的实例对象.getName(), 然后再执行 Foo的实例对象.getName(),又回到了方式3函数块，结果为“google”，最后执行new Foo的实例对象。