记一道经典的 JavaScript 面试题

心已赠人 2022-05-25 23:34 252阅读 0赞

最近，在温习前端知识时，看到一道非常好的 JavaScript 面试题，这里做个分享，并附上我的分析。

#### 问题 ####

--------------------

先自己思考下，看自己能分析到第几步，最好能够拿出纸推算一下。

这道题的经典之处在于它综合考察了面试者的 JavaScript 的综合能力，包含了**变量定义提升**、**this 指针指向**、**运算符优先级**、**原型**、**继承**、**全局变量污染**、**对象属性**及**原型属性优先级**等知识。

>   ps：大家也不要轻视这类题目，它虽然不太可能会出现在项目中，业务上很少有人这么写程序，但是可以通过这样的练习夯实自己的基础。
> 
>   此外如果在面试的时候碰到此类繁琐的题目，请记住**面试官并不要求你能把所有题目都答对，主要是看看你是否了解其中的原理与思想，答对与答错对面试官来说，这不是主要的**。

这里附上腾讯面试官给现在找实习的同学的几条建议（在我看来也可以当做箴言来记住了）：  
1. “**我们可以允许你不会，但是一旦会，就得深入理解**。”  
　　面试官能够从面试中知道你的热爱，但是你的热爱要有所体现。这也就是为什么师兄会提醒我们，对于那些不太精通的技能尽量不要写在简历上面。比如说项目经历的时候，说到用到某门技术，但是一旦问到该技术的细微地方，就回答不清楚，这样面试下来的结局或许很悲剧。  
  
  
2. “**不要太在意网上或者同学提供的面试建议，要有意识培养个人的真正实力**”  
　　他提出这样一个例子：应该是网上和同学说了，腾讯的网页重构必问“优化”，于是某同学就背出了“减少http数”和“CDN”等，但是一旦问道为什么减少http数能够加快加载速度。要深入，要理解原理。他还说道，流传出来关于面试的礼仪，比如见到面试官要起立等等，他们都是不看重的。  
　　他说：有那么两种人，一种是知道自己不足在哪里，另外一种是知道自己不足在哪里然后尝试去改变。  
  
  
3. “**遇到不懂的，可以说一下思路，说一下自己的想法。说不定能够让面试官刮目相看**”

> 此段转自 [一次实习生面试经历][Link 1]

#### 解析 ####

--------------------

前面的闲扯有点长，也是为了留些空间让大家好好思考一下上面的题目。（哈哈，其实也算是有感而发~）

**注：**为了简单解释，后面我会用函数最后alert的数字，指代这个函数。

##### 程序在编译阶段做了什么？ #####

为了更好理清复杂的程序，我们最好根据把程序在编译阶段的行为，将程序进行一次修改（此处省略问题程序的执行，仅针对相关函数声明的问题）：

此处最大的变化是 函数5 位置的改变，这是[函数提升][Link 2]，还有函数优先。

##### 问题一 #####

Foo.getName();  //2

这是一个简单的对象属性访问的问题，可能有小伙伴会误认为3，如果在 `getName` 不是直接存在于 `Foo` 中，才会遍历`[[Prototype]]` 链，这时候才会取 `Foo.prototype.getName`。（即函数3）

##### 问题二 #####

getName();      //4

在对程序在编译阶段的行为的分析中，经过函数提升，我们可以知道最后 `getName()` 被赋值为函数4

##### 问题三 #####

Foo().getName();    //1

首先 `Foo()` 调用函数 Foo，使 `getName()` 被赋值为函数1，并且返回 this，此 this 为 window（在非严格模式下，且在浏览器环境下），这里涉及到 [this 4条绑定原理][this 4] 中的**默认绑定**。  
所以，上面的问题三可以进一步转换为：

window.getName();

接着原理同问题二，调用函数1。

##### 问题四 #####

getName();      //1

答案同问题三，原理同问题二

##### 问题五 #####

new Foo.getName();      //2

这里需要知道各运算符的优先级（这里请照着 MDN 的表格一起来分析这一题：[运算符优先级][Link 3]）

首先 `new Foo`， **new运算符** 与 Foo 相连，**new运算符** 被当做无参数列表（优先级 18），不及 **. 属性访问运算符**（优先级19），先进行属性访问，便于理解，这里加个括号。

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

将 `Foo.getName` 作为构造函数调用，普通函数作为构造函数调用首先会调用一次原函数，故 `Foo.getName()` 被调用。（即函数2，原理同问题一）

##### 问题六 #####

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

首先 `new Foo()`，**new运算符** 与 Foo() 相连，**new运算符** 被当做有参数列表（优先级19），与 **. 属性访问运算符**（优先级19）一致，级别一样高，从左到右，先遇到谁先计算谁。

当 `Foo` 作为构造函数调用时，会发生这些事情：  
1. 创建一个新对象，该对象继承自 `Foo.prototype`；  
2. 将 `this` 绑定到这个新对象上；  
3. 构造函数返回的对象就是 `new表达式` 的结果。此程序中 `Foo()` 返回 `this`（即这个新对象）

为了看得清楚，对问题进行一次分解：

var newObj = new Foo();     //构造函数创建的新对象
    newObj.getName();

newObj 即是构造函数返回的新对象，这个对象不会得到 Foo 上的属性，即没有 `Foo.getName` 属性（函数2），不过继承了`Foo.prototype`（`newObj.__proto__ === Foo.prototype`），在 newObj 上查找 getName，自身没有就到 `newObj`的原型链上找，最后在 `newObj.__proto__` 上找到，即函数3。

##### 问题七 #####

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

这个问题看着很吓人，其实如果你已经知道问题五和问题六的原理，这就不成问题。

这里首先调用的 **第二个new运算符**，然后才是 **第一个new运算符**，上面的程序可以进行一次分解：

var newObj = new Foo();
    new (newObj.getName)();

实质是对 `Foo.prototype.getName()` 进行构造函数的调用，原理同问题三。

如果你觉得我说的不清楚，还请说出来，一起交流。如果觉得有错的地方，万望指出。

（原问题来源：[前端程序员经常忽视的一个JavaScript面试题][JavaScript] ）

[Link 1]: http://www.cnblogs.com/0603ljx/p/4347958.html
[Link 2]: https://blog.csdn.net/zwkkkk1/article/details/79742263
[this 4]: https://blog.csdn.net/zwkkkk1/article/details/80008343
[Link 3]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence
[JavaScript]: https://github.com/Wscats/Good-text-Share/issues/85