-
Notifications
You must be signed in to change notification settings - Fork 132
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
JS 基础之: 深入剖析 instanceof 运算符 #6
Comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
引言
JS
系列暂定 27 篇,从基础,到原型,到异步,到设计模式,到架构模式等,本篇是
JS
系列中第 4 篇,文章主讲 JSinstanceof
,包括instanceof
作用、内部实现机制,以及instanceof
与typeof
、Symbol.hasInstance
、isPrototype
、Object.prototype.toString
、[[Class]]
等的对比使用 ,深入了解 JSinstanceof
。一、instanceof
1. 引入 instanceof
在 JS 中,判断一个变量的类型,常常会用到
typeof
运算符,但当用typeof
来判断引用类型变量时,无论是什么类型的变量,它都会返回Object
。为此,引入了
instanceof
。instanceof
操作符用于检测对象是否属于某个 class,同时,检测过程中也会将继承关系考虑在内。2. instanceof 与 typeof
instanceof
与typeof
相比,instanceof
方法要求开发者明确的确认对象为某特定类型。即instanceof
用于判断引用类型属于哪个构造函数的方法。3. instanceof 在继承关系中
另外,更重的一点是
instanceof
可以在继承关系中用来判断一个实例是否属于它的父类型。f instanceof Foo
的判断逻辑是:__proto__
一层一层往上,是否对应到Foo.prototype
Aoo.prototype
f instanceof Object
即
instanceof
可以用于判断多层继承关系。下面看一组复杂例子
在这组数据中,Object、Function instanceof 自己均为
true
, 其他的 instanceof 自己都为false
,这就要从instanceof
的内部实现机制以及 JS 原型继承机制讲起。二、instanceof 的内部实现机制
instanceof 的内部实现机制是:通过判断对象的原型链上是否能找到对象的
prototype
,来确定instanceof
返回值1. 内部实现
instanceof
运算符用来检测constructor.prototype
是否存在于参数object
的原型链上。2. 你真的了解 instanceof 了吗
看下面一个例子,
instanceof
为什么会返回true
?很显然,an
并不是通过Bottle()
创建的。这是因为
instanceof
关心的并不是构造函数,而是原型链。即有
an.__proto__ === Bottle.prototype
成立,所以an instanceof Bottle
返回了true
。所以,按照
instanceof
的逻辑,真正决定类型的是prototype
,而不是构造函数。三、 JS 原型链继承关系
图片来自于 JS原型链
由其本文涉及显示原型
prototype
和隐式原型__proto__
,所以下面对这两个概念作一下简单说明。在 JavaScript 原型继承结构里面,规范中用
[Prototype]]
表示对象隐式的原型,在 JavaScript 中用__proto__
表示,并且在 Firefox 和 Chrome 浏览器中是可以访问得到这个属性的,但是 IE 下不行。所有 JavaScript 对象都有__proto__
属性,但只有Object.prototype.__proto__
为 null,前提是没有在 Firefox 或者 Chrome 下修改过这个属性。这个属性指向它的原型对象。 至于显示的原型,在 JavaScript 里用prototype
属性表示,这个是 JavaScript 原型继承的基础知识,如果想进一步了解,请参考 JS 基础之: 深入 constructor、prototype、__proto__
、[[Prototype]] 及 原型链下面介绍几个例子(及其推演过程),加深你的理解:
1. Object instanceof Object
2. Function instanceof Function
3. Foo instanceof Foo
四、 instanceof 与 Symbol.hasInstance
Symbol.hasInstance 用于判断某对象是否为某构造器的实例。因此你可以用它自定义
instanceof
操作符在某个类上的行为。你可实现一个自定义的
instanceof
行为,例如:五、 instanceof 与 isPrototypeOf
isPrototypeOf
也是用来判断一个对象是否存在与另一个对象的原型链上。需要注意的是:
instanceof
:foo
的原型链是针对Foo.prototype
进行检查的isPrototypeOf
:foo
的原型链是针对Foo
本身六、 instanceof 和多全局对象(多个 frame 或多个 window 之间的交互)
instanceof 在多个全局作用域下,判断会有问题,例如:
严格上来说 value 就是数组,但 parent 页面中打印输出: false ;
这是因为 Array.prototype !== window.frames[0].Array.prototype ,并且数组从前者继承。
出现问题主要是在浏览器中,当我们的脚本开始开始处理多个 frame 或 windows 或在多个窗口之间进行交互。多个窗口意味着多个全局环境,不同的全局环境拥有不同的全局对象,从而拥有不同的内置类型构造函数。
解决方法
可以通过使用
Array.isArray(myObj)
或者Object.prototype.toString.call(myObj) === "[object Array]"
来安全的检测传过来的对象是否是一个数组
七、扩展:Object.prototype.toString 方法
默认情况下(不覆盖
toString
方法前提下),任何一个对象调用Object
原生的toString
方法都会返回"[object type]"
,其中type
是对象的类型;1. [[Class]]
每个实例都有一个
[[Class]]
属性,这个属性中就指定了上述字符串中的type
(构造函数名)。[[Class]]
不能直接地被访问,但通常可以间接地通过在这个值上借用默认的Object.prototype.toString.call(..)
方法调用来展示。2. 使用
Object.prototype.toString.call(..)
检测对象类型可以通过
Object.prototype.toString.call(..)
来获取每个对象的类型。或者可写为:
3. Symbol.toStringTag
Object.prototype.toString
方法可以使用Symbol.toStringTag
这个特殊的对象属性进行自定义输出。举例说明:
大部分和环境相关的对象也有这个属性。以下输出可能因浏览器不同而异:
输出结果和
Symbol.toStringTag
(前提是这个属性存在)一样,只不过被包裹进了[object ...]
里。所以,如果希望以字符串的形式获取内置对象类型信息,而不仅仅只是检测类型的话,可以用这个方法来替代
instanceof
。八、总结
Object.prototype.toString
Symbol.toStringTag
属性的对象Object.prototype.toString
基本上就是一增强版typeof
。instanceof
在涉及多层类结构的场合中比较实用,这种情况下需要将类的继承关系考虑在内。九、参考
JavaScript instanceof 运算符深入剖析
类型检测:"instanceof"
The text was updated successfully, but these errors were encountered: