前端面试题分析1

题目

以下代码输出alert的结果是什么?

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();
复制代码

答案：2 4 1 1 2 3 3

分析

1).函数运行，执行完//请写出以下输出结果之前的代码，由于函数的声明提前，此时代码是这样的：

function Foo(){
    getName=function(){alert(1);}
    return this;
}
/*全局的getName方法提前，并且被后面的 getName=function(){alert(4);}覆盖*/
function getName(){alert(5);}//不起作用
Foo.getName=function(){alert(2);}
Foo.prototype.getName=function(){alert(3);}
getName=function(){alert(4);}
复制代码

2).执行Foo.getName();，会调用Foo.getName=function(){alert(2);}；

3).执行getName();，会调用全局的getName函数getName=function(){alert(4);}；

4).执行Foo().getName();,首先执行Foo()，将构造函数当做普通函数调用，执行这个构造函数里面的代码，将全局的getName函数重新定义，并且返回的this指向window；然后再执行window.getName()调用getName=function(){alert(1);}；

5).执行getName();,调用全局的getName函数getName=function(){alert(1);}；

6).执行new Foo.getName();,使用函数Foo.getName=function(){alert(2);}新建了一个对象,并且执行了这个函数的代码(new Foo指的是new(无参数列表)优先级为18,.操作符的优先级也是19，所以先执行点操作符，再执行new操作符)；

7).执行new Foo().getName()，先执行new Foo()，返回一个对象实例，再执行这个实例的getName方法，实例本身没有这个方法，这时会通过原型链查找它的构造函数的原型上是否有这个方法，查找到有Foo.prototype.getName=function(){alert(3);}执行这个方法(new Foo指的是new(有参数列表)优先级为19,.操作符的优先级也是19，所以函数从左往右执行)；

8).执行new new Foo().getName(),先执行new Foo(),返回一个新对象，通过这个对象的getName（执行Foo.prototype.getName=function(){alert(3);}）方法再新建一个对象。

其他

运算符优先级

转载于:https://juejin.im/post/5ce13eaf6fb9a07efc495a00