instanceof 运算符

刚刚上手一个小项目，竟然忘记了instanceof的用法。看来进阶之后基础知识忘记了，再好好总结消化一下。

instanceof 运算符简介

在 JavaScript 中，判断一个变量的类型尝尝会用 typeof 运算符，在使用 typeof 运算符时采用引用类型存储值会出现一个问题，无论引用的是什么类型的对象，它都返回 "object"。ECMAScript 引入了另一个 Java 运算符 instanceof 来解决这个问题。instanceof 运算符与 typeof 运算符相似，用于识别正在处理的对象的类型。与 typeof 方法不同的是，instanceof 方法要求开发者明确地确认对象为某特定类型。例如：

示例

var oStringObject = new String("hello world");

console.log(oStringObject instanceof String);   // 输出 "true"

 

这段代码问的是“变量 oStringObject 是否为 String 对象的实例？”oStringObject 的确是 String 对象的实例，因此结果是"true"。尽管不像 typeof 方法那样灵活，但是在 typeof 方法返回 "object" 的情况下，instanceof 方法还是很有用的。

instanceof 运算符的常规用法

通常来讲，使用 instanceof 就是判断一个实例是否属于某种类型。例如：

 instanceof 常规用法

// 判断 foo 是否是 Foo 类的实例

function Foo(){}

var foo = new Foo();

console.log(foo instanceof Foo)//true

 instanceof 在继承中关系中的用法另外，更重的一点是 instanceof 可以在继承关系中用来判断一个实例是否属于它的父类型。例如：

 

// 判断 foo 是否是 Foo 类的实例 , 并且是否是其父类型的实例

function Aoo(){}

function Foo(){}

Foo.prototype = new Aoo();//JavaScript 原型继承



var foo = new Foo();

console.log(foo instanceof Foo)//true

console.log(foo instanceof Aoo)//true

上面的代码中是判断了一层继承关系中的父类，在多层继承关系中，instanceof 运算符同样适用。

instanceof 复杂用法

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

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

console.log(Number instanceof Number);//false

console.log(String instanceof String);//false



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



console.log(Foo instanceof Function);//true

console.log(Foo instanceof Foo);//false

语言规范对中 instanceof 运算符的定义如下：看了上面的代码又晕头转向了。为什么 Object 和 Function instanceof 自己等于 true，而其他类 instanceof 自己却又不等于 true 呢？如何解释？要想从根本上了解 instanceof 的奥秘，需要从两个方面着手：1语言规范中是如何定义这个运算符的。2，JavaScript 原型继承机制。

 JavaScript instanceof 运算符代码

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__;

 }

}

 

JavaScript 原型继承机制

由于本文主要集中在剖析 JavaScript instanceof 运算符，所以对于 JavaScript 的原型继承机制不再做详细的讲解，下面参考来自 http://www.mollypages.org/misc/js.mp 的一张图片，此图片详细的描述了 JavaScript 各种对象的显示和隐式原型链结构。

由其本文涉及显示原型和隐式原型，所以下面对这两个概念作一下简单说明。在 JavaScript 原型继承结构里面，规范中用 [[Prototype]] 表示对象隐式的原型，在 JavaScript 中用 __proto__ 表示，并且在 Firefox 和 Chrome 浏览器中是可以访问得到这个属性的，但是 IE 下不行。所有 JavaScript 对象都有 __proto__ 属性，但只有 Object.prototype.__proto__ 为 null，前提是没有在 Firefox 或者 Chrome 下修改过这个属性。这个属性指向它的原型对象。 至于显示的原型，在 JavaScript 里用 prototype 属性表示，这个是 JavaScript 原型继承的基础知识，在这里就不在叙述了。

图 1. JavaScript 原型链