概要

在Javascript开发过程中，我们经常会涉及原型和原型链的概念，并且会使用instanceof运算符来判断变量的类型，判断的过程又涉及原型和原型链的概念。为了更好的了解和应用该运算符，本文通过分析原型和原型链，再来模拟其实现，从而揭开其中的原理。

基本概念

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

为了理解上述概念，我们首先搞清楚什么是原型，什么是原型链接。

原型(prototype)： 函数的一个属性，是一个对象
原型链(proto)：Object对象的一个属性，也是一个Object对象。
对象的__proto__保存着该对象构造函数的prototype

基于上述概念，instanceof运算符的本质就是检查目标对象是被哪个方法构造的，因为存在继承关系，所以是在整个原型链上查找。也就是检测该对象是什么类型的。

JS中的class是function的语法糖，所以上述概念依然适用。

概念解析

原型链解析

我们看如下代码：

function A(){this.a = 10}var a = new A();a.__proto__ === A.prototype && console.log("a is instance of A");a instanceof A && console.log("a is instance of A");a.__proto__.__proto__ === Object.prototype && console.log("a is instance of Object");a instanceof Object && console.log("a is instance of Object");a.__proto__.__proto__ .__proto__ === null && console.log("Object prototype's prototype is null");

运行结果如下：

我们从原型链的角度分析一下上面的结果：

对象a 实际上就是下面的值。

a = {    a:10,    __proto__: {      // A.prototype __proto__:{   // Object.prototype     __proto__ : null }    }}

严格说，把 __proto__理解成原型链是不准确的，它实际是链条的节点。多个__proto__即多个原型对象组成了原型链。

1. a 是被A方法构造出来的。所以a的__proto__等于A.prototype，因此a instanceof A 是真
2. 按照定义a的__proto__是一个Object对象，也就是被Object构造出来的，因此a.proto.proto 等于Object.prototype
3. Object的prototype对象还有__proto__属性，但是为空，即已经到了链条的最底部。

将function换成class可以得到相同的结果，function只是class的语法糖，所以运行结果是一样的，请参考下面的代码，不再赘述。

class A {constructor(){}}var a = new A();a.__proto__ === A.prototype && console.log("a is instance of A");a instanceof A && console.log("a is instance of A");a.__proto__.__proto__ === Object.prototype && console.log("a is instance of Object");a instanceof Object && console.log("a is instance of Object");a.__proto__.__proto__ .__proto__ === null && console.log("Object prototype's prototype is null");

运行结果如下：

instanceof的其他例子

var date = new Date();var isDate = date instanceof Date;var isArray = date instanceof Array;isDate && console.log(`date object is Date type.`);isArray && console.log(`date object is Array.`);

运行结果如下：

只打印出了“date object is Date type.” 原因很简单，再date对象的原型链上，每一个__proto__ 都不等于Array.prototype， 即date对象并不是被Array构造方法构造出来的。

Date， Array， Object到底是什么

为了搞清楚Date，Array，Object这些JS内置类型，我们执行下面的代码:

console.log(typeof Date)console.log(typeof Array)console.log(typeof Object)

执行结果如下:

它们都是函数，更准确说都是构造函数，他们都是被Function构造出来的。

下面我们来看里一个问题，为什么Date，Array，Object亦或我们自定义的类型，都有__proto__属性？

JS并不像OOP语言那样，类和对象具有严格的界限，对象不能再作为类去定义新的对象。JS中的对象或实例的概念具有相对性，只要有构造函数，即可以构造对象。

如果我们写成var date = new Date()，这就说明构造date对象或实例，要调用Date函数，Date是一个构造函数，需要用new调用。

但是Date为什么也有__proto__属性呢，因为它是被Function构造出来的。因为Date它也有构造方法，它的构造方法是Function，相对于Function，Date只是一个它构造的实例，所以下面代码可以返回为真。

function A(){this.a = 10}console.log(A.__proto__ === Function.prototype)console.log(Date.__proto__ === Function.prototype)console.log(Array.__proto__ === Function.prototype)console.log(Object.__proto__ === Function.prototype)

所以我们通过instanceof，也可以得到相同的结果，因为这也是符合instanceof运行符的定义的。

function A(){this.a = 10}A instanceof Function && console.log("A is instance of Function");Date instanceof Function && console.log("Date is instance of Function");Array instanceof Function && console.log("Array is instance of Function");Object instanceof Function && console.log("Object is instance of Function");

instanceof 运算符代码重写

基于我们上面对原型，原型链的讨论，我们重写instanceof运算符的代码如下：

function isInstanceOf(obj,ctor){    var proto = Object.getPrototypeOf(obj);    while(proto != null){ if (proto === ctor.prototype){     return true; } proto = Object.getPrototypeOf(proto);    }    return false;}

因为并不是所有浏览器支持__proto__属性，所以采用Object.getPrototypeOf代替它。

代码验证：

function A(){}function B(){}var a = new A();console.log("Array is instance of Function");console.log(isInstanceOf(Array,Function));console.log(Array instanceof Function );console.log("a is instance of A");console.log(isInstanceOf(a,A));console.log(a instanceof A);console.log("a is not instance of B");console.log(isInstanceOf(a,B));console.log(a instanceof B);console.log("a is instance of Object");console.log(isInstanceOf(a,Object));console.log(a instanceof Object);