js笔试经典面试题

此题是我综合之前的开发经验以及遇到的JS各种坑汇集而成。此题涉及的知识点众多，包括变量定义提升、this指针指向、运算符优先级、原型、继承、全局变量污染、对象属性及原型属性优先级等等。

此题包含7小问，分别说下。

浏览器执行Js程序的时候，分两步：

（1）预解析 在代码解读之前发生，相当于一个"仓库"，放一些东西，比如var、function、参数等。 预解析时变量都是未定义的，函数则是整个函数块。 预解析时遇到重名的，会覆盖。变量与函数，留函数；函数与函数，留后面解析的。 当代码在一个环境中执行时，会创建变量对象的一个作用域链。是域就要预解析。

（2）执行代码 代码自上而下，从左往右的执行，读到表达式时，预解析仓库中的东西发生改变。

我们来分析题目
先预解析，预解析仓库里有：

注意预解析时getName重名了，留函数。

function Foo() {
    getName = function () { console.log (1); };
    return this;
}
function getName() { console.log (5);}

执行代码：

        注意下面这个：
        function fn(){console.log(1)}
        console.log(fn())  //  2  
        function fn(){console.log(2)}

前4行由于是函数声明，所以没卵用
第5行：给Foo对象添加getName方法
第6行：给Foo的原型对象添加getName方法
第7行： *注意*遇到了表达式，域解析仓库中getName变为第7行的赋值语句
    此时预解析仓库变为：
        function Foo() {
            getName = function () { console.log (1); };
            return this;
        }
        getName = function () { console.log (4);};
第8行：*注意*由于是函数声明，所以不影响预解析仓库

第一问

先看此题的上半部分做了什么，首先定义了一个叫Foo的函数，之后为Foo创建了一个叫getName的静态属性存储了一个匿名函数，之后为Foo的原型对象新创建了一个叫getName的匿名函数。之后又通过函数变量表达式创建了一个getName的函数，最后再声明一个叫getName函数。

第一问的 Foo.getName 自然是访问Foo函数上存储的静态属性，自然是2，没什么可说的。

第二问

如果单独看这条执行语句，一般会有个全局声明的函数方式5"function getName(){} ",但要是放在这么个复杂的上下文环境中，那肯定是不一样的啦，因为还有个方式4 “var getName = function(){}” 来捣乱，这就要考察一个知识点（你妈和你媳妇掉水里，你救谁的问题？nonono，可没那么纠结），当定义的变量和声明的函数重名了怎么办？答：它们都会进行预解析，函数声明提前于变量声明，但是最终会被变量覆盖！so方式4获胜，输出结果为“4”！
第三问

 本句，有个执行顺序的，先执行方式1的“Foo()”,结果是"this" 并指向window，并产生了一个全局getName(window.getName)指针指向一个匿名函数，然后再执行"this.getName()" , 其实就是执行刚刚造出来的那个全局getName指向的匿名函数，所以输出“1”.
此处考察了两个知识点，一个是变量作用域问题，一个是this指向问题。

返回this，由于Foo()相当于window.Foo()，所以this指向window， Foo().getName()相当于window.getName()

第四问

直接调用getName函数，相当于 window.getName() ，因为这个变量已经被Foo函数（第3问执行时）执行时修改了，遂结果与第三问相同，为1

第五问

第五问 new Foo.getName(); ,此处考察的是js的运算符优先级问题。

通过查上表可以得知点（.）的优先级高于new操作，遂相当于是:

new (Foo.getName)();
所以实际上将getName函数作为了构造函数来执行，遂弹出2。

第六问

第六问 new Foo().getName() ，首先看运算符优先级括号高于new，实际执行为

(new Foo()).getName()
遂先执行Foo函数，而Foo此时作为构造函数却有返回值，所以这里需要说明下js中的构造函数返回值问题。

构造函数的返回值

在传统语言中，构造函数不应该有返回值，实际执行的返回值就是此构造函数的实例化对象。

而在js中构造函数可以有返回值也可以没有。

1、没有返回值则按照其他语言一样返回实例化对象。

2、若有返回值则检查其返回值是否为引用类型。如果是非引用类型，如基本类型（string,number,boolean,null,undefined）则与无返回值相同，实际返回其实例化对象。

 

3、若返回值是引用类型，则实际返回值为这个引用类型。

原题中，返回的是this，而this在构造函数中本来就代表当前实例化对象，遂最终Foo函数返回实例化对象。

之后调用实例化对象的getName函数，因为在Foo构造函数中没有为实例化对象添加任何属性，遂到当前对象的原型对象（prototype）中寻找getName，找到了。

遂最终输出3。

第七问

第七问, new new Foo().getName(); 同样是运算符优先级问题。

最终实际执行为：

new ((new Foo()).getName)();
先初始化Foo的实例化对象，然后将其原型上的getName函数作为构造函数再次new。

遂最终结果为3

这里成员访问的优先级是最高的，因此先执行了 .getName，但是在进行左侧取值的时候， new Foo() 可以理解为两种运算：new 带参数（即 new Foo()）和函数调用（即 先 Foo() 取值之后再 new），而 new 带参数的优先级是高于函数调用的，因此先执行了 new Foo()，或得 Foo 类的实例对象，再进行了成员访问 .getName。