1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
|
---
title: instanceof
slug: Web/JavaScript/Reference/Operators/instanceof
tags:
- JavaScript
- instanceof
- 原型
- 原型链
- 对象
- 操作符
translation_of: Web/JavaScript/Reference/Operators/instanceof
---
<div>{{jsSidebar("Operators")}}</div>
<p><strong><code>instanceof</code></strong> <strong>运算符</strong>用于检测构造函数的 <code>prototype</code> 属性是否出现在某个实例对象的原型链上。</p>
<div>{{EmbedInteractiveExample("pages/js/expressions-instanceof.html")}}</div>
<h2 id="Syntax" name="Syntax">语法</h2>
<pre class="notranslate"><code><em>object</em> instanceof <em>constructor</em></code></pre>
<h3 id="Parameters" name="Parameters">参数</h3>
<dl>
<dt><code>object</code></dt>
<dd>某个实例对象</dd>
</dl>
<dl>
<dt><code>constructor</code></dt>
<dd>某个构造函数</dd>
</dl>
<h2 id="Description" name="Description">描述</h2>
<p><code>instanceof</code> 运算符用来检测 <code>constructor.prototype </code>是否存在于参数 <code>object</code> 的原型链上。</p>
<pre class="brush: js notranslate">// 定义构造函数
function C(){}
function D(){}
var o = new C();
o instanceof C; // true，因为 Object.getPrototypeOf(o) === C.prototype
o instanceof D; // false，因为 D.prototype 不在 o 的原型链上
o instanceof Object; // true，因为 Object.prototype.isPrototypeOf(o) 返回 true
C.prototype instanceof Object // true，同上
C.prototype = {};
var o2 = new C();
o2 instanceof C; // true
o instanceof C; // false，C.prototype 指向了一个空对象,这个空对象不在 o 的原型链上.
D.prototype = new C(); // 继承
var o3 = new D();
o3 instanceof D; // true
o3 instanceof C; // true 因为 C.prototype 现在在 o3 的原型链上
</pre>
<p>需要注意的是，如果表达式 <code>obj instanceof Foo</code> 返回 <code>true</code>，则并不意味着该表达式会永远返回 <code>true</code>，因为 <code>Foo.prototype</code> 属性的值有可能会改变，改变之后的值很有可能不存在于 <code>obj</code> 的原型链上，这时原表达式的值就会成为 <code>false</code>。另外一种情况下，原表达式的值也会改变，就是改变对象 <code>obj</code> 的原型链的情况，虽然在目前的ES规范中，我们只能读取对象的原型而不能改变它，但借助于非标准的 <code>__proto__</code> 伪属性，是可以实现的。比如执行 <code>obj.__proto__ = {}</code> 之后，<code>obj instanceof Foo</code> 就会返回 <code>false</code> 了。</p>
<h3 id="instanceof_和多全局对象例如：多个_frame_或多个_window_之间的交互"><code>instanceof</code> 和多全局对象(例如：多个 frame 或多个 window 之间的交互)</h3>
<p>在浏览器中，我们的脚本可能需要在多个窗口之间进行交互。多个窗口意味着多个全局环境，不同的全局环境拥有不同的全局对象，从而拥有不同的内置类型构造函数。这可能会引发一些问题。比如，表达式 <code>[] instanceof window.frames[0].Array</code> 会返回 <code>false</code>，因为 <code>Array.prototype !== window.frames[0].Array.prototype</code>，并且数组从前者继承。</p>
<p>起初，你会认为这样并没有意义，但是当你在你的脚本中开始处理多个 frame 或多个 window 以及通过函数将对象从一个窗口传到另一个窗口时，这就是一个有效而强大的话题。比如，实际上你可以通过使用<code>Array.isArray(myObj)</code> 或者<code>Object.prototype.toString.call(myObj) === "[object Array]"</code> 来安全的检测传过来的对象是否是一个数组。</p>
<p>比如检测一个 <code>Nodes</code> 在另一个窗口中是不是 <code>SVGElement</code>，你可以使用<code>myNode instanceof myNode.ownerDocument.defaultView.SVGElement</code></p>
<div class="note"><strong>Mozilla开发者注意:</strong><br>
在代码中使用 XPCOM <code>instanceof </code>有特殊影响: 如果查询接口成功执行后，<code>obj instanceof </code><em><code>xpcomInterface</code></em> (e.g. <code>Components.interfaces.nsIFile</code>) 调用<code>obj.QueryInterface(<em>xpcomInterface</em>)</code> 并且返回 <code>true</code> 。这种调用的副作用是在一次成功的 <code>instanceof</code> 测试后，你可以在 <code>obj</code> 上使用<code>xpcomInterface</code> 的属性。这与标准的 <code>JavaScript</code> 全局变量不同，即使 <code>obj</code> 来自不同的作用域，<code>obj instanceof xpcomInterface</code> 也可以按预期产生作用。</div>
<h2 id="Examples" name="Examples">示例</h2>
<h3 id="Example_Demonstrating_that_String_and_Date_are_of_type_Object" name="Example:_Demonstrating_that_String_and_Date_are_of_type_Object">演示 <code>String</code> 对象和 <code>Date</code> 对象都属于 <code>Object</code> 类型和一些特殊情况</h3>
<p>下面的代码使用了 <code>instanceof</code> 来证明：<code>String</code> 和 <code>Date</code> 对象同时也属于<code>Object</code> 类型（他们是由 <code>Object</code> 类派生出来的）。</p>
<p>但是，使用对象文字符号创建的对象在这里是一个例外：虽然原型未定义，但 <code>instanceof Object</code> 返回 <code>true</code>。</p>
<pre class="brush: js notranslate">var simpleStr = "This is a simple string";
var myString = new String();
var newStr = new String("String created with constructor");
var myDate = new Date();
var myObj = {};
var myNonObj = Object.create(null);
simpleStr instanceof String; // 返回 false, 非对象实例，因此返回 false
myString instanceof String; // 返回 true
newStr instanceof String; // 返回 true
myString instanceof Object; // 返回 true
myObj instanceof Object; // 返回 true, 尽管原型没有定义
({}) instanceof Object; // 返回 true, 同上
myNonObj instanceof Object; // 返回 false, 一种创建非 Object 实例的对象的方法
myString instanceof Date; //返回 false
myDate instanceof Date; // 返回 true
myDate instanceof Object; // 返回 true
myDate instanceof String; // 返回 false</pre>
<h3 id="Example_Demonstrating_that_mycar_is_of_type_Car_and_type_Object" name="Example:_Demonstrating_that_mycar_is_of_type_Car_and_type_Object">演示 <code>mycar</code> 属于 <code>Car</code> 类型的同时又属于 <code>Object</code> 类型</h3>
<p>下面的代码创建了一个类型 <code>Car</code>，以及该类型的对象实例 <code>mycar</code>. <code>instanceof</code> 运算符表明了这个 <code>mycar</code> 对象既属于 <code>Car</code> 类型，又属于 <code>Object</code> 类型。</p>
<pre class="brush: js notranslate" dir="rtl">function Car(make, model, year) {
this.make = make;
this.model = model;
this.year = year;
}
var mycar = new Car("Honda", "Accord", 1998);
var a = mycar instanceof Car; // 返回 true
var b = mycar instanceof Object; // 返回 true
</pre>
<h3 id="不是...的实例">不是...的实例</h3>
<p>要检测对象不是某个构造函数的实例时，你可以这样做</p>
<pre class="brush: js notranslate">if (!(mycar instanceof Car)) {
// Do something, like mycar = new Car(mycar)
}</pre>
<p>这和以下代码完全不同</p>
<pre class="brush: js notranslate">if (!mycar instanceof Car)</pre>
<p>这段代码永远会得到 <code>false</code>（<code>!mycar</code> 将在 <code>instanceof</code> 之前被处理，所以你总是在验证一个布尔值是否是 <code>Car</code> 的一个实例）。</p>
<h2 id="相关规范">相关规范</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">注释</th>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('ES6', '#sec-relational-operators', 'Relational Operators')}}</td>
<td>{{Spec2('ES6')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('ES5.1', '#sec-11.8.6', 'The instanceof operator')}}</td>
<td>{{Spec2('ES5.1')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('ES3', '#sec-11.8.6', 'The instanceof operator')}}</td>
<td>{{Spec2('ES3')}}</td>
<td>Initial definition. Implemented in JavaScript 1.4.</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<div class="hidden">
<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
</div>
<p>{{Compat("javascript.operators.instanceof")}}</p>
<h2 id="See_also" name="See_also">相关链接</h2>
<ul>
<li><a href="/zh-CN/docs/JavaScript/Reference/Operators/typeof" title="/zh-CN/docs/JavaScript/Reference/Operators/typeof">typeof</a></li>
<li>{{jsxref("Symbol.hasInstance")}}</li>
</ul>
|
