原型链与 instanceof 运算符

一次面试经历

---

面试官从继承和原型链问到 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 和原型链的以上知识，可以很轻易地回答面试官的问题。以下是一些推演示例：

1. 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的鸡和蛋问题的思考