JavaScript中in运算符和instanceof运算符详解

JavaScript中in运算符和instanceof运算符详解

1. in运算符

in运算符希望它的左操作数是一个字符串或可以转换为字符串，希望它的右侧操作数是一个对象。如果右侧的对象拥有一个名为左操作符的属性名，那么表达式返回true，例如：

var point = {x: 1, y: 1}
"x" in point // 返回true，point对象中存在一个名为"x"的属性
"z" in point // 返回false，point对象中不存在一个名为"z"的属性
"toString" in point // 返回true，point对象继承了toString()方法

var data = [5, 6, 7]
"0" in data // 返回true，data数组包含元素"0"
1 in point // 返回true，数字转换为字符串
3 in point // 返回false，data数组中没有索引为3的元素

上述右侧的对象拥有一个名为左操作符的属性名，它的范围包括对象的自有属性和继承属性。
如果只想要检测对象的自有属性，那么可以使用对象的hasOwnProperty()方法，例如：

var o = {x: 1}
o.hasOwnProperty('x') // true，o有一个自有属性x
o.hasOwnProperty('y') // false，o有不存在属性y
o.hasOwnProperty('toString') // false，toString是继承属性

2. instanceof运算符

inshnceof运算符希望左操作数是一个对象，右操作数标识对象的类。如果左侧的对象是右侧类的实例，则表达式返回true，否则返回false。JavaScript中对象的类是通过初始化它们的构造函数来实现的。这样的话，instanceof的右操作符应该是一个函数。例如：

var d =new Date()
d instanceof Date // 结果为true，d是由Date()创建的
d instanceof Object // 结果为true，所有的对象都是Object的实例
d instanceof Number // 结果为false，d不是一个Number对象

var a = [1, 2, 3]
a instanceof Array // 结果为true，a是一个数组
a instanceof Object // 结果为true，所有数组都是对象
a instanceof RegExp // 结果为false，数组不是正则表达式

需要注意的是，所有的对象都是Object的实例。当通过instanceof判断一个对象是否是一个类的实例的时候，这个判断也会包含对“父类” 的检测。如果instanceof的左操作数不是对象的话，instanceof返回false。如果右操作数不是函数，则抛出一个类型错误异常。

底层原理：

为了理解instanceof运算符是如何工作的，必须首先理解“原型链”。原型链作为JavaScript的继承机制。为了计算表达式o instanceof f, JavaScript首先计算f.prototype,然后在原型链中查找o，如果找到，那么o是f (或者f的父类)的一个实例，表达式返回true。如果f.prototype不在o的原型链中的话，那么o就不是f的实例，instanceof返回false。

对象o中存在一个隐藏的成员，这个成员指向其父类的原型，如果父类的原型是另外一个类的实例的话，则这个原型对象中也存在一个隐藏成员指向另外一个类的原型。 这种链条将许多对象或类串接起来，既是原型链。f.prototype不在o的原型链中也就是说f和o没有派生关系。