-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathBOM.html
300 lines (269 loc) · 107 KB
/
BOM.html
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
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>window 对象 | note</title>
<meta name="generator" content="VuePress 1.8.2">
<meta name="description" content="note">
<link rel="preload" href="/note/assets/css/0.styles.747e5b72.css" as="style"><link rel="preload" href="/note/assets/js/app.e947756a.js" as="script"><link rel="preload" href="/note/assets/js/3.90278144.js" as="script"><link rel="preload" href="/note/assets/js/57.cb986845.js" as="script"><link rel="preload" href="/note/assets/js/75.886b64ff.js" as="script"><link rel="prefetch" href="/note/assets/js/10.da0d339b.js"><link rel="prefetch" href="/note/assets/js/100.eb373f82.js"><link rel="prefetch" href="/note/assets/js/101.6125310d.js"><link rel="prefetch" href="/note/assets/js/102.523f9313.js"><link rel="prefetch" href="/note/assets/js/103.78d36a48.js"><link rel="prefetch" href="/note/assets/js/104.694c9e6d.js"><link rel="prefetch" href="/note/assets/js/105.71e94424.js"><link rel="prefetch" href="/note/assets/js/106.fb77264a.js"><link rel="prefetch" href="/note/assets/js/107.5dd95b10.js"><link rel="prefetch" href="/note/assets/js/108.0a006d43.js"><link rel="prefetch" href="/note/assets/js/109.99b454b9.js"><link rel="prefetch" href="/note/assets/js/11.1b7713af.js"><link rel="prefetch" href="/note/assets/js/110.86fd882a.js"><link rel="prefetch" href="/note/assets/js/111.7606269c.js"><link rel="prefetch" href="/note/assets/js/112.e69ee0d2.js"><link rel="prefetch" href="/note/assets/js/113.6c79fea6.js"><link rel="prefetch" href="/note/assets/js/114.8f370b23.js"><link rel="prefetch" href="/note/assets/js/115.1c28704b.js"><link rel="prefetch" href="/note/assets/js/116.6a34539a.js"><link rel="prefetch" href="/note/assets/js/117.cfab1284.js"><link rel="prefetch" href="/note/assets/js/118.097ef506.js"><link rel="prefetch" href="/note/assets/js/119.333eed56.js"><link rel="prefetch" href="/note/assets/js/12.39def087.js"><link rel="prefetch" href="/note/assets/js/120.83a7e4f9.js"><link rel="prefetch" href="/note/assets/js/121.149dce13.js"><link rel="prefetch" href="/note/assets/js/122.ccecd357.js"><link rel="prefetch" href="/note/assets/js/123.49c1fba1.js"><link rel="prefetch" href="/note/assets/js/124.1a8b0e77.js"><link rel="prefetch" href="/note/assets/js/125.81f0b603.js"><link rel="prefetch" href="/note/assets/js/126.f94c48be.js"><link rel="prefetch" href="/note/assets/js/127.a1bec729.js"><link rel="prefetch" href="/note/assets/js/128.a5df0129.js"><link rel="prefetch" href="/note/assets/js/129.758a8486.js"><link rel="prefetch" href="/note/assets/js/13.b049522d.js"><link rel="prefetch" href="/note/assets/js/130.49548025.js"><link rel="prefetch" href="/note/assets/js/131.21448cf0.js"><link rel="prefetch" href="/note/assets/js/132.5ffb4c56.js"><link rel="prefetch" href="/note/assets/js/133.aed7232e.js"><link rel="prefetch" href="/note/assets/js/134.83974382.js"><link rel="prefetch" href="/note/assets/js/135.e1e896f8.js"><link rel="prefetch" href="/note/assets/js/136.bd7ab84b.js"><link rel="prefetch" href="/note/assets/js/137.50d921ee.js"><link rel="prefetch" href="/note/assets/js/138.33638790.js"><link rel="prefetch" href="/note/assets/js/139.c4f5ff06.js"><link rel="prefetch" href="/note/assets/js/14.df73d004.js"><link rel="prefetch" href="/note/assets/js/140.7e3ae21a.js"><link rel="prefetch" href="/note/assets/js/141.7dfa6c47.js"><link rel="prefetch" href="/note/assets/js/142.75becf7a.js"><link rel="prefetch" href="/note/assets/js/143.14f1ce25.js"><link rel="prefetch" href="/note/assets/js/144.2e216e87.js"><link rel="prefetch" href="/note/assets/js/145.26a26cc2.js"><link rel="prefetch" href="/note/assets/js/146.c50a0ede.js"><link rel="prefetch" href="/note/assets/js/147.d46f76fe.js"><link rel="prefetch" href="/note/assets/js/148.b4aeb28b.js"><link rel="prefetch" href="/note/assets/js/149.8f01ae6e.js"><link rel="prefetch" href="/note/assets/js/15.42fccff1.js"><link rel="prefetch" href="/note/assets/js/150.d9c7cf0d.js"><link rel="prefetch" href="/note/assets/js/151.b2331bd0.js"><link rel="prefetch" href="/note/assets/js/152.7bd4c3d1.js"><link rel="prefetch" href="/note/assets/js/153.48df5257.js"><link rel="prefetch" href="/note/assets/js/154.7abb2546.js"><link rel="prefetch" href="/note/assets/js/155.bdc019a0.js"><link rel="prefetch" href="/note/assets/js/156.1eb02576.js"><link rel="prefetch" href="/note/assets/js/157.7dc284af.js"><link rel="prefetch" href="/note/assets/js/158.d0e23bbe.js"><link rel="prefetch" href="/note/assets/js/159.cc2e9cae.js"><link rel="prefetch" href="/note/assets/js/16.fe892bc6.js"><link rel="prefetch" href="/note/assets/js/160.ab6aec17.js"><link rel="prefetch" href="/note/assets/js/161.51113cf1.js"><link rel="prefetch" href="/note/assets/js/162.3735fa5a.js"><link rel="prefetch" href="/note/assets/js/163.2bbe9891.js"><link rel="prefetch" href="/note/assets/js/164.09fe01ba.js"><link rel="prefetch" href="/note/assets/js/165.acdc7887.js"><link rel="prefetch" href="/note/assets/js/166.f35878e8.js"><link rel="prefetch" href="/note/assets/js/167.f2a924c1.js"><link rel="prefetch" href="/note/assets/js/168.49a5156a.js"><link rel="prefetch" href="/note/assets/js/169.37dffe7d.js"><link rel="prefetch" href="/note/assets/js/17.1a65396b.js"><link rel="prefetch" href="/note/assets/js/170.95a174e1.js"><link rel="prefetch" href="/note/assets/js/171.48ec050b.js"><link rel="prefetch" href="/note/assets/js/172.1a449136.js"><link rel="prefetch" href="/note/assets/js/173.b042e8e2.js"><link rel="prefetch" href="/note/assets/js/174.44dd9857.js"><link rel="prefetch" href="/note/assets/js/175.0eae6f38.js"><link rel="prefetch" href="/note/assets/js/176.e7a0aab8.js"><link rel="prefetch" href="/note/assets/js/177.fb2b493c.js"><link rel="prefetch" href="/note/assets/js/178.378fd43a.js"><link rel="prefetch" href="/note/assets/js/179.490584ee.js"><link rel="prefetch" href="/note/assets/js/18.af147209.js"><link rel="prefetch" href="/note/assets/js/180.b1c81b5d.js"><link rel="prefetch" href="/note/assets/js/181.dbebfafa.js"><link rel="prefetch" href="/note/assets/js/182.62a84f3e.js"><link rel="prefetch" href="/note/assets/js/183.5e5a78dd.js"><link rel="prefetch" href="/note/assets/js/184.0a59da2d.js"><link rel="prefetch" href="/note/assets/js/185.88a6670c.js"><link rel="prefetch" href="/note/assets/js/186.4697aaf7.js"><link rel="prefetch" href="/note/assets/js/187.480b8108.js"><link rel="prefetch" href="/note/assets/js/188.4141b789.js"><link rel="prefetch" href="/note/assets/js/189.5a64163c.js"><link rel="prefetch" href="/note/assets/js/19.c6db8c80.js"><link rel="prefetch" href="/note/assets/js/190.acb1369a.js"><link rel="prefetch" href="/note/assets/js/191.94a3b042.js"><link rel="prefetch" href="/note/assets/js/192.66fa57a0.js"><link rel="prefetch" href="/note/assets/js/193.38728d50.js"><link rel="prefetch" href="/note/assets/js/194.c6a218d1.js"><link rel="prefetch" href="/note/assets/js/195.ac5c3621.js"><link rel="prefetch" href="/note/assets/js/196.b403c248.js"><link rel="prefetch" href="/note/assets/js/197.dc2fdc3e.js"><link rel="prefetch" href="/note/assets/js/198.9fc8a642.js"><link rel="prefetch" href="/note/assets/js/199.a2d0b122.js"><link rel="prefetch" href="/note/assets/js/2.23574326.js"><link rel="prefetch" href="/note/assets/js/20.e0847784.js"><link rel="prefetch" href="/note/assets/js/200.4f64dd0d.js"><link rel="prefetch" href="/note/assets/js/201.bf85ae0a.js"><link rel="prefetch" href="/note/assets/js/21.59ca2081.js"><link rel="prefetch" href="/note/assets/js/22.c5de56ad.js"><link rel="prefetch" href="/note/assets/js/23.0ca72332.js"><link rel="prefetch" href="/note/assets/js/24.40dcfa48.js"><link rel="prefetch" href="/note/assets/js/25.3a8dbd37.js"><link rel="prefetch" href="/note/assets/js/26.e170720a.js"><link rel="prefetch" href="/note/assets/js/27.d7b3a8b3.js"><link rel="prefetch" href="/note/assets/js/28.b6211836.js"><link rel="prefetch" href="/note/assets/js/29.8989bc0b.js"><link rel="prefetch" href="/note/assets/js/30.c1441795.js"><link rel="prefetch" href="/note/assets/js/31.535e7227.js"><link rel="prefetch" href="/note/assets/js/32.c085da5e.js"><link rel="prefetch" href="/note/assets/js/33.94e31849.js"><link rel="prefetch" href="/note/assets/js/34.2a0a7c0e.js"><link rel="prefetch" href="/note/assets/js/35.ea577ebe.js"><link rel="prefetch" href="/note/assets/js/36.3e4ca0e9.js"><link rel="prefetch" href="/note/assets/js/37.457851b2.js"><link rel="prefetch" href="/note/assets/js/38.58391346.js"><link rel="prefetch" href="/note/assets/js/39.314e2c1c.js"><link rel="prefetch" href="/note/assets/js/4.07bcf00c.js"><link rel="prefetch" href="/note/assets/js/40.7a4992e6.js"><link rel="prefetch" href="/note/assets/js/41.782aced9.js"><link rel="prefetch" href="/note/assets/js/42.be7cf586.js"><link rel="prefetch" href="/note/assets/js/43.56b5a4ed.js"><link rel="prefetch" href="/note/assets/js/44.8d44debe.js"><link rel="prefetch" href="/note/assets/js/45.05492c10.js"><link rel="prefetch" href="/note/assets/js/46.313f9714.js"><link rel="prefetch" href="/note/assets/js/47.2bd35de7.js"><link rel="prefetch" href="/note/assets/js/48.8b399041.js"><link rel="prefetch" href="/note/assets/js/49.2bdcefce.js"><link rel="prefetch" href="/note/assets/js/5.6a1f7866.js"><link rel="prefetch" href="/note/assets/js/50.66e24588.js"><link rel="prefetch" href="/note/assets/js/51.82aab1fa.js"><link rel="prefetch" href="/note/assets/js/52.22755877.js"><link rel="prefetch" href="/note/assets/js/53.2d8059eb.js"><link rel="prefetch" href="/note/assets/js/54.6206fc19.js"><link rel="prefetch" href="/note/assets/js/55.33b69640.js"><link rel="prefetch" href="/note/assets/js/56.474fe548.js"><link rel="prefetch" href="/note/assets/js/58.9bb3e465.js"><link rel="prefetch" href="/note/assets/js/59.2dd021c8.js"><link rel="prefetch" href="/note/assets/js/6.7d4ce126.js"><link rel="prefetch" href="/note/assets/js/60.3a37f110.js"><link rel="prefetch" href="/note/assets/js/61.7903290c.js"><link rel="prefetch" href="/note/assets/js/62.f5225b69.js"><link rel="prefetch" href="/note/assets/js/63.2c341744.js"><link rel="prefetch" href="/note/assets/js/64.5eb61b5c.js"><link rel="prefetch" href="/note/assets/js/65.261994ad.js"><link rel="prefetch" href="/note/assets/js/66.c8747b66.js"><link rel="prefetch" href="/note/assets/js/67.17352922.js"><link rel="prefetch" href="/note/assets/js/68.261de6ca.js"><link rel="prefetch" href="/note/assets/js/69.6bd4de47.js"><link rel="prefetch" href="/note/assets/js/7.83ae24aa.js"><link rel="prefetch" href="/note/assets/js/70.8229f00c.js"><link rel="prefetch" href="/note/assets/js/71.c823ec99.js"><link rel="prefetch" href="/note/assets/js/72.eaedac79.js"><link rel="prefetch" href="/note/assets/js/73.77d37587.js"><link rel="prefetch" href="/note/assets/js/74.6590f027.js"><link rel="prefetch" href="/note/assets/js/76.a1a73fa8.js"><link rel="prefetch" href="/note/assets/js/77.7e91101d.js"><link rel="prefetch" href="/note/assets/js/78.5decad8d.js"><link rel="prefetch" href="/note/assets/js/79.873d4d76.js"><link rel="prefetch" href="/note/assets/js/8.0568bdf3.js"><link rel="prefetch" href="/note/assets/js/80.3399e7ac.js"><link rel="prefetch" href="/note/assets/js/81.1a517606.js"><link rel="prefetch" href="/note/assets/js/82.4b2ad5a6.js"><link rel="prefetch" href="/note/assets/js/83.f12aef98.js"><link rel="prefetch" href="/note/assets/js/84.72db6940.js"><link rel="prefetch" href="/note/assets/js/85.fdda2491.js"><link rel="prefetch" href="/note/assets/js/86.a1b519c5.js"><link rel="prefetch" href="/note/assets/js/87.2aa0d10a.js"><link rel="prefetch" href="/note/assets/js/88.d585344e.js"><link rel="prefetch" href="/note/assets/js/89.46a6bd7d.js"><link rel="prefetch" href="/note/assets/js/9.a5aff2ef.js"><link rel="prefetch" href="/note/assets/js/90.a666a016.js"><link rel="prefetch" href="/note/assets/js/91.536ac0ea.js"><link rel="prefetch" href="/note/assets/js/92.3c07d1c5.js"><link rel="prefetch" href="/note/assets/js/93.5fbaaa0c.js"><link rel="prefetch" href="/note/assets/js/94.d9d49225.js"><link rel="prefetch" href="/note/assets/js/95.0c6ceb62.js"><link rel="prefetch" href="/note/assets/js/96.be43da0f.js"><link rel="prefetch" href="/note/assets/js/97.311eb161.js"><link rel="prefetch" href="/note/assets/js/98.658de69e.js"><link rel="prefetch" href="/note/assets/js/99.f19faecb.js">
<link rel="stylesheet" href="/note/assets/css/0.styles.747e5b72.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/note/" class="home-link router-link-active"><!----> <span class="site-name">note</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/note/" class="nav-link">
Home
</a></div><div class="nav-item"><a href="/note/css/css基础.html" class="nav-link">
css 相关
</a></div><div class="nav-item"><a href="/note/javascript/知识体系.html" class="nav-link">
javascript
</a></div><div class="nav-item"><a href="/note/js-patterns/代理模式.html" class="nav-link">
js 设计模式
</a></div><div class="nav-item"><a href="/note/webpack/基础知识.html" class="nav-link">
webpack
</a></div><div class="nav-item"><a href="/note/vue/相关笔记.html" class="nav-link">
vue
</a></div><div class="nav-item"><a href="/note/react/react基础.html" class="nav-link">
react 相关
</a></div><div class="nav-item"><a href="/note/angular/基础.html" class="nav-link">
angular
</a></div><div class="nav-item"><a href="/note/http/HTTP协议基础.html" class="nav-link">
http
</a></div><div class="nav-item"><a href="/note/node/基础知识.html" class="nav-link">
node
</a></div><div class="nav-item"><a href="/note/typescript/typescript基础语法.html" class="nav-link">
typescript
</a></div><div class="nav-item"><a href="/note/webgis/坐标系相关.html" class="nav-link">
webgis
</a></div><div class="nav-item"><a href="/note/js-gc/数据类型.html" class="nav-link">
红宝书
</a></div><div class="nav-item"><a href="/note/interview/forEach-forIn-forOf-map之间的区别.html" class="nav-link">
interview
</a></div><div class="nav-item"><a href="/note/gisAlgorithm/数据结构-矢量.html" class="nav-link">
gis 算法
</a></div><div class="nav-item"><a href="/note/graphics/图形学基础.html" class="nav-link">
图形学相关
</a></div><div class="nav-item"><a href="/note/js-algorithm/栈.html" class="nav-link">
算法与数据结构
</a></div><div class="nav-item"><a href="/note/PerformanceOptimization/指标以及工具.html" class="nav-link">
性能优化
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/note/" class="nav-link">
Home
</a></div><div class="nav-item"><a href="/note/css/css基础.html" class="nav-link">
css 相关
</a></div><div class="nav-item"><a href="/note/javascript/知识体系.html" class="nav-link">
javascript
</a></div><div class="nav-item"><a href="/note/js-patterns/代理模式.html" class="nav-link">
js 设计模式
</a></div><div class="nav-item"><a href="/note/webpack/基础知识.html" class="nav-link">
webpack
</a></div><div class="nav-item"><a href="/note/vue/相关笔记.html" class="nav-link">
vue
</a></div><div class="nav-item"><a href="/note/react/react基础.html" class="nav-link">
react 相关
</a></div><div class="nav-item"><a href="/note/angular/基础.html" class="nav-link">
angular
</a></div><div class="nav-item"><a href="/note/http/HTTP协议基础.html" class="nav-link">
http
</a></div><div class="nav-item"><a href="/note/node/基础知识.html" class="nav-link">
node
</a></div><div class="nav-item"><a href="/note/typescript/typescript基础语法.html" class="nav-link">
typescript
</a></div><div class="nav-item"><a href="/note/webgis/坐标系相关.html" class="nav-link">
webgis
</a></div><div class="nav-item"><a href="/note/js-gc/数据类型.html" class="nav-link">
红宝书
</a></div><div class="nav-item"><a href="/note/interview/forEach-forIn-forOf-map之间的区别.html" class="nav-link">
interview
</a></div><div class="nav-item"><a href="/note/gisAlgorithm/数据结构-矢量.html" class="nav-link">
gis 算法
</a></div><div class="nav-item"><a href="/note/graphics/图形学基础.html" class="nav-link">
图形学相关
</a></div><div class="nav-item"><a href="/note/js-algorithm/栈.html" class="nav-link">
算法与数据结构
</a></div><div class="nav-item"><a href="/note/PerformanceOptimization/指标以及工具.html" class="nav-link">
性能优化
</a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/note/js-gc/数据类型.html" class="sidebar-link">数据类型</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/数据类型.html#数据类型" class="sidebar-link">💫 数据类型</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/数据类型.html#number" class="sidebar-link">👉 Number</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/数据类型.html#string" class="sidebar-link">👉 String</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/数据类型.html#object" class="sidebar-link">👉 Object</a></li></ul></li></ul></li><li><a href="/note/js-gc/操作符.html" class="sidebar-link">操作符</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/操作符.html#操作符" class="sidebar-link">操作符</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/操作符.html#一元操作符" class="sidebar-link">一元操作符</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/操作符.html#布尔操作符" class="sidebar-link">布尔操作符</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/操作符.html#逻辑或" class="sidebar-link">逻辑或</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/操作符.html#乘法操作符" class="sidebar-link">乘法操作符</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/操作符.html#除法操作符" class="sidebar-link">除法操作符</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/操作符.html#求模" class="sidebar-link">求模</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/操作符.html#加性操作符" class="sidebar-link">加性操作符</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/操作符.html#关系操作符" class="sidebar-link">关系操作符</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/操作符.html#相等操作符" class="sidebar-link">相等操作符</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/操作符.html#逗号操作符" class="sidebar-link">逗号操作符</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/操作符.html#breack-和-continue-语句" class="sidebar-link">breack 和 continue 语句</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/操作符.html#switch-语句" class="sidebar-link">switch 语句</a></li></ul></li></ul></li><li><a href="/note/js-gc/变量、作用域和内存.html" class="sidebar-link">变量、作用域和内存</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/变量、作用域和内存.html#变量、作用域和内存问题" class="sidebar-link">变量、作用域和内存问题</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/变量、作用域和内存.html#检测类型" class="sidebar-link">检测类型</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/变量、作用域和内存.html#执行环境以及作用域" class="sidebar-link">执行环境以及作用域</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/变量、作用域和内存.html#垃圾收集" class="sidebar-link">垃圾收集</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/变量、作用域和内存.html#javascript-v8-引擎的垃圾回收机制" class="sidebar-link">JavaScript V8 引擎的垃圾回收机制</a></li></ul></li></ul></li><li><a href="/note/js-gc/引用类型.html" class="sidebar-link">引用类型</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/引用类型.html#object-类型" class="sidebar-link">Object 类型</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/引用类型.html#array-类型" class="sidebar-link">Array 类型</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/引用类型.html#date-类型" class="sidebar-link">Date 类型</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/引用类型.html#regexp-类型" class="sidebar-link">RegExp 类型</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/引用类型.html#函数声明与函数表达式" class="sidebar-link">函数声明与函数表达式</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/引用类型.html#函数的内部属性" class="sidebar-link">函数的内部属性</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/引用类型.html#函数属性和方法" class="sidebar-link">函数属性和方法</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/引用类型.html#基本包装类型" class="sidebar-link">基本包装类型</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/引用类型.html#boolean-对象" class="sidebar-link">Boolean 对象</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/引用类型.html#number-类型" class="sidebar-link">Number 类型</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/引用类型.html#string-类型" class="sidebar-link">String 类型</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/引用类型.html#单体内置对象" class="sidebar-link">单体内置对象</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/引用类型.html#global-对象" class="sidebar-link">Global 对象</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/引用类型.html#math-对象" class="sidebar-link">Math 对象</a></li></ul></li></ul></li><li><a href="/note/js-gc/集合引用类型.html" class="sidebar-link">集合引用类型</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/集合引用类型.html#定型数组" class="sidebar-link">定型数组</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/集合引用类型.html#arraybuffer" class="sidebar-link">ArrayBuffer</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/集合引用类型.html#dataview" class="sidebar-link">DataView</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/集合引用类型.html#map" class="sidebar-link">Map</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/集合引用类型.html#基本-api" class="sidebar-link">基本 API</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/集合引用类型.html#顺序与迭代" class="sidebar-link">顺序与迭代</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/集合引用类型.html#选择-object-还是-map" class="sidebar-link">选择 Object 还是 Map</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/集合引用类型.html#weakmap" class="sidebar-link">WeakMap</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/集合引用类型.html#基本-api-2" class="sidebar-link">基本 API</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/集合引用类型.html#弱键" class="sidebar-link">弱键</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/集合引用类型.html#不可迭代键" class="sidebar-link">不可迭代键</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/集合引用类型.html#使用弱映射" class="sidebar-link">使用弱映射</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/集合引用类型.html#set" class="sidebar-link">Set</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/集合引用类型.html#基本-api-3" class="sidebar-link">基本 API</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/集合引用类型.html#顺序与迭代-2" class="sidebar-link">顺序与迭代</a></li></ul></li></ul></li><li><a href="/note/js-gc/迭代器与生成器.html" class="sidebar-link">迭代器与生成器</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/迭代器与生成器.html#迭代器模式" class="sidebar-link">迭代器模式</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/迭代器与生成器.html#迭代器协议" class="sidebar-link">迭代器协议</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/迭代器与生成器.html#自定义迭代器" class="sidebar-link">自定义迭代器</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/迭代器与生成器.html#提前终止迭代器" class="sidebar-link">提前终止迭代器</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/迭代器与生成器.html#生成器" class="sidebar-link">生成器</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/迭代器与生成器.html#生成器基础" class="sidebar-link">生成器基础</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/迭代器与生成器.html#通过-yield-中断执行" class="sidebar-link">通过 yield 中断执行</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/迭代器与生成器.html#生成器作为默认迭代器" class="sidebar-link">生成器作为默认迭代器</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/迭代器与生成器.html#提前终止生成器" class="sidebar-link">提前终止生成器</a></li></ul></li></ul></li><li><a href="/note/js-gc/对象、类与面向对象编程.html" class="sidebar-link">对象、类与面向对象编程</a></li><li><a href="/note/js-gc/代理与反射.html" class="sidebar-link">代理与反射</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#代理基础" class="sidebar-link">代理基础</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#创建代理" class="sidebar-link">创建代理</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#定义捕获器" class="sidebar-link">定义捕获器</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#捕获器参数和反射-api" class="sidebar-link">捕获器参数和反射 API</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#捕获器不变式" class="sidebar-link">捕获器不变式</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#可撤销代理" class="sidebar-link">可撤销代理</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#实用反射-api" class="sidebar-link">实用反射 API</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#代理另一个代理" class="sidebar-link">代理另一个代理</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#代理的问题与不足" class="sidebar-link">代理的问题与不足</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#代理捕获器与反射方法" class="sidebar-link">代理捕获器与反射方法</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#get" class="sidebar-link">get()</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#set" class="sidebar-link">set()</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#has" class="sidebar-link">has()</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#defineproperty" class="sidebar-link">defineProperty()</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#getownpropertydescriptor" class="sidebar-link">getOwnPropertyDescriptor()</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#deleteproperty" class="sidebar-link">deleteProperty()</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#ownkeys" class="sidebar-link">ownKeys()</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#getprototypeof" class="sidebar-link">getPrototypeOf()</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#setprototypeof" class="sidebar-link">setPrototypeOf()</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#isextensible" class="sidebar-link">isExtensible()</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#preventextensions" class="sidebar-link">preventExtensions()</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#apply" class="sidebar-link">apply()</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#construct" class="sidebar-link">construct()</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#代理模式" class="sidebar-link">代理模式</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#跟踪属性访问" class="sidebar-link">跟踪属性访问</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#隐藏属性" class="sidebar-link">隐藏属性</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#属性验证" class="sidebar-link">属性验证</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#函数与构造函数参数验证" class="sidebar-link">函数与构造函数参数验证</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#数据绑定与可观察对象" class="sidebar-link">数据绑定与可观察对象</a></li></ul></li></ul></li><li><a href="/note/js-gc/对象的创建模式.html" class="sidebar-link">对象的创建模式</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/对象的创建模式.html#理解对象" class="sidebar-link">理解对象</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/对象的创建模式.html#属性类型" class="sidebar-link">属性类型</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/对象的创建模式.html#创建对象" class="sidebar-link">创建对象</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/对象的创建模式.html#工厂模式" class="sidebar-link">工厂模式</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/对象的创建模式.html#构造函数模式" class="sidebar-link">构造函数模式</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/对象的创建模式.html#原型模式" class="sidebar-link">原型模式</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/对象的创建模式.html#组合使用构造函数模式和原型模式-最常用的模式" class="sidebar-link">组合使用构造函数模式和原型模式（最常用的模式）</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/对象的创建模式.html#动态原型模式" class="sidebar-link">动态原型模式</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/对象的创建模式.html#寄生构造函数模式" class="sidebar-link">寄生构造函数模式</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/对象的创建模式.html#稳妥构造函数模式" class="sidebar-link">稳妥构造函数模式</a></li></ul></li></ul></li><li><a href="/note/js-gc/继承.html" class="sidebar-link">继承</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/继承.html#原型链" class="sidebar-link">原型链</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/继承.html#默认的原型" class="sidebar-link">默认的原型</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/继承.html#确定原型和实例之间的关系" class="sidebar-link">确定原型和实例之间的关系</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/继承.html#谨慎地定义方法" class="sidebar-link">谨慎地定义方法</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/继承.html#原型链的问题" class="sidebar-link">原型链的问题</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/继承.html#借用构造函数" class="sidebar-link">借用构造函数</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/继承.html#传递参数" class="sidebar-link">传递参数</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/继承.html#借用构造函数存在的问题" class="sidebar-link">借用构造函数存在的问题</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/继承.html#组合继承-最常用" class="sidebar-link">组合继承（最常用）</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/继承.html#原型式继承" class="sidebar-link">原型式继承</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/继承.html#寄生式继承" class="sidebar-link">寄生式继承</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/继承.html#寄生组合式继承" class="sidebar-link">寄生组合式继承</a></li></ul></li><li><a href="/note/js-gc/函数表达式.html" class="sidebar-link">函数表达式</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/函数表达式.html#函数定义" class="sidebar-link">函数定义</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/函数表达式.html#函数声明" class="sidebar-link">函数声明</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/函数表达式.html#函数表达式" class="sidebar-link">函数表达式</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/函数表达式.html#递归" class="sidebar-link">递归</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/函数表达式.html#闭包" class="sidebar-link">闭包</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/函数表达式.html#创建闭包" class="sidebar-link">创建闭包</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/函数表达式.html#闭包与变量" class="sidebar-link">闭包与变量</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/函数表达式.html#关于-this-对象" class="sidebar-link">关于 this 对象</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/函数表达式.html#内存泄漏" class="sidebar-link">内存泄漏</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/函数表达式.html#模仿块级作用域" class="sidebar-link">模仿块级作用域</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/函数表达式.html#私有变量" class="sidebar-link">私有变量</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/函数表达式.html#静态私有变量" class="sidebar-link">静态私有变量</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/函数表达式.html#模块模式" class="sidebar-link">模块模式</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/函数表达式.html#增强的模块模式" class="sidebar-link">增强的模块模式</a></li></ul></li></ul></li><li><a href="/note/js-gc/promise与异步函数.html" class="sidebar-link">promise与异步函数</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/promise与异步函数.html#promise" class="sidebar-link">Promise</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/promise与异步函数.html#基础" class="sidebar-link">基础</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/promise与异步函数.html#promise-的实例方法" class="sidebar-link">Promise 的实例方法</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/promise与异步函数.html#promise-连用以及合并请求" class="sidebar-link">Promise 连用以及合并请求</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/promise与异步函数.html#promise-的扩展" class="sidebar-link">Promise 的扩展</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/promise与异步函数.html#异步函数" class="sidebar-link">异步函数</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/promise与异步函数.html#async" class="sidebar-link">async</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/promise与异步函数.html#await" class="sidebar-link">await</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/promise与异步函数.html#await-的限制" class="sidebar-link">await 的限制</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/promise与异步函数.html#停止和恢复执行" class="sidebar-link">停止和恢复执行</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/promise与异步函数.html#异步函数策略" class="sidebar-link">异步函数策略</a></li></ul></li></ul></li><li><a href="/note/js-gc/BOM.html" aria-current="page" class="active sidebar-link">BOM</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/BOM.html#window-对象" class="sidebar-link">window 对象</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/BOM.html#全局作用域" class="sidebar-link">全局作用域</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/BOM.html#窗口关系及框架" class="sidebar-link">窗口关系及框架</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/BOM.html#窗口位置" class="sidebar-link">窗口位置</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/BOM.html#窗口大小" class="sidebar-link">窗口大小</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/BOM.html#导航和打开窗口" class="sidebar-link">导航和打开窗口</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/BOM.html#settimeout-setinterval" class="sidebar-link">setTimeout/setInterval</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/BOM.html#系统对话框" class="sidebar-link">系统对话框</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/BOM.html#location-对象" class="sidebar-link">location 对象</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/BOM.html#查询字符串参数" class="sidebar-link">查询字符串参数</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/BOM.html#位置操作" class="sidebar-link">位置操作</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/BOM.html#nagigator-对象" class="sidebar-link">nagigator 对象</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/BOM.html#检查插件" class="sidebar-link">检查插件</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/BOM.html#history-对象" class="sidebar-link">history 对象</a></li></ul></li><li><a href="/note/js-gc/DOM.html" class="sidebar-link">DOM</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/DOM.html#节点层次" class="sidebar-link">节点层次</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/DOM.html#node-类型" class="sidebar-link">Node 类型</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM.html#document-类型" class="sidebar-link">Document 类型</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM.html#element-类型" class="sidebar-link">Element 类型</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM.html#text-类型" class="sidebar-link">Text 类型</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM.html#comment-类型" class="sidebar-link">Comment 类型</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM.html#documenttype-类型" class="sidebar-link">DocumentType 类型</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM.html#documentfragment-类型" class="sidebar-link">DocumentFragment 类型</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM.html#attr-属性" class="sidebar-link">Attr 属性</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM.html#dom-操作技术" class="sidebar-link">DOM 操作技术</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/DOM.html#动态脚本" class="sidebar-link">动态脚本</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM.html#动态样式" class="sidebar-link">动态样式</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM.html#操作表格" class="sidebar-link">操作表格</a></li></ul></li></ul></li><li><a href="/note/js-gc/DOM扩展.html" class="sidebar-link">DOM扩展</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/DOM扩展.html#选择符-api" class="sidebar-link">选择符 API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/DOM扩展.html#queryselector-方法" class="sidebar-link">querySelector() 方法</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM扩展.html#querysekectorall-方法" class="sidebar-link">querySekectorAll() 方法</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM扩展.html#matches-方法" class="sidebar-link">matches() 方法</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM扩展.html#元素遍历" class="sidebar-link">元素遍历</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM扩展.html#html-5" class="sidebar-link">HTML 5</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/DOM扩展.html#css-类扩展" class="sidebar-link">CSS 类扩展</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM扩展.html#焦点管理" class="sidebar-link">焦点管理</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM扩展.html#htmldocument-扩展" class="sidebar-link">HTMLDocument 扩展</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM扩展.html#字符集属性" class="sidebar-link">字符集属性</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM扩展.html#自定义属性" class="sidebar-link">自定义属性</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM扩展.html#插入标记" class="sidebar-link">插入标记</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM扩展.html#专有扩展" class="sidebar-link">专有扩展</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/DOM扩展.html#children-属性" class="sidebar-link">children 属性</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM扩展.html#contains-方法" class="sidebar-link">contains() 方法</a></li></ul></li></ul></li><li><a href="/note/js-gc/DOM2和DOM3.html" class="sidebar-link">DOM2和DOM3</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/DOM2和DOM3.html#dom2、dom3" class="sidebar-link">DOM2、DOM3</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM2和DOM3.html#dom-变化" class="sidebar-link">DOM 变化</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/DOM2和DOM3.html#documenttype-类型的变化" class="sidebar-link">DocumentType 类型的变化</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM2和DOM3.html#document-的变化" class="sidebar-link">Document 的变化</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM2和DOM3.html#node-的变化" class="sidebar-link">Node 的变化</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM2和DOM3.html#框架的变化" class="sidebar-link">框架的变化</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM2和DOM3.html#样式" class="sidebar-link">样式</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/DOM2和DOM3.html#dom-样式属性和方法" class="sidebar-link">DOM 样式属性和方法</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM2和DOM3.html#计算的样式" class="sidebar-link">计算的样式</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM2和DOM3.html#操作样式表" class="sidebar-link">操作样式表</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM2和DOM3.html#元素大小" class="sidebar-link">元素大小</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM2和DOM3.html#遍历" class="sidebar-link">遍历</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/DOM2和DOM3.html#nodeiterator" class="sidebar-link">NodeIterator</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM2和DOM3.html#treewalker" class="sidebar-link">TreeWalker</a></li></ul></li></ul></li><li><a href="/note/js-gc/事件.html" class="sidebar-link">事件</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#事件流" class="sidebar-link">事件流</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#事件冒泡" class="sidebar-link">事件冒泡</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#事件捕获" class="sidebar-link">事件捕获</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#dom-事件流" class="sidebar-link">DOM 事件流</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#事件处理程序" class="sidebar-link">事件处理程序</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#html-事件处理程序" class="sidebar-link">HTML 事件处理程序</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#dom0-事件处理程序" class="sidebar-link">DOM0 事件处理程序</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#dom2-事件处理程序" class="sidebar-link">DOM2 事件处理程序</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#ie-事件处理程序" class="sidebar-link">IE 事件处理程序</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#跨浏览器的事件处理程序" class="sidebar-link">跨浏览器的事件处理程序</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#事件对象" class="sidebar-link">事件对象</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#dom-中的事件对象" class="sidebar-link">DOM 中的事件对象</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#ie-中的事件对象" class="sidebar-link">IE 中的事件对象</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#跨浏览器事件对象" class="sidebar-link">跨浏览器事件对象</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#事件类型" class="sidebar-link">事件类型</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#用户界面事件" class="sidebar-link">用户界面事件</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#焦点事件" class="sidebar-link">焦点事件</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#鼠标和滚轮事件" class="sidebar-link">鼠标和滚轮事件</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#键盘与输入事件" class="sidebar-link">键盘与输入事件</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#html5-事件" class="sidebar-link">HTML5 事件</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#触摸及手势事件" class="sidebar-link">触摸及手势事件</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#内存与性能" class="sidebar-link">内存与性能</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#事件委托" class="sidebar-link">事件委托</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#删除事件处理程序" class="sidebar-link">删除事件处理程序</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#模拟事件" class="sidebar-link">模拟事件</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#dom-事件模拟" class="sidebar-link">DOM 事件模拟</a></li></ul></li></ul></li><li><a href="/note/js-gc/动画与Canvas图形.html" class="sidebar-link">动画与Canvas图形</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/动画与Canvas图形.html#使用-requestanimationframe" class="sidebar-link">使用 requestAnimationFrame</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/动画与Canvas图形.html#requestanimationframe" class="sidebar-link">requestAnimationFrame</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/动画与Canvas图形.html#cancelanimationframe" class="sidebar-link">cancelAnimationFrame</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/动画与Canvas图形.html#通过-requestanimationframe-节流" class="sidebar-link">通过 requestAnimationFrame 节流</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/动画与Canvas图形.html#基本的画布功能" class="sidebar-link">基本的画布功能</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/动画与Canvas图形.html#_2d-绘图上下文" class="sidebar-link">2D 绘图上下文</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/动画与Canvas图形.html#填充和描边" class="sidebar-link">填充和描边</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/动画与Canvas图形.html#绘制矩形" class="sidebar-link">绘制矩形</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/动画与Canvas图形.html#绘制路径" class="sidebar-link">绘制路径</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/动画与Canvas图形.html#绘制文本" class="sidebar-link">绘制文本</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/动画与Canvas图形.html#变换" class="sidebar-link">变换</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/动画与Canvas图形.html#绘制对象" class="sidebar-link">绘制对象</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/动画与Canvas图形.html#阴影" class="sidebar-link">阴影</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/动画与Canvas图形.html#渐变" class="sidebar-link">渐变</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/动画与Canvas图形.html#图案" class="sidebar-link">图案</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/动画与Canvas图形.html#图像数据" class="sidebar-link">图像数据</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/动画与Canvas图形.html#合成" class="sidebar-link">合成</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/动画与Canvas图形.html#webgl" class="sidebar-link">WebGL</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/动画与Canvas图形.html#webgl-基础" class="sidebar-link">webgl 基础</a></li></ul></li></ul></li><li><a href="/note/js-gc/客户端存储.html" class="sidebar-link">客户端存储</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/客户端存储.html#cookie" class="sidebar-link">cookie</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/客户端存储.html#限制" class="sidebar-link">限制</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/客户端存储.html#cookie-的构成" class="sidebar-link">cookie 的构成</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/客户端存储.html#javascript-中的-cookie" class="sidebar-link">JavaScript 中的 cookie</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/客户端存储.html#子-cookie" class="sidebar-link">子 cookie</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/客户端存储.html#使用-cookie-的注意事项" class="sidebar-link">使用 cookie 的注意事项</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/客户端存储.html#web-storage" class="sidebar-link">Web Storage</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/客户端存储.html#storage-类型" class="sidebar-link">Storage 类型</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/客户端存储.html#sessionstorage-对象" class="sidebar-link">sessionStorage 对象</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/客户端存储.html#localstorage-对象" class="sidebar-link">localStorage 对象</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/客户端存储.html#存储事件" class="sidebar-link">存储事件</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/客户端存储.html#限制-2" class="sidebar-link">限制</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/客户端存储.html#indexeddb" class="sidebar-link">IndexedDB</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/客户端存储.html#数据库" class="sidebar-link">数据库</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/客户端存储.html#对象存储" class="sidebar-link">对象存储</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/客户端存储.html#事务" class="sidebar-link">事务</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/客户端存储.html#插入对象" class="sidebar-link">插入对象</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/客户端存储.html#通过游标查询" class="sidebar-link">通过游标查询</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/客户端存储.html#键范围" class="sidebar-link">键范围</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/客户端存储.html#设置游标方向" class="sidebar-link">设置游标方向</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/客户端存储.html#索引" class="sidebar-link">索引</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/客户端存储.html#限制-3" class="sidebar-link">限制</a></li></ul></li></ul></li><li><a href="/note/js-gc/模块.html" class="sidebar-link">模块</a></li><li><a href="/note/js-gc/工作者线程.html" class="sidebar-link">工作者线程</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/工作者线程.html#工作者线程简介" class="sidebar-link">工作者线程简介</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/工作者线程.html#工作者线程与线程" class="sidebar-link">工作者线程与线程</a></li></ul></li></ul></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="window-对象"><a href="#window-对象" class="header-anchor">#</a> window 对象</h2> <h3 id="全局作用域"><a href="#全局作用域" class="header-anchor">#</a> 全局作用域</h3> <p>window 对象是 ECMAScript 中 Global 对象。因此所有全局作用域中声明的变量、函数都会变为 window 对象的属性和方法；</p> <p>抛开全局变量会成为 window 对象的属性不谈，定义全局变量与在 window 对象上直接定义属性还是有一点差别：全局变量不能通过 delete 操作符删除，而直接在 window 对象上定义的属性可以。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> age <span class="token operator">=</span> <span class="token number">18</span>
window<span class="token punctuation">.</span>color <span class="token operator">=</span> <span class="token string">'red'</span>
<span class="token comment">// 在 IE9 < 9 时抛出错误，在其他浏览器中都返回 false</span>
<span class="token keyword">delete</span> window<span class="token punctuation">.</span>age
<span class="token comment">// 在 IE9 < 9 时抛出错误，在其他浏览器中都返回 true</span>
<span class="token keyword">delete</span> window<span class="token punctuation">.</span>color
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>window<span class="token punctuation">.</span>age<span class="token punctuation">)</span> <span class="token comment">// 18</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>window<span class="token punctuation">.</span>color<span class="token punctuation">)</span> <span class="token comment">// undefined</span>
</code></pre></div><p>访问未声明的变量会抛出错误，但是通过查询 window 对象，可以知道某个可能未声明的变量是否存在。</p> <h3 id="窗口关系及框架"><a href="#窗口关系及框架" class="header-anchor">#</a> 窗口关系及框架</h3> <p>如果页面中包含框架，则每个框架都拥有自己的 window 对象，并且保存在 frames 集合中，可以通过数值索引（从 0 开始，从左至右，从上至下）或者框架名称来访问相应的 window 对象。每个 window 对象都有一个 name 属性，其中包含框架的名称，如下面代码：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Frame Example<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>frameset</span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>160, *<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>frame</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>frame.html<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>topFrame<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>frame</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>frameset</span> <span class="token attr-name">cols</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50%, 50%<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>frame</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>anotherframe.html<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>leftFrame<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>frame</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>frame</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>yetanotherframe.html<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rightFrame<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>frame</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>frameset</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>frameset</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
</code></pre></div><p>对于这个例子，可以通过 window.frames[0] 或者 window.frames['topFrame'] 来获取上方的框架，可以使用 top 而非 window 来引用这些框架：top.frames[0]</p> <p>top 对象始终指向最高（最外）层的框架，也就是浏览器的窗口；使用它可以确保在一个框架中正确地访问另一个框架，因为对于在一个框架中编写的任何代码来说，其中的 window 对象指向的都是那个框架的特定实例，而非最高层的框架。下图是不同框架中，访问自身的不同方式：</p> <p><img src="/note/assets/img/frames.f1ef61b9.png" alt="在这里插入图片描述"></p> <p>与 top 相对的另一个 window 对象是 parent，顾名思义，parent 对象始终指向当前框架的直接上层框架，在没有框架的情况下，parent 一定等于 top，也就是都等于 window 对象。</p> <p>与框架有关的最后一个对象是 self，他始终指向 window，实际上 self 和 window 对象可以互换使用。引入 self 对象的目的是为了与 top 和 parent 对象对应起来，因此他不额外包含其他值。</p> <h3 id="窗口位置"><a href="#窗口位置" class="header-anchor">#</a> 窗口位置</h3> <p>screenLeft 和 screenTop 属性，分别用于表示窗口相对于屏幕左边以及上边的位置。使用下列代码可以跨浏览器取得窗口左边和上边的位置：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> leftPos <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> window<span class="token punctuation">.</span>screenLeft <span class="token operator">===</span> <span class="token string">'number'</span><span class="token punctuation">)</span> <span class="token operator">?</span> window<span class="token punctuation">.</span>screenLeft <span class="token operator">:</span> window<span class="token punctuation">.</span>screenX
<span class="token keyword">var</span> topPos <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> window<span class="token punctuation">.</span>screenTop <span class="token operator">===</span> <span class="token string">'number'</span><span class="token punctuation">)</span> <span class="token operator">?</span> window<span class="token punctuation">.</span>screenTop <span class="token operator">:</span> window<span class="token punctuation">.</span>screenY
</code></pre></div><p>需要注意的是：在 IE、Opera 中，screenLeft 和 screenTop 中保存的是从屏幕左边和上边到由 window 对象表示的页面可见区域的距离。换句话说，如果 window 对象是最外层对象，而且浏览器窗口紧贴屏幕最上端，也就是 y 轴坐标为 0，那么 screenTop 的值就是位于页面可见区域上方的浏览器工具栏的像素高度。但是在 Chrome、Firefox 中，screenY 或 screenTop 中保存的是整个浏览器窗口相对于屏幕的坐标值，即 0 ；</p> <p>使用 moveTo() 和 moveBy() 方法游客可能将窗口精确地移动到一个新的位置。这两个方法都接收两个参数：</p> <p>moveTo() 方法接收的新位置的 x 和 y 坐标值；
moveBy() 方法接收的是在水平和垂直方向上移动的像素值。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 将窗口移动到屏幕左上角</span>
window<span class="token punctuation">.</span><span class="token function">moveTo</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span>
<span class="token comment">// 将窗口向下移动 100 像素</span>
window<span class="token punctuation">.</span><span class="token function">moveBy</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span>
<span class="token comment">// 将窗口移动到 200，300</span>
window<span class="token punctuation">.</span><span class="token function">moveTo</span><span class="token punctuation">(</span><span class="token number">200</span><span class="token punctuation">,</span> <span class="token number">300</span><span class="token punctuation">)</span>
<span class="token comment">// 将窗口向左移动 50 像素</span>
window<span class="token punctuation">.</span><span class="token function">moveBy</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">50</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span>
</code></pre></div><p>需要注意的是，这链各个方法可能会被浏览器禁用，而且，在 Opera 和 IE 7（及更高的版本）中默认就是禁用的。另外，这链各个方法都不适用与框架，只能对最外层的 window 对象使用。</p> <p>如果符合下列情况，则普通网页中的 JavaScript 无法通过调用该函数来移动浏览器窗口</p> <ul><li>当前窗口或标签页不是由window.open方法创建的</li> <li>当前标签页所在的窗口包含有多个标签页</li></ul> <h3 id="窗口大小"><a href="#窗口大小" class="header-anchor">#</a> 窗口大小</h3> <ul><li>IE9+、Safari 和 Firefox：outerWidth 和 outerHeight 返回浏览器窗口本身的尺寸（无论从最外层的 window 对象还是从某个框架访问）；</li> <li>Opera：outerWidth 和 outerHeight 表示页面视图容器的大小，也就是单个标签页对应的浏览器窗口；</li> <li>Chrome：outerWidth 和 outerHeight 与 innerWidth 和 innerHeight 返回相同的值，即视口大小而非浏览器窗口大小；</li></ul> <p>获取页面视口的大小，如下代码：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> pageWidth <span class="token operator">=</span> window<span class="token punctuation">.</span>innerWidth
<span class="token keyword">var</span> pageHeight <span class="token operator">=</span> window<span class="token punctuation">.</span>innerHeight
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> pageWidth <span class="token operator">!=</span> <span class="token string">'number'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 确定页面是否处于标准模式</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>document<span class="token punctuation">.</span>compatMode <span class="token operator">==</span> <span class="token string">'CSS1Compat'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
pageWidth <span class="token operator">=</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>clientWidth
pageHeight <span class="token operator">=</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>clientHeight
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
pageWidth <span class="token operator">=</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>clientWidth
pageHeight <span class="token operator">=</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>clientHeight
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>使用 resizeTo() 和 resizeBy() 方法可以调整浏览器窗口的大小，都接收两个参数：</p> <ul><li>resizeTo() 接收浏览器窗口的新高度和新宽度</li> <li>resizeBy() 接收新窗口与原窗口的宽度和高度之差</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 调整到 100 * 100</span>
window<span class="token punctuation">.</span><span class="token function">resizeTo</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span>
<span class="token comment">// 调整到 200 * 150</span>
window<span class="token punctuation">.</span><span class="token function">resizeBy</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">50</span><span class="token punctuation">)</span>
<span class="token comment">// 调整到 300 * 300</span>
window<span class="token punctuation">.</span><span class="token function">resizeTo</span><span class="token punctuation">(</span><span class="token number">300</span><span class="token punctuation">,</span> <span class="token number">300</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="导航和打开窗口"><a href="#导航和打开窗口" class="header-anchor">#</a> 导航和打开窗口</h3> <p>使用 window.open 既可以导航到一个特定的 URL，也可以打开一个新的浏览器窗口，他接收 4 个参数：</p> <ol><li>要加载的URL；</li> <li>窗口目标；</li> <li>一个特性字符串；</li> <li>一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值；</li></ol> <p>最后一个参数只在不打开新窗口的情况下使用；</p> <p>如果为 window.open() 传递了第二个参数，而且该参数是已有窗口或框架的名称，那么就会在具有该名称的窗口或框架中加载第一个参数指定 URL:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 等同于 <a href="http://jiegiser.github.io/note" target="topFrame"></a></span>
window<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">"http://jiegiser.github.io/note"</span><span class="token punctuation">,</span> <span class="token string">"topFrame"</span><span class="token punctuation">)</span>
</code></pre></div><p>调用上面的代码就相当于用户点击了那个 a 标签，如果有一个名叫 toFrame 的窗口或者框架，就会在该窗口或框架加载这个 URL，否则就会创建一个新的窗口并将其命名为 topFrame。</p> <h4 id="弹出窗口"><a href="#弹出窗口" class="header-anchor">#</a> 弹出窗口</h4> <p>如果给 window.open() 传递的第二个参数并不是一个已经存在的窗口或框架，那么该方法就会根据在第三个参数位置上传人的字符串创建一个新窗口或新标签页。如果没有传入第三个参数,那么就会打开一个带有全部默认设置(工具栏、地址栏和状态栏等)的新浏览器窗口(或者打开一个新标签页--根据浏览器设置)在不打开新窗口的情况下，会忽略第三个参数。
第三个参数是一个逗号分隔的设置字符串，表示在新窗口中都显示哪些特性。下表列出了可以出现这个字符串中的设置选项：</p> <table><thead><tr><th>设置</th> <th>值</th> <th>说 明</th></tr></thead> <tbody><tr><td>fullscreen</td> <td>yes 或 no</td> <td>表示浏览器窗口是否最大化。仅限 IE</td></tr> <tr><td>height</td> <td>数值</td> <td>表示新窗口的高度。不能小于 100</td></tr> <tr><td>left</td> <td>数值</td> <td>表示新窗口的左坐标。不能是负值数值</td></tr> <tr><td>location</td> <td>yes 或 no</td> <td>表示是否在浏览器窗口中显示地址栏。不同浏览器的默认值不同。如果设置为 no,地址栏可能会隐藏,也可能会被禁用(取决于浏览器)</td></tr> <tr><td>menubar</td> <td>yes 或 no</td> <td>表示是否在浏览器窗口中显示菜单栏。默认值为 no</td></tr> <tr><td>resizable</td> <td>yes 或 no</td> <td>表示是否可以通过拖动浏览器窗口的边框改变其大小。默认值为 no</td></tr> <tr><td>status</td> <td>yes 或 no</td> <td>表示是否在浏览器窗口中显示状态栏。默认值为 no</td></tr> <tr><td>toolbar</td> <td>yes 或 no</td> <td>表示是否在浏览器窗口中显示工具栏。默认值为 no</td></tr> <tr><td>top</td> <td>yes 或 no</td> <td>表示新窗口的上坐标。不能是负值</td></tr> <tr><td>width</td> <td>yes 或 no</td> <td>表示新窗口的宽度。不能小于 100</td></tr></tbody></table> <p>上面的属性都可以通过键值对形式的字符串来指定，其中键值对中不能出现空格：</p> <div class="language-js extra-class"><pre class="language-js"><code>window<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">'jiegiser.github.io/note'</span><span class="token punctuation">,</span> <span class="token string">'note'</span><span class="token punctuation">,</span> <span class="token string">'height=400,widht=400,top=10,left=10,resizable=yes'</span><span class="token punctuation">)</span>
</code></pre></div><p>window.open() 方法会返回一个指向新窗口的引用。引用的对象与其他 window 对象大致相似，但我们可以对其进行更多控制。例如，有些浏览器在默认情況下可能不允许我们针对主浏览器窗口调整大小或移动位置，但却允许我们针对通过 window.open() 创建的窗口调整大小或移动位置。通过这个返回的对象，可以像操作其他窗口一样操作新打开的窗口，如下所示。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> note <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">'jiegiser.github.io/note'</span><span class="token punctuation">,</span> <span class="token string">'note'</span><span class="token punctuation">,</span> <span class="token string">'height=400,widht=400,top=10,left=10,resizable=yes'</span><span class="token punctuation">)</span>
<span class="token comment">// 调整大小</span>
note<span class="token punctuation">.</span><span class="token function">resizeTo</span><span class="token punctuation">(</span><span class="token number">500</span><span class="token punctuation">,</span> <span class="token number">500</span><span class="token punctuation">)</span>
<span class="token comment">// 移动位置</span>
note<span class="token punctuation">.</span><span class="token function">moveTo</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span>
</code></pre></div><p>使用 close() 方法还可以关闭新打开的窗口</p> <div class="language-js extra-class"><pre class="language-js"><code>note<span class="token punctuation">.</span><span class="token function">close</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div><p>这个方法仅适用于 window.open() 打开的弹出窗口，对于浏览器的主窗口，如果没有得到用户的允许是不能关闭它的。不过，弹出窗口倒是可以通过调用 top.close() 在不经过用户允许的情况下关闭自己。弹出窗口关闭之后，窗口的引用仍然还在，但除了像下面检测其 closed 属性之外，已经没有其他用处了：</p> <div class="language-js extra-class"><pre class="language-js"><code>note<span class="token punctuation">.</span><span class="token function">close</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>note<span class="token punctuation">.</span>closed<span class="token punctuation">)</span> <span class="token comment">// true</span>
</code></pre></div><p>新创建的窗口中有一个指针指向打开它的原始窗口对象，这个属性只在弹出窗口中的最外层 window 对象 (top) 中有定义，而且指向调用 window.open() 的窗口或框架：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> note <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">'jiegiser.github.io/note'</span><span class="token punctuation">,</span> <span class="token string">'note'</span><span class="token punctuation">,</span> <span class="token string">'height=400,widht=400,top=10,left=10,resizable=yes'</span><span class="token punctuation">)</span>
note<span class="token punctuation">.</span>opener <span class="token operator">===</span> window <span class="token comment">// true</span>
</code></pre></div><p>有些浏览器（如 IE8 和 Chrome）会在独立的的进程中运行每个标签页。当一个标签页打开另一个标签页时，如果两个 window 对象之间需要彼此通信，那么新标签页就不能运行在独立的进程中，在 chrome 中，将新创建的标签页的 opener 属性设置为 null，即表示在单独的进程中运行新标签页，如下代码：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> note <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">'jiegiser.github.io/note'</span><span class="token punctuation">,</span> <span class="token string">'note'</span><span class="token punctuation">,</span> <span class="token string">'height=400,widht=400,top=10,left=10,resizable=yes'</span><span class="token punctuation">)</span>
note<span class="token punctuation">.</span>opener <span class="token operator">=</span> <span class="token keyword">null</span>
</code></pre></div><p>将 opener 属性设置为 null 就是告诉浏览器新创建的标签页不需要与打开它的标签页通信，因此可以在独立的进程中运行。标签页之间的联系一旦断开，将没有办法恢复。</p> <h4 id="弹出窗口屏蔽程序"><a href="#弹出窗口屏蔽程序" class="header-anchor">#</a> 弹出窗口屏蔽程序</h4> <p>在弹窗窗口被屏蔽时，就应该考虑两种可能性。如果浏览器内置的屏蔽程序阻止的弹出窗口，那么 window.open() 很可能会返回 null，此时，只要检测这个返回的值就可以确定窗口是否被屏蔽了，如下代码：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> note <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">'jiegiser.github.io/note'</span><span class="token punctuation">,</span> <span class="token string">'_blank'</span><span class="token punctuation">)</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>note <span class="token operator">===</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'the popup was blocked!'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><p>如果是浏览器扩展或其他程序阻止的弹出窗口，那么 window.open() 通常会抛出一个错误，因此，想要准确地检测出弹出窗口是否被屏蔽，必须在检测返回值的同时，将对 window.open() 的调用封装在一个 try catch 块中，如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> blocked <span class="token operator">=</span> <span class="token boolean">false</span>
<span class="token keyword">try</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> note <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">'jiegiser.github.io/note'</span><span class="token punctuation">,</span> <span class="token string">'_blank'</span><span class="token punctuation">)</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>note <span class="token operator">===</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
blocked <span class="token operator">=</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span> <span class="token keyword">catch</span><span class="token punctuation">(</span>ex<span class="token punctuation">)</span> <span class="token punctuation">{</span>
blocked <span class="token operator">=</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>blocked<span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'the popup was blocked!'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><p>需要注意的是检测弹出窗口是否屏蔽只是一方面，他并不会阻止浏览器显示与被屏蔽的弹出窗口有关的消息。</p> <h3 id="settimeout-setinterval"><a href="#settimeout-setinterval" class="header-anchor">#</a> setTimeout/setInterval</h3> <p>setTimeout 的第二个参数是一个表示等待多长时间的毫秒数，但经过该时间后指定的代码怒一定会执行，JavaScript 是一个单线程的解释器，因此一定时间内只能执行一段代码。为了控制要执行的代码，就会有一个 JavaScript 任务队列。这些任务会按照将他们添加到队列的顺序执行。setTimeout() 的第二个参数告诉 JavaScript 再过多长时间把当前任务添加到队列中。如果队列是空的，那么添加的代码会立即执行；如果队列不为空，那么他就要等前面的代码执行完了以后再执行。</p> <blockquote><p>setTimeout 调用的代码都是在全局作用域中执行的，因此函数中 this 的值在非严格模式下指向 window 对象，在严格模式下是 undefined。</p></blockquote> <h3 id="系统对话框"><a href="#系统对话框" class="header-anchor">#</a> 系统对话框</h3> <p>浏览器通过 alert()、confirm() 和 prompt() 方法可以调用系统对话框向用户显示消息。显示这些对话框的时候代码会停止执行，而关掉这些对话框后代码又会恢复执行。</p> <p>对于 confirm() 可以检查他的一个返回的布尔值，true 代表点击了 ok，false 表示点击了取消或者点击了关闭按钮，确认对话框的典型用法如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">if</span><span class="token punctuation">(</span><span class="token function">confirm</span><span class="token punctuation">(</span><span class="token string">'Are you sure?'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Yes'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'No'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><p>对于 prompt()，提示框中除了显示确定以及取消按钮以外，还会显示一个文本输入域，以供用户在其中输入内容。他接受两个参数：要现实给用户的文本提示和文本输入域的默认值（可以是一个空字符串）；点击确定会返回文本域中的值，如果点击了取消或者没有点击确定而是通过其他方式关闭了对话框，则方法返回 null：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> result <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token function">prompt</span><span class="token punctuation">(</span><span class="token string">'what are your name?'</span><span class="token punctuation">,</span> <span class="token string">''</span><span class="token punctuation">)</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>result <span class="token operator">!==</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'welcome,'</span> <span class="token operator">+</span> result<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><p>还有两个可以通过 JavaScript 打开的对话框：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 显示 打印 对话框</span>
window<span class="token punctuation">.</span><span class="token function">print</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token comment">// 显示 查找 对话框</span>
window<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="location-对象"><a href="#location-对象" class="header-anchor">#</a> location 对象</h2> <p>location 对象既是 window 对象的属性，也是 document 对象的属性。换句话说， window.location 和 document.location 引用的是同一个对象。</p> <table><thead><tr><th>属性名</th> <th>例子</th> <th>说 明</th></tr></thead> <tbody><tr><td>hash</td> <td>'#contents'</td> <td>返回 URL 中的 hash(# 号后跟零或多个字符)，如果 URL 中不包含散列,则返回空字符串</td></tr> <tr><td>host</td> <td>'www.wrox.com:80'</td> <td>返回服务器名称和端口号(如果有)</td></tr> <tr><td>hostname</td> <td>'www.wrox.com'</td> <td>返回不带端口号的服务器名称</td></tr> <tr><td>href</td> <td>'http://www.wrox.com'</td> <td>返回当前加载页面的完整 URL。而 location 对象的 tostring() 方法也返回这个值</td></tr> <tr><td>pathname</td> <td>'WileyCDA'</td> <td>返回URL中的目录和(或)文件名</td></tr> <tr><td>port</td> <td>'8080'</td> <td>返回 URL 中指定的端口号。如果 URL 中不包含端口号，则这个属性返回空字符串</td></tr> <tr><td>protocol</td> <td>'http:'</td> <td>返回页面使用的协议。通常是 http: 或 https:</td></tr> <tr><td>search</td> <td>'?q=javascript'</td> <td>返回 URL 的査询字符串。这个字符串以问号开头</td></tr></tbody></table> <h3 id="查询字符串参数"><a href="#查询字符串参数" class="header-anchor">#</a> 查询字符串参数</h3> <p>下面代码是解析查询字符串，然后返回包含所有参数的对象：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">getQueryStringArgs</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 取得查询字符串并去掉开头的问号</span>
<span class="token keyword">var</span> qs <span class="token operator">=</span> <span class="token punctuation">(</span>location<span class="token punctuation">.</span>search<span class="token punctuation">.</span>length <span class="token operator">></span> <span class="token number">0</span> <span class="token operator">?</span> location<span class="token punctuation">.</span>search<span class="token punctuation">.</span><span class="token function">substring</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">)</span>
<span class="token comment">// 保存数据的对象</span>
args <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token comment">// 取得每一项</span>
items <span class="token operator">=</span> qs<span class="token punctuation">.</span>length <span class="token operator">?</span> qs<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">'&'</span><span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
item <span class="token operator">=</span> <span class="token keyword">null</span>
name <span class="token operator">=</span> <span class="token keyword">null</span>
value <span class="token operator">=</span> <span class="token string">''</span>
<span class="token comment">// 在 for 循环中使用</span>
i <span class="token operator">=</span> <span class="token number">0</span>
len <span class="token operator">=</span> items<span class="token punctuation">.</span>length
<span class="token comment">// 逐个将每一项添加到 args 中</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span>i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> len<span class="token punctuation">;</span> i <span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
item <span class="token operator">=</span> items<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">'='</span><span class="token punctuation">)</span>
name <span class="token operator">=</span> <span class="token function">decodeURIComponent</span><span class="token punctuation">(</span>item<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
value <span class="token operator">=</span> <span class="token function">decodeURIComponent</span><span class="token punctuation">(</span>item<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>name<span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token punctuation">{</span>
args<span class="token punctuation">[</span>name<span class="token punctuation">]</span> <span class="token operator">=</span> value
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> args
<span class="token punctuation">}</span>
</code></pre></div><h3 id="位置操作"><a href="#位置操作" class="header-anchor">#</a> 位置操作</h3> <p>使用 assign() 方法，改变浏览器的位置；需要传递一个 URL 参数：</p> <div class="language-js extra-class"><pre class="language-js"><code>location<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token string">'https://github.com/jiegiser'</span><span class="token punctuation">)</span>
</code></pre></div><p>如果是将 location.href 或 window.location 设置为一个 URL 值，也会以该值调用 assign() 方法。下面两行代码与显示调用 assign() 方法的效果一致：</p> <div class="language-js extra-class"><pre class="language-js"><code>window<span class="token punctuation">.</span>location <span class="token operator">=</span> <span class="token string">'https://github.com/jiegiser'</span>
location<span class="token punctuation">.</span>href <span class="token operator">=</span> <span class="token string">'https://github.com/jiegiser'</span>
</code></pre></div><p>另外修改 location 对象的其他属性也可以改变当前加载的页面。如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 假设初始 URL 为 http://www.wrox.com/WileyCDA/</span>
<span class="token comment">// 将 URL 修改为 http://www.wrox.com/WileyCDA/#section1</span>
location<span class="token punctuation">.</span>hash <span class="token operator">=</span> <span class="token string">'#section1'</span>
<span class="token comment">// 将 URL 修改为 http://www.wrox.com/WileyCDA/?q=javascript</span>
location<span class="token punctuation">.</span>search <span class="token operator">=</span> <span class="token string">'?q=javascript'</span>
<span class="token comment">// 将 URL 修改为 http://www.yahoo.com/WileyCDA/</span>
location<span class="token punctuation">.</span>hostname <span class="token operator">=</span> <span class="token string">'www.yahoo.com'</span>
<span class="token comment">// 将 URL 修改为 http://www.yahoo.com/mydir/</span>
location<span class="token punctuation">.</span>pathname <span class="token operator">=</span> <span class="token string">'mydir'</span>
<span class="token comment">// 将 URL 修改为 http://www.yahoo.com:8080/WileyCDA/</span>
location<span class="token punctuation">.</span>port <span class="token operator">=</span> <span class="token number">8080</span>
</code></pre></div><p>每次修改 location 的属性（hash 除外），页面都会以新 URL 重新加载。</p> <p>通过上面修改 URL 之后，是可以通过点击浏览器的后退按钮回退，使用 replace() 方法，不会再浏览器的历史记录生成新的记录；他会替换当前浏览记录。这个方法就收一个参数，就是要导航到的 URL：</p> <div class="language-js extra-class"><pre class="language-js"><code>location<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token string">'https://jiegiser.github.io/note'</span><span class="token punctuation">)</span>
</code></pre></div><p>页面重新加载 reload() 方法。作用就是重新加载当前显示的页面。如果没有传递任何参数，并且页面自上次请求并没有改变过，页面就会从浏览器缓存中重新加载。如果需要强制从服务器重新加载，则需要穿第一个参数 true ：</p> <div class="language-js extra-class"><pre class="language-js"><code>location<span class="token punctuation">.</span><span class="token function">reload</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 重新加载（有可能从缓存中加载）</span>
location<span class="token punctuation">.</span><span class="token function">reload</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span> <span class="token comment">// 重新加载（从服务器重新加载）</span>
</code></pre></div><h2 id="nagigator-对象"><a href="#nagigator-对象" class="header-anchor">#</a> nagigator 对象</h2> <h3 id="检查插件"><a href="#检查插件" class="header-anchor">#</a> 检查插件</h3> <p>检查浏览器是否安装了特定的插件，使用 plugins 数组来获取，数组中的每一项都会包含下列属性：</p> <ul><li>name: 插件的名字</li> <li>description: 插件的描述</li> <li>filename：插件的文件名</li> <li>length：插件所处理的 MIME 类型数量</li></ul> <p>下面代码是检测插件是否存在：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 检测插件（在 IE 中无效）</span>
<span class="token keyword">function</span> <span class="token function">hasPlugins</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
name <span class="token operator">=</span> name<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> nagigator<span class="token punctuation">.</span>plugins<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i <span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>nagigator<span class="token punctuation">.</span>plugins<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>name<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span> <span class="token operator">></span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span>
<span class="token comment">// 检测 Flash</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Flash'</span><span class="token punctuation">)</span>
<span class="token comment">// 检测 QuickTime</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'QuickTime'</span><span class="token punctuation">)</span>
</code></pre></div><p>在 IE 浏览器中可以使用 ActiveXObject 类型，并尝试创建一个特定插件的实例，IE 中的插件是以 COM 对象的方式实现插件的，每个 COM 对象都有一个唯一标识，可以入戏代码进行检查：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 检测 IE 中的插件</span>
<span class="token keyword">function</span> <span class="token function">hasIEPlugins</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">try</span> <span class="token punctuation">{</span>
<span class="token keyword">new</span> <span class="token class-name">ActiveXObject</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span>
<span class="token keyword">return</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span> <span class="token keyword">catch</span><span class="token punctuation">(</span>ex<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="history-对象"><a href="#history-对象" class="header-anchor">#</a> history 对象</h2> <p>使用 go() 方法可有在用户的历史记录中任意跳转。可以向后也可以向前跳转。该方法接收一个参数，一个正数或者负数的页面数（整数值）：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 后退一页</span>
history<span class="token punctuation">.</span><span class="token function">go</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span>
<span class="token comment">// 前进一页</span>
history<span class="token punctuation">.</span><span class="token function">go</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
<span class="token comment">// 前进两页</span>
history<span class="token punctuation">.</span><span class="token function">go</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span>
</code></pre></div><p>也可以给 go() 方法传递一个字符串参数，此时浏览器会跳转到历史记录中包含该字符串的第一个位置，可能后退，也可能前进。具体看哪个位置最近。如果历史记录中不包含该字符串，那么这个方法什么也不做：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 跳转到最近的 wrox.com 页面</span>
history<span class="token punctuation">.</span><span class="token function">go</span><span class="token punctuation">(</span><span class="token string">'wrox.com'</span><span class="token punctuation">)</span>
<span class="token comment">// 跳转到最近的 nczonline.net 页面</span>
history<span class="token punctuation">.</span><span class="token function">go</span><span class="token punctuation">(</span><span class="token string">'nczonline.net'</span><span class="token punctuation">)</span>
</code></pre></div><p>另外还有两个简写方法 back() 和 forward() 来代替 go()，这两个方法就是后退和前进。</p> <p>history 还有一个 length 属性，保存着历史记录的数量，如果是一个新的页面，那么这个属性为 0：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span>history<span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 这应该是用户打开窗口后的第一个页面</span>
<span class="token punctuation">}</span>
</code></pre></div><section style="border-top:2px solid #eaecef;padding-top:1rem;margin-top:2rem;"><div><span data-flag-title="Your Article Title" class="leancloud-visitors"><em class="post-meta-item-text">阅读量： </em> <i class="leancloud-visitors-count"></i></span></div> <h3><a href="javascript:;"></a>
评 论：
</h3> <div id="vcomments"></div></section></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">更新:</span> <span class="time">12/27/2020, 4:59:16 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/note/js-gc/promise与异步函数.html" class="prev">
promise与异步函数
</a></span> <span class="next"><a href="/note/js-gc/DOM.html">
DOM
</a>
→
</span></p></div> </main></div><div class="global-ui"><!----></div></div>
<script src="/note/assets/js/app.e947756a.js" defer></script><script src="/note/assets/js/3.90278144.js" defer></script><script src="/note/assets/js/57.cb986845.js" defer></script><script src="/note/assets/js/75.886b64ff.js" defer></script>
</body>
</html>