一次面试经历
面试官从继承和原型链问到 typeof 运算符,又顺着问到了 instanceof 这个运算符。
我:instanceof 运算符用于判断一个对象是否是另一个的实例,比如 A instanceof B 就是判断 A 是不是 B 的实例。
面试官:怎么判断的呢?
我:就是找原型链吧,找 A 的原型链上有没有 B,有的话 A 就是 B 的实例。
面试官:嗯,怎么找原型链的呢?
我:???就这么找呗(懵)
面试官:那这样,我问你,Object instanceof Function 和 Function instanceof Object 的结果分别是什么?
我:嗯……false 和 true 吧……Function 是一个 Object 所以第二个肯定是 true……但是 Object 应该不是 Function 的实例吧……
现在回头想想,应该感谢面试官愿意让我过……
instanceof 运算符简介
面试时我回答 instanceof 运算符的概念大体算对,但是不准确。
我的回答是:instanceof 运算符用于判断一个对象是否是另一个的实例。
这“另一个”具体指的是什么,当时我并没有清楚地说出来。实际上,准确的说法应该是,instanceof 运算符用于判断一个对象是否是某个构造函数的实例。
// 判断 foo 是否是 Foo 类的实例
function Foo(){}
var foo = new Foo();
console.log(foo instanceof Foo) // true
在我举的例子 A instanceof B 当中,A 是一个对象,B 应当是一个构造函数。这个用法与 instanceof 的机制有关。
instanceof 运算符机制
要准确理解 instanceof 运算符的机制,关键就在于面试官问我的那句话:怎么找原型链。
用 JavaScript 代码简单表示 L instanceof R 的机制:
function instance_of(L, R) { //L 表示左表达式,R 表示右表达式
var O = R.prototype; // 取 R 的显式原型
L = L.__proto__; // 取 L 的隐式原型
while (true) {
if (L === null)
return false;
if (O === L) // 这里重点:当 O 严格等于 L 时,返回 true
return true;
L = L.__proto__;
}
}
可以看到,整个判断过程就是不断往上查找 L 的隐式原型 __proto__
,把每个原型链上的隐式原型与 R.prototype
作比较,直到严格相等或隐式原型为 null 为止。所以,R 必须是一个构造函数,因为只有构造函数才有 prototype。
Object 和 Function 的原型链
搞清楚了 instanceof 的机制,还是分不清 Object.__proto__
Function.__proto__
Object.prototype
和 Function.prototype
?
探究这个问题,要从下面这张原型/原型链经典图入手。
从图可看出继承的原型链:
Function|Object|Array...等函数 ---> Function.prototype ---> Object.prototype (root)。
详细解析看 由一段代码引发的关于Object和Function的鸡和蛋问题的思考。
instanceof 推演示例
结合 instanceof 和原型链的以上知识,可以很轻易地回答面试官的问题。以下是一些推演示例:
- Object instanceof Function:
var O = Function.prototype; // Function.prototype
var L = Object.__proto__; // Function.prototype,Object 作为一个函数实例看待
// 比较:O === L
return ture;
2. Function instanceof Object:
var O = Object.prototype; // Object.prototype
var L = Function.__proto__; // Function.prototype
// 比较:O !== L
L = L.__proto__; // Function.prototype.__proto__,即 Object.prototype
// 比较:O === L
return true;
3. Object instanceof Object
var O = ObjectR.prototype; // Object.prototype
var L = ObjectL.__proto__; // Function.prototype
// 比较:O !== L
L = L.__proto__; // Function.prototype.__proto__,即 Object.prototype
// 比较:O === L
return true;
4. Function instanceof Function
O = FunctionR.prototype; // Function.prototype
L = FunctionL.__proto__; // Function.prototype
// 比较:O === L
return true;
相关文章
JavaScript instanceof 运算符深入剖析
由一段代码引发的关于Object和Function的鸡和蛋问题的思考