前端面试instanceof_这个前端面试题不知道坑了多少人，确定能答上来？

前言

今年参加了两次同一个大厂的面试，可悲的是，最终都没有通过，一次Base杭州，一次Base北京。整体来说，该厂的面试偏重算法，而这方面刚好戳中了我的软肋，这可能也是自己后续需要着重把握的。上一次写了一篇关于bigInt的面试题，今天决定说一说面试中问到的核心JS基础，不知道各位是否能够答上来。当然，欢迎大家关注我，我将持续分享哪些前端层面核心的知识点，希望能给同处前端的你带来一点点收获。

1、一道面试题

关于这道题有开门见山直接问的，也有循序善诱引出的。套路大概是给你写一个函数，比如:

function QA(){}

然后问题是QA的属性有哪些。我当时也是猛地一愣，脑袋一片空白。这个函数能有什么属性呢？下面请听我细细道来。

2、Object instanceof Function 还是 Function instance of Object

如今的JavaScript再也不是仅仅被当做脚本来运行了。JavaScript已经逐渐标准化，作为一门真正的编程语言广泛地应用在Web开发上。因此，越来越多的人开始重新认识这门脚本语言，并在不断地探索关于JavaScript核心思想和实现原理。本文着重解释一个比较常见但是非常容易使开发人员或者是初学JavaScript的人非常混淆的问题，那就是两个核心构造函数Object和Function，他们之间到底有什么关系？为何instanceof运算符的返回结果会让你感到混淆？

3、JavaScript的对象体系结构

其实在JavaScript语言中，整个核心的体系结构都围绕着两个构造函数Object和Function来构建的。下面的引用来自mollypages.org的一张JavaScript对象体系结构图：

4、instanceof操作符

instanceof是一个二元运算符，如：A instanceof B.。其中，A必须是一个合法的JavaScript对象，B必须是一个合法的JavaScript函数 (function)， 判断过程如下：

如果函数B在对象A的原型链中被发现，那么该操作符将返回true，否则返回false。例如下面的代码会返回true.

 // return true if specified function is found// in the object's prototype chain as a constructor.console.log({} instanceof Object);

5、JavaScript中的原型链机制

JavaScript中的原型是和函数紧密相连的，因为每个函数默认都会有一个属性叫prototype, 每一个通过函数和new操作符生成的对象都具有一个属性__proto__, 这个属性保存了创建它的构造函数的prototype属性的引用。这个__proto__对象就是实现原型链的核心对象。JavaScript是一门面向对象的编程语言，它的继承特性其实就是通过原型链机制来实现的。同时、instanceof运算符也需要在原型链的支持。我们举例说明：

function Foo() {}var foo = new Foo();console.log(foo instanceof Foo);// true console.log(foo instanceof Object);// trueconsole.log(foo instanceof Function);// falseconsole.log(Foo instanceof Function);// trueconsole.log(Foo instanceof Object);// true

从上面的输出不难得出这样一个结论：

任何对象的原型链最后都能追溯到Object.prototype. 这也就是我们为什么说JavaScript中所有的对象都继承自Object的原因了。

6、Object instanceof Function和Function instanceof Object

Object, Function, Array等等这些都被称作是构造“函数”，它们都是函数。而所有的函数都是构造函数Function的实例。从原型链机制的的角度来说，那就是：

所有的函数都能通过原型链找到创建他们的Function构造函数的构造原Function.protorype对象。

所以：

console.log(Object instanceof Function);// return true

与此同时，又因为Function.prototype是一个对象，所以他的构造函数是Object。从原型链机制的的角度来说：

所有的函数都能通过原型链找到创建他们的Object构造函数的构造原型Object.prototype对象

所以：

console.log(Function instanceof Object);// return true

有趣的是根据我们通过原型链机制对instanceof进行的分析，不难得出一个结论：

console.log(Function instanceof Function)//返回true

具体分析如下:

1. Function是构造函数，所以它是函数对象

2. 函数对象都是由Function构造函数创建而来的，原型链机制解释为：函数对象的原型链中存在Function.prototype

3. instanceof查找原型链中的每一个节点，如果Function.prototype的构造函数Function的原型链中被查到，所以返回true

7、本文总结

关于原型链的考察一直是前端招聘的硬指标，不管对于社招还是校招，毕竟原型链可以说是JS语言层面的精髓。因此，建议大家要在原型链上投入足够的精力，咬文嚼字，最后才能真正做到得心应手。我们下期再见吧~