-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
506 lines (323 loc) · 33 KB
/
Copy pathindex.html
File metadata and controls
506 lines (323 loc) · 33 KB
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
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>乐博</title>
<meta name="author" content="乐海">
<meta name="description" content="前端 滑雪">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta property="og:site_name" content="乐博"/>
<meta property="og:image" content="undefined"/>
<link href="/favicon.png" rel="icon">
<link rel="alternate" href="/atom.xml" title="乐博" type="application/atom+xml">
<link rel="stylesheet" href="/css/style.css" media="screen" type="text/css">
<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<header id="header" class="inner"><div class="alignleft">
<h1><a href="/">乐博</a></h1>
<h2><a href="/"></a></h2>
</div>
<nav id="main-nav" class="alignright">
<ul>
<li><a href="/">首页</a></li>
<li><a href="/archives">归档</a></li>
<li><a href="/sports">运动</a></li>
<li><a href="/about">关于</a></li>
</ul>
<div class="clearfix"></div>
</nav>
<div class="clearfix"></div></header>
<div id="content" class="inner">
<div id="main-col" class="alignleft"><div id="wrapper">
<article class="post">
<div class="post-content">
<header>
<div class="icon"></div>
<time datetime="2015-01-03T04:51:06.000Z"><a href="/2015/01/03/string/">1月 3 2015</a></time>
<h1 class="title"><a href="/2015/01/03/string/">字符串操作</a></h1>
</header>
<div class="entry">
<h1 id="字符串操作有哪些方法，分别返回什么">字符串操作有哪些方法，分别返回什么</h1>
<h2 id="截取字符_substring_substr_slice">截取字符 substring substr slice</h2>
<h3 id="substring_截取并返回指定起始位置和结束位置的子字符串">substring 截取并返回指定起始位置和结束位置的子字符串</h3>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> a = <span class="string">"hello world"</span>;</div><div class="line"><span class="keyword">var</span> b = a.substring(<span class="number">0</span>,<span class="number">5</span>);<span class="comment">// b为hello</span></div></pre></td></tr></table></figure>
<h3 id="substr_截取并返回指定起始位置和截取长度的子字符串">substr 截取并返回指定起始位置和截取长度的子字符串</h3>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> a = <span class="string">"hello world"</span>;</div><div class="line"><span class="keyword">var</span> b = a.substring(<span class="number">6</span>,<span class="number">5</span>);<span class="comment">// b为world</span></div></pre></td></tr></table></figure>
<h3 id="slice_功能同substring">slice 功能同substring</h3>
<h2 id="分割字符_split">分割字符 split</h2>
<h3 id="split_通过指定分隔符对字符串进行分割，返回分割后子串的数组">split 通过指定分隔符对字符串进行分割，返回分割后子串的数组</h3>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> a = <span class="string">"hello world"</span>;</div><div class="line"><span class="keyword">var</span> b = a.<span class="built_in">split</span>(<span class="string">" "</span>);<span class="comment">// b为["hello","world"]</span></div></pre></td></tr></table></figure>
<h2 id="合并字符_concat">合并字符 concat</h2>
<h3 id="concat_方法用于连接两个或多个字符串">concat 方法用于连接两个或多个字符串</h3>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> a = <span class="string">"hello"</span>;</div><div class="line"><span class="keyword">var</span> b = a.concat(<span class="string">" "</span>,<span class="string">"world "</span>,<span class="string">"jdh"</span>);<span class="comment">// b为"hello world jdh"</span></div><div class="line"><span class="comment">//a字符串没有被改变</span></div></pre></td></tr></table></figure>
<h2 id="替换字符_replace">替换字符 replace</h2>
<h3 id="replace_用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。">replace 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。</h3>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">var str=<span class="string">"Welcome to Microsoft! "</span>;</div><div class="line">str.replace(<span class="regexp">/Microsoft/g</span>, <span class="string">"jdh"</span>); <span class="regexp">//</span><span class="string">"Welcome to jdh! "</span></div></pre></td></tr></table></figure>
<h2 id="转换大小写_toLowerCase_toUpperCase">转换大小写 toLowerCase toUpperCase</h2>
<h3 id="toLowerCae_把字符串转换成小写。">toLowerCae 把字符串转换成小写。</h3>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">var <span class="keyword">str</span>=<span class="string">"Welcome to Microsoft! "</span>;</div><div class="line"><span class="keyword">str</span>.toLowerCae (); <span class="comment">//"welcome to microsoft!"</span></div></pre></td></tr></table></figure>
<h3 id="toUpperCae_把字符串转换成小写。">toUpperCae 把字符串转换成小写。</h3>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">var <span class="keyword">str</span>=<span class="string">"Welcome to Microsoft! "</span>;</div><div class="line"><span class="keyword">str</span>.toUpperCae(); <span class="comment">//"WELCOME TO MICROSOFT!"</span></div></pre></td></tr></table></figure>
<h2 id="查找字符串_indexOf_lastIndexOf_search_match_charAt">查找字符串 indexOf lastIndexOf search match charAt</h2>
<h3 id="indexOf_查找子串在目标字符串中出现的第一个位置，没有返回-1。可指定查找起始位置。">indexOf 查找子串在目标字符串中出现的第一个位置，没有返回-1。可指定查找起始位置。</h3>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">var <span class="keyword">str</span>=<span class="string">"Welcome to Microsoft! "</span>;</div><div class="line"><span class="keyword">str</span>.indexOf(<span class="string">"com"</span>,<span class="number">2</span>); <span class="comment">//3</span></div></pre></td></tr></table></figure>
<h3 id="lastIndexOf_查找子串在目标字符串中出现的最后一个位置，没有返回-1。">lastIndexOf 查找子串在目标字符串中出现的最后一个位置，没有返回-1。</h3>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">var <span class="keyword">str</span>=<span class="string">"Welcome to Microsoft! come on！ "</span>;</div><div class="line"><span class="keyword">str</span>.lastIndexOf(<span class="string">"com"</span>); <span class="comment">//22</span></div></pre></td></tr></table></figure>
<h3 id="search_查找子串在目标字符串中出现的第一一个位置，没有返回-1。功能与indexOf一致">search 查找子串在目标字符串中出现的第一一个位置，没有返回-1。功能与indexOf一致</h3>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">var <span class="keyword">str</span>=<span class="string">"Welcome to Microsoft! come on！ "</span>;</div><div class="line"><span class="keyword">str</span>.search(<span class="string">"com"</span>); <span class="comment">//3</span></div><div class="line"><span class="keyword">str</span>.search(/com/); <span class="comment">//3</span></div></pre></td></tr></table></figure>
<p>其与indexOf区别在于search能使用正则表达式，search只有一个参数</p>
<h3 id="match_方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。返回目标字符串数组，支持正则表达式进行全局匹配">match 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。返回目标字符串数组，支持正则表达式进行全局匹配</h3>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">var str=<span class="string">"Welcome to Microsoft! come on！ "</span>;</div><div class="line">str.<span class="built_in">match</span>(/<span class="keyword">com</span>/<span class="keyword">g</span>); //[<span class="string">"com"</span>,<span class="string">"com"</span>]</div></pre></td></tr></table></figure>
<h3 id="charAt_返回指定位置的字符。">charAt 返回指定位置的字符。</h3>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">var <span class="keyword">str</span>=<span class="string">"Welcome to Microsoft! come on！ "</span>;</div><div class="line"><span class="keyword">str</span>.charAt(<span class="number">3</span>); <span class="comment">//c</span></div></pre></td></tr></table></figure>
<h2 id="属性_length_返回I字符串长度">属性 length 返回I字符串长度</h2>
</div>
<footer>
<div class="clearfix"></div>
</footer>
</div>
</article>
<article class="post">
<div class="post-content">
<header>
<div class="icon"></div>
<time datetime="2015-01-03T04:46:26.000Z"><a href="/2015/01/03/oop/">1月 3 2015</a></time>
<h1 class="title"><a href="/2015/01/03/oop/">面向对象</a></h1>
</header>
<div class="entry">
<h1 id="如何理解面向对象，通过面向对象写一个例子">如何理解面向对象，通过面向对象写一个例子</h1>
<h2 id="概念：">概念：</h2>
<p>面向对象的语言有一个标志，就是他们都有类的概念，而通过类可以创建多个具有相同属性和方法的对象。js没有class的概念，每个对象都是基于一个引用类型（即对象）创建的。</p>
<h2 id="例子">例子</h2>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">Animal</span><span class="params">(name)</span></span>{</div><div class="line"> <span class="keyword">this</span>.name = name;</div><div class="line"> <span class="keyword">this</span>.type = <span class="string">"animal"</span>;</div><div class="line"> }</div><div class="line">Animal.prototype.say = <span class="function"><span class="keyword">function</span><span class="params">()</span></span>{</div><div class="line"> alert(<span class="string">"I'm a"</span> + <span class="keyword">this</span>.type+<span class="string">",my name is"</span>+<span class="keyword">this</span>.name);</div><div class="line"> }</div><div class="line"> <span class="keyword">var</span> myDog = <span class="keyword">new</span> Animal(<span class="string">"acai"</span>);</div><div class="line"> myDog.say();</div></pre></td></tr></table></figure>
<p>实例化的对象的属性和行为包括两部分：一部分来自构造函数，一部分来自原型；</p>
<p>通过myDog.prototype指向myDog的原型，原型可以通过constructor指向Animal类的构造函数。例如：</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">var <span class="variable">a =</span> myDog.prototype,</div><div class="line"> <span class="variable">b =</span> a.constructor;</div><div class="line">alert( <span class="variable">b =</span>= Animal) // <span class="constant">true</span></div></pre></td></tr></table></figure>
</div>
<footer>
<div class="clearfix"></div>
</footer>
</div>
</article>
<article class="post">
<div class="post-content">
<header>
<div class="icon"></div>
<time datetime="2015-01-03T04:38:06.000Z"><a href="/2015/01/03/call&apply/">1月 3 2015</a></time>
<h1 class="title"><a href="/2015/01/03/call&apply/">call&apply</a></h1>
</header>
<div class="entry">
<h1 id="call与apply">call与apply</h1>
<h2 id="区别">区别</h2>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">call( thisArg [，arg1，arg2，… ] ); // 参数列表，arg1，arg2，<span class="keyword">...</span></div><div class="line">apply(thisArg [，argArray] ); // 参数数组，argArray</div></pre></td></tr></table></figure>
<p>通俗说来，就是实现把目标函数作为另外一个对象的方法运行的目的，</p>
<ul>
<li>call与apply的用途一致，唯一区别在于其传递参数的方式：</li>
<li>call至少为一个参数，apply最多为两个参数。</li>
</ul>
<h2 id="例子：">例子：</h2>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> value = <span class="string">"global var"</span>; </div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">mFunc</span><span class="params">()</span> </span>{ </div><div class="line"> <span class="keyword">this</span>.value = <span class="string">"member var"</span>; </div><div class="line">} </div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">gFunc</span><span class="params">()</span></span>{ </div><div class="line"> alert(<span class="keyword">this</span>.value); </div><div class="line">} </div><div class="line"><span class="built_in">window</span>.gFunc(); <span class="comment">// show gFunc, gFunc中的this为window</span></div><div class="line">gFunc.call(<span class="built_in">window</span>); <span class="comment">// show gFunc, gFunc中的this为window</span></div><div class="line">gFunc.call(<span class="keyword">new</span> mFunc()); <span class="comment">// show mFunc, gFunc中的this为mFunc</span></div><div class="line">gFunc.call(<span class="keyword">new</span> mFunc()); <span class="comment">//相当于在以下代码中：</span></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">mFunc</span><span class="params">()</span> </span>{ </div><div class="line"> <span class="keyword">this</span>.value = <span class="string">"member var"</span>; </div><div class="line"> <span class="keyword">this</span>.gFunc = <span class="function"><span class="keyword">function</span><span class="params">()</span></span>{alert(<span class="keyword">this</span>.value); }</div><div class="line">}</div></pre></td></tr></table></figure>
<p> 运行：var c = new mFunc();c.gFunc();</p>
</div>
<footer>
<div class="clearfix"></div>
</footer>
</div>
</article>
<article class="post">
<div class="post-content">
<header>
<div class="icon"></div>
<time datetime="2015-01-03T04:33:29.000Z"><a href="/2015/01/03/prototype/">1月 3 2015</a></time>
<h1 class="title"><a href="/2015/01/03/prototype/">原型prototype</a></h1>
</header>
<div class="entry">
<h1 id="prototype与proto的关系、原型链">prototype与<em>proto</em>的关系、原型链</h1>
<h2 id="prototype原型及_proto关系">prototype原型及_proto关系</h2>
<p>每个函数都有一个<strong>prototype</strong>（原型）属性，此属性为一个对象，对象包括此函数类型所有实例共享的属性和方法。</p>
<p>当调用构造函数创建一个新实例时，实例内部包含一个指针（内部属性<strong><em>proto</em></strong>），指向构造函数的原型属性。因此这个连接关系存在于实例与构造函数原型属性之间，与构造函数没关系。</p>
<p>prototype是<strong>构造函数</strong>用来定义<strong>实例</strong>中<em>proto</em>指针指向位置；<br><em>proto</em>是<strong>实例</strong>中原型真正其作用的关键，通过其去查找原型中共享的属性和方法；</p>
<h2 id="原型链">原型链</h2>
<p>原型是让一个引用类型继承另一个引用类型的属性和方法，如果被继承的引用类型又继承了其他引用类型，层层递进，就构成了实例与原型的链条。就是原型链的概念。</p>
</div>
<footer>
<div class="clearfix"></div>
</footer>
</div>
</article>
<article class="post">
<div class="post-content">
<header>
<div class="icon"></div>
<time datetime="2015-01-03T03:50:19.000Z"><a href="/2015/01/03/scope/">1月 3 2015</a></time>
<h1 class="title"><a href="/2015/01/03/scope/">作用域</a></h1>
</header>
<div class="entry">
<h1 id="执行环境、作用域概念、this的含义有哪些需要注意的地方">执行环境、作用域概念、this的含义有哪些需要注意的地方</h1>
<h2 id="执行环境">执行环境</h2>
<p>执行环境定义了变量或者函数有权访问的其他数据（<strong>即在此环境中执行代码能访问操作哪些变量和函数</strong>），每个执行环境都有一个与之关联的<strong>变量对象</strong>，环境中定义的所有变量和函数都保存其中。</p>
<h2 id="作用域：">作用域：</h2>
<ul>
<li><strong>作用域</strong>，就是执行环境中能对其产生作用的变量和函数的范围区域；<br>执行环境里定义了哪些变量和函数能访问，而访问顺序又是怎样的呢，例如：在内部执行环境与外部执行环境都存在相同名字的变量，执行环境以怎样的次序访问呢？</li>
<li><strong>作用域链</strong>：作用域链也是在执行环境时创建的，保证执行环境有权访问的变量和函数有序访问。<br>当前执行环境，只能访问当前环境和其外部执行环境所在变量函数，其内部执行环境变量函数不能访问。</li>
</ul>
<p>两种情况可延长作用域：</p>
<ul>
<li>try-catch语句的catch块；</li>
<li>with语句；</li>
</ul>
<p>js没有块级作用域，即花括号{}封闭的代码块没有自己的作用域，而是添加到当前执行环境中。</p>
<h2 id="this">this</h2>
<ul>
<li><strong>this指当前执行环境的所有者</strong>，即当前执行环境的前置环境的对象。所以this的值由函数如何调用决定；</li>
<li><strong>Function作为构造函数时</strong>，函数里的this指向该构造函数实例化后的对象；</li>
</ul>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> a = <span class="string">"1"</span></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">f1</span><span class="params">()</span></span>{</div><div class="line"> alert(<span class="keyword">this</span>.a)</div><div class="line">}</div><div class="line"> <span class="keyword">new</span> f1();;<span class="comment">//undefined 此时this指向f1实例，而f1没有a属性</span></div><div class="line">f1();<span class="comment">//1 this指向全局环境</span></div></pre></td></tr></table></figure>
<ul>
<li><strong>调用f.bind(someObject)创建与f具有相同内容和作用域的新函数,但原来的函数中的this在新函数中永久指向bind方法第一个参数，不管该函数如何调用。</strong></li>
</ul>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">f</span><span class="params">()</span></span>{</div><div class="line"> <span class="keyword">return</span> <span class="keyword">this</span>.a;</div><div class="line">}</div><div class="line"><span class="keyword">var</span> g = f.bind({a:<span class="string">"azerty"</span>});</div><div class="line"><span class="built_in">console</span>.log(g()); <span class="comment">//azertyvar </span></div><div class="line">o ={a:<span class="number">37</span>,f:f,g:g};</div><div class="line"><span class="built_in">console</span>.log(o.f(),o.g()); <span class="comment">// 37,azerty</span></div></pre></td></tr></table></figure>
<ul>
<li>当function作为事件处理函数，this指向触发该事件的DOM元素</li>
</ul>
<p>因此总结下来this有如下情况下使用：</p>
<pre><code><span class="bullet">* </span>指向全局对象
<span class="bullet">* </span>指向对象
<span class="bullet">* </span>指向实例化对象或普通(hash)对象（构造函数）
<span class="bullet">* </span>指向特定对象（call、apply）
<span class="bullet">* </span>永久指向一个对象(bind)
<span class="bullet">* </span>指向事件触发DOM元素
</code></pre>
</div>
<footer>
<div class="clearfix"></div>
</footer>
</div>
</article>
<article class="post">
<div class="post-content">
<header>
<div class="icon"></div>
<time datetime="2015-01-03T03:50:19.000Z"><a href="/2015/01/03/closure/">1月 3 2015</a></time>
<h1 class="title"><a href="/2015/01/03/closure/">js闭包</a></h1>
</header>
<div class="entry">
<h1 id="闭包的概念、闭包的作用、闭包实用场景、如何实现闭包">闭包的概念、闭包的作用、闭包实用场景、如何实现闭包</h1>
<h2 id="概念：">概念：</h2>
<p>闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成”定义在一个函数内部的函数”。例如：</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line">function f1(){ </div><div class="line"> <span class="keyword">var</span> a = <span class="string">"1"</span>; </div><div class="line"> function f2(){ </div><div class="line"> alert(a); </div><div class="line"> } </div><div class="line"> <span class="keyword">return</span> f2; </div><div class="line">} </div><div class="line"><span class="keyword">var</span> <span class="literal">result</span> = f1(); </div><div class="line"><span class="literal">result</span>()//弹窗口内容<span class="number">1</span></div></pre></td></tr></table></figure>
<p>f2函数定义在f1函数内部，能访问f1内部变量，因此f2就是一个闭包。</p>
<h2 id="作用：">作用：</h2>
<ul>
<li>一个是前面提到的可以读取函数内部的变量</li>
<li>另一个是让这些变量的值始终保持在内存中,例如：</li>
</ul>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line">function f1(){</div><div class="line"> <span class="keyword">var</span> n=<span class="number">999</span>;</div><div class="line"> nAdd=function(){n+=<span class="number">1</span>}</div><div class="line"> function f2(){</div><div class="line"> alert(n);</div><div class="line"> }</div><div class="line"> <span class="keyword">return</span> f2;</div><div class="line"></div><div class="line">}</div><div class="line"><span class="keyword">var</span> <span class="literal">result</span>=f1();</div><div class="line"><span class="literal">result</span>(); // <span class="number">999</span></div><div class="line">nAdd();</div><div class="line"><span class="literal">result</span>(); // <span class="number">1000</span></div></pre></td></tr></table></figure>
<p> result实际上就是闭包f2函数。它一共运行了两次，第一次的值是999，第二次的值是1000。这证明了，函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除。</p>
<h2 id="应用场景">应用场景</h2>
<ul>
<li>保护函数内的变量安全。以最开始的例子为例，函数f1中a只有函数f2才能访问，而无法通过其他途径访问到，因此保护了i的安全性。</li>
<li>在内存中维持一个变量。依然如前例，由于闭包，函数f1中n的一直存在于内存中，因此每次执行nAdd()，都会给n自加1。</li>
<li>通过保护变量的安全实现JS私有属性和私有方法（不能被外部访问）</li>
</ul>
<h2 id="如何实现闭包：">如何实现闭包：</h2>
<p>简单闭包如前面例子，下面写一个常见的闭包与变量的问题。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line">function createFunctions(){</div><div class="line"> <span class="keyword">var</span> <span class="literal">result</span> = new <span class="type">Array</span>();</div><div class="line"> <span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i<<span class="number">10</span>;i++){</div><div class="line"> <span class="literal">result</span>[i]=function(){</div><div class="line"> <span class="keyword">return</span> i;</div><div class="line"> };</div><div class="line"> }</div><div class="line"> <span class="keyword">return</span> <span class="literal">result</span>;</div><div class="line">}</div><div class="line"><span class="keyword">var</span> funcs=createFunctions();</div><div class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i<funcs.length;i++){</div><div class="line"> document.write(funcs[i]()+<span class="string">"<br/>"</span>);</div><div class="line">}</div></pre></td></tr></table></figure>
<p>每次循环funcs<a href="">i</a>输出都是10，并不是从0-10依次输出，因为他们引用的都是同一个变量i.</p>
<p>我们可以创建另一个匿名函数强制让闭包的行为符合预期。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i<<span class="number">10</span>;i++){</div><div class="line"> <span class="literal">result</span>[i]=function(m){</div><div class="line"> <span class="keyword">return</span> function(){<span class="keyword">return</span> m;}</div><div class="line"> }(i);</div><div class="line"> }</div></pre></td></tr></table></figure>
<p>这样输出内容就是我们期望的了。</p>
</div>
<footer>
<div class="clearfix"></div>
</footer>
</div>
</article>
<article class="post">
<div class="post-content">
<header>
<div class="icon"></div>
<time datetime="2014-12-04T03:21:47.000Z"><a href="/2014/12/04/js-point/">12月 4 2014</a></time>
<h1 class="title"><a href="/2014/12/04/js-point/">前端重点知识点</a></h1>
</header>
<div class="entry">
<h1 id="javascript">javascript</h1>
<ul>
<li><p><a href="#">闭包（闭包的概念、闭包的作用、闭包实用场景、如何实现闭包）</a></p>
</li>
<li><p><a href="#">作用域（作用域概念、this有哪些需要注意的地方、如何把一个函数在另一个作用域使用）</a></p>
</li>
<li><p><a href="#">原型prototype（prototype与<em>proto</em>的关系和区别、哪些类型会有prototype/<em>proto</em>属性、prototype如何传递的）</a></p>
</li>
<li><p><a href="#">call与apply的区别是什么，哪些场景下使用</a></p>
</li>
<li><p><a href="#">js面向对象（如何理解面向对象，通过面向对象写一个例子，有什么好处）</a></p>
</li>
<li><p><a href="#">字符串（字符串操作有哪些方法，分别返回什么）</a></p>
</li>
<li><p><a href="#">数组（数组有哪些方法，分别返回什么）</a></p>
</li>
<li><p><a href="#">js设计模式（列举几个常用的设计模式、并各自实现出来）</a></p>
</li>
<li><p><a href="#">模块化开发（如何理解模块化开发、有哪些好处、如何实现、amd与cmd区别、requeri.js与sea.</a></p>
</li>
<li><p><a href="#">backbone与angularjs的优劣势，各有什么特点</a></p>
</li>
<li><p><a href="#">jquery（列举常用方法、列举几个jquery不同版本的区别api及使用实例、）</a></p>
</li>
<li><p><a href="#">事件（解释事件委托、事件冒泡、事件捕获）</a></p>
</li>
</ul>
<h1 id="css">css</h1>
<p>待完善</p>
<h1 id="html">html</h1>
<p>待完善</p>
</div>
<footer>
<div class="clearfix"></div>
</footer>
</div>
</article>
<nav id="pagination">
<div class="clearfix"></div>
</nav></div></div>
<aside id="sidebar" class="alignright">
<div class="search">
<form action="//www.baidu.com/s?" method="get" onsubmit="return searchData()" accept-charset="utf-8">
<input id="search" type="search" name="temp" results="0" placeholder="搜索">
<input id="realVale" type="hidden" name="wd" value="site:jdh.github.io">
</form>
</div>
<script>
function searchData(){
var result = document.getElementById("search").value;
document.getElementById("realVale").value = "site:jdh.github.io " + result ;
return true;
}
</script>
<div class="widget tag">
<h3 class="title">分类</h3>
<ul class="entry">
<li><a href="/categories/前端/">前端</a><small>7</small></li>
</ul>
</div>
</aside>
<div class="clearfix"></div>
</div>
<footer id="footer" class="inner"><div class="alignleft">
© 2015 乐海
</div>
<div class="clearfix"></div></footer>
<script src="//libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
<script src="/js/jquery.imagesloaded.min.js"></script>
<script src="/js/gallery.js"></script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox.css" media="screen" type="text/css">
<script src="/fancybox/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
(function($){
$('.fancybox').fancybox();
})(jQuery);
</script>
</body>
</html>