-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
1020 lines (488 loc) · 71.2 KB
/
index.html
File metadata and controls
1020 lines (488 loc) · 71.2 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
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!doctype html>
<html class="theme-next muse use-motion" lang="zh-Hans">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />
<link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />
<link href="/css/main.css?v=5.1.0" rel="stylesheet" type="text/css" />
<meta name="keywords" content="Hexo, NexT" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5.1.0" />
<meta name="description" content="JavaScript、css、html">
<meta property="og:type" content="website">
<meta property="og:title" content="Machock">
<meta property="og:url" content="https://machock.github.io/index.html">
<meta property="og:site_name" content="Machock">
<meta property="og:description" content="JavaScript、css、html">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Machock">
<meta name="twitter:description" content="JavaScript、css、html">
<script type="text/javascript" id="hexo.configurations">
var NexT = window.NexT || {};
var CONFIG = {
root: '/',
scheme: 'Muse',
sidebar: {"position":"left","display":"post","offset":12,"offset_float":0,"b2t":false,"scrollpercent":false},
fancybox: true,
motion: true,
duoshuo: {
userId: '0',
author: '博主'
},
algolia: {
applicationID: '',
apiKey: '',
indexName: '',
hits: {"per_page":10},
labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
}
};
</script>
<link rel="canonical" href="https://machock.github.io/"/>
<title> Machock </title>
</head>
<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">
<div class="container one-collumn sidebar-position-left
page-home
">
<div class="headband"></div>
<header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
<div class="header-inner"><div class="site-brand-wrapper">
<div class="site-meta ">
<div class="custom-logo-site-title">
<a href="/" class="brand" rel="start">
<span class="logo-line-before"><i></i></span>
<span class="site-title">Machock</span>
<span class="logo-line-after"><i></i></span>
</a>
</div>
<p class="site-subtitle">博客</p>
</div>
<div class="site-nav-toggle">
<button>
<span class="btn-bar"></span>
<span class="btn-bar"></span>
<span class="btn-bar"></span>
</button>
</div>
</div>
<nav class="site-nav">
<ul id="menu" class="menu">
<li class="menu-item menu-item-home">
<a href="/" rel="section">
<i class="menu-item-icon fa fa-fw fa-home"></i> <br />
首页
</a>
</li>
<li class="menu-item menu-item-archives">
<a href="/archives" rel="section">
<i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
归档
</a>
</li>
<li class="menu-item menu-item-tags">
<a href="/tags" rel="section">
<i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
标签
</a>
</li>
</ul>
</nav>
</div>
</header>
<main id="main" class="main">
<div class="main-inner">
<div class="content-wrap">
<div id="content" class="content">
<section id="posts" class="posts-expand">
<article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
<link itemprop="mainEntityOfPage" href="https://machock.github.io/2018/06/16/Promise/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="Machock">
<meta itemprop="description" content="">
<meta itemprop="image" content="/images/avatar.jpg">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Machock">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2018/06/16/Promise/" itemprop="url">
异步与性能(二)：Promise
</a>
</h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2018-06-16T14:46:33+08:00">
2018-06-16
</time>
</span>
<span class="post-comments-count">
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-comment-o"></i>
</span>
<a href="/2018/06/16/Promise/#comments" itemprop="discussionUrl">
<span class="post-comments-count ds-thread-count" data-thread-key="2018/06/16/Promise/" itemprop="commentCount"></span>
</a>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h2 id="目录"><a href="#目录" class="headerlink" title="目录"></a><strong>目录</strong></h2><ol>
<li><strong>什么是Promise</strong></li>
<li><strong>具有then方法的鸭子类型</strong></li>
<li><strong>Promise的信任</strong></li>
<li><strong>链式流</strong></li>
<li><strong>错误处理</strong></li>
<li><strong>Promise模式</strong></li>
<li><strong>Promise的API</strong></li>
<li><strong>Promise局限</strong></li>
</ol>
<h2 id="什么是Promise"><a href="#什么是Promise" class="headerlink" title="什么是Promise"></a><strong>什么是Promise</strong></h2><p>Promise是一种异步解决方案,比传统的回调函数和事件的解决方案更合理、强大。Promise是一个容器，里面存储着未来值，这个未来值是在可预测的方式组合得到的，一旦Promise决议后，将永远保存这个状态，成为了<strong>不变值</strong>。</p>
<h2 id="具有then方法的鸭子类型"><a href="#具有then方法的鸭子类型" class="headerlink" title="具有then方法的鸭子类型"></a><strong>具有then方法的鸭子类型</strong></h2><p><strong>如何检测Promise的实例</strong><br>Promise对象是通过 new Promise(…) 创建的,但是 p instanceof Promise 不能正确检测出p 是否是Promise的实例。<br>识别Promise就是定义某种成为thenable的东西,将其定义为<strong>任何具有then方法的对象和函数</strong>,我们认为这样一个值Promise一致的thenable。<br><figure class="highlight plain"><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></pre></td><td class="code"><pre><div class="line">if(</div><div class="line"> p !== null && (</div><div class="line"> typeof p === 'object' ||</div><div class="line"> typeof p === 'function'</div><div class="line"> ) &&</div><div class="line"> typeof p.then === 'function'</div><div class="line">) {</div><div class="line"> // 假定这是一个thenable</div><div class="line">} else {</div><div class="line"> // 不是一个thenable</div><div class="line">}</div></pre></td></tr></table></figure></p>
<p>这个值可能是这样的:<br><figure class="highlight plain"><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">var o = { then: function }</div><div class="line">// 让v[[Prototype]]-link到o</div><div class="line">var v = Object.create( o )</div><div class="line">v.someStuff = 'cool'</div><div class="line">v.otherStuff = 'not so cool'</div><div class="line">v.hasOwnProperty( 'then' )</div><div class="line">// v根本就是不像Promise或thenable</div></pre></td></tr></table></figure></p>
<p>如果把thenable鸭子类型误把不是Promise的东西识别为Promise,可能是有害的。</p>
<h2 id="Promise的信任"><a href="#Promise的信任" class="headerlink" title="Promise的信任"></a><strong>Promise的信任</strong></h2><p><strong>过早调用</strong><br>对于一个Promise调用then的时候,即使这个promise已经决议,提供给then的方法总是异步调用。<br><strong>调用过晚</strong><br>一个Promise决议后，这个Promise上所有的通过then(…)注册的回调都会都会在下一个异步时机点上一次被立即调用。<br><figure class="highlight plain"><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></pre></td><td class="code"><pre><div class="line">p.then( function(){</div><div class="line"> p.then( function() {</div><div class="line"> console.log('C')</div><div class="line"> })</div><div class="line"> console.log('A')</div><div class="line">})</div><div class="line">p.then( function() {</div><div class="line"> console.log('B')</div><div class="line">})</div><div class="line">// A B C</div></pre></td></tr></table></figure></p>
<p><strong>Promise调度技巧</strong><br>两个独立Promise上的链接的回调的相对顺序无法可靠预测<br><figure class="highlight plain"><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><div class="line">16</div><div class="line">17</div><div class="line">18</div></pre></td><td class="code"><pre><div class="line">var p3 = new Promise( function(resolve,reject) {</div><div class="line"> resolve( 'B' )</div><div class="line">})</div><div class="line">var p1 = new Promise( function(resolve,reject) {</div><div class="line"> resolve( p3 )</div><div class="line">})</div><div class="line">var p2 = new Promise( function(resolve,reject) {</div><div class="line"> resolve( 'A' )</div><div class="line">})</div><div class="line">p1.then( function(v) {</div><div class="line"> console.log(v)</div><div class="line">})</div><div class="line">p2.then( function(v) {</div><div class="line"> console.log(v)</div><div class="line">})</div><div class="line"></div><div class="line">// A B</div><div class="line">// 不该依赖不同Promise间的回调顺序和调度</div></pre></td></tr></table></figure></p>
<p><strong>回调未调用</strong><br>对Promise注册完成回调和拒绝回调,namePromise在决议时总是调用其中一个。</p>
<p><strong>调用次数过多或过少</strong><br>Promise的定义方式使得它只能被决议一次,并且决议后的值是不变值,如果把同一个回调注册不止一次(p.then(f); p.then(f))它被调用的次数和注册次数相同。</p>
<p><strong>未能传递参数/环境值</strong><br>Promise至多只能有一个决议值(完成或拒绝),没有传值,那么这个值就是undefined,如果要传递多个值,可以封装在对象中进行传递。<br><strong>r如果传递的是一个Promise的thenable值,会视图展开这个值,</strong></p>
<h2 id="链式流"><a href="#链式流" class="headerlink" title="链式流"></a><strong>链式流</strong></h2><p>Promise特点:</p>
<blockquote>
<p>1.每次对Promise的then调用,会创建并返回一个新的Promise,可以将其连接起来<br>2.不管then调用的完成回调的返回值是什么,会被自动设置为被链接Promise的完成<br><figure class="highlight plain"><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">var p = Promise.resolve(21)</div><div class="line">p.then( (v) => {</div><div class="line"> console.log(v)</div><div class="line"> // 用return的值作为链接的Promise, 如果不显示的return,则返回undefined</div><div class="line"> return v * 2 </div><div class="line">})</div><div class="line">.then( (v) => {</div><div class="line"> console.log(v)</div><div class="line">})</div></pre></td></tr></table></figure></p>
</blockquote>
<p>没有给then传递一个适当有效的函数作为完成处理函数的参数,还是会有作为替代的一个默认处理函数<br><figure class="highlight plain"><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></pre></td><td class="code"><pre><div class="line">var p = Promise.resolce(42)</div><div class="line">p.then( (v) => {</div><div class="line"> // 假设处理函数省略或传入任何非函数值,默认将值传递到下一个promise函数处理</div><div class="line"> // function(v) {</div><div class="line"> // return v</div><div class="line"> // }</div><div class="line"> null,</div><div class="line"> function rejected(err) {</div><div class="line"> // 不会执行到这里</div><div class="line"> }</div><div class="line">})</div></pre></td></tr></table></figure></p>
<h2 id="错误处理"><a href="#错误处理" class="headerlink" title="错误处理"></a><strong>错误处理</strong></h2><p>使用catch来捕获错误,then函数内部抛出的错误未处理会往后一直传下去,但是catch在处理错误内部逻辑也可能出现error,<br>应该使用done方法<br><strong>done()</strong>不会创建并返回一个promise,所以传递给done的回调不会报告一个不存在的链接promise的问题<br><figure class="highlight plain"><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></pre></td><td class="code"><pre><div class="line">p.then((msg)=>{</div><div class="line"> console.log(msg.toLowerCase())</div><div class="line">})</div><div class="line">.done(null,handleError)</div></pre></td></tr></table></figure></p>
<p>done方法的实现,无论如何都可以捕获错误,并抛出全局的错误<br><figure class="highlight plain"><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">Promise.prototype.done = function(onFulfilled, onRejected) {</div><div class="line"> this.then(onFulfilled,onRejected)</div><div class="line"> .catch(function(reson) {</div><div class="line"> // 抛出一个全局错误</div><div class="line"> setTimeout( () => {</div><div class="line"> throw reson</div><div class="line"> },0)</div><div class="line"> })</div><div class="line">}</div></pre></td></tr></table></figure></p>
<blockquote>
<p>1.默认情况下,Promise在下一个任务或时间循环tick上报告所有拒绝,如果在这个时间点上该Promise没有注册错误处理函数<br>2.如果想要一个Promise在查看之前的某个时间段内保持被拒绝状态,可以调用<strong>defer()</strong>.这个函数优先级高于该Promise的自动错误报告.<br><figure class="highlight plain"><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></pre></td><td class="code"><pre><div class="line">var p = Promise.resolve('oop').defer()</div><div class="line">foo(42)</div><div class="line">.then(</div><div class="line"> () => {</div><div class="line"> return p</div><div class="line"> },</div><div class="line"> (err) => {</div><div class="line"> // 处理foo错误</div><div class="line"> }</div><div class="line">)</div><div class="line">// 这种方案的危险是:derfer一个promise之后,没有成功查看或处理他的拒绝结果</div></pre></td></tr></table></figure></p>
</blockquote>
<h2 id="Promise模式"><a href="#Promise模式" class="headerlink" title="Promise模式"></a><strong>Promise模式</strong></h2><p><strong>Promise.all([])</strong>: 全部成功之后返回,否则reject,如果传入空数组立即决议<br><figure class="highlight plain"><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></pre></td><td class="code"><pre><div class="line">Promise.all([p1, p2])</div><div class="line">.then((msgs) => {</div><div class="line"> //msgs 是返回结果的数组</div><div class="line">})</div></pre></td></tr></table></figure></p>
<p><strong>Promise.race([])</strong>: 只需响应其中一个Promise,抛弃其他的Promise,如果传入空数组,Promise永远不会决议<br>那些被丢弃的Promise怎么办呢?Promise是不会被取消的.<br>finally()则提供清理不需要的Promise的工作,接受一个普通函数作为参数,该函数必定会执行.<br>服务器使用Promise处理请求,使用finally关闭服务器<br><figure class="highlight plain"><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">server.listen(80)</div><div class="line">.then( () => {</div><div class="line"> // run rest</div><div class="line">})</div><div class="line">.finally(server.stop)</div></pre></td></tr></table></figure></p>
<p>finally的实现:<br><figure class="highlight plain"><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></pre></td><td class="code"><pre><div class="line">// 不管是fulfilled还是rejected都会执行callback</div><div class="line">Promise.prototype.finally = function(callback) {</div><div class="line"> let p = this.constructor;</div><div class="line"> return this.then(</div><div class="line"> value => p.resolve( callback() ).then( ()=> value),</div><div class="line"> reson => p.resolve( callback() ).then( ()=> throw reson)</div><div class="line"> )</div><div class="line">}</div></pre></td></tr></table></figure></p>
</div>
<div>
</div>
<div>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
<link itemprop="mainEntityOfPage" href="https://machock.github.io/2018/04/28/异步与回调-一/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="Machock">
<meta itemprop="description" content="">
<meta itemprop="image" content="/images/avatar.jpg">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Machock">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2018/04/28/异步与回调-一/" itemprop="url">
异步与性能(一)：异步与回调
</a>
</h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2018-04-28T09:11:34+08:00">
2018-04-28
</time>
</span>
<span class="post-comments-count">
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-comment-o"></i>
</span>
<a href="/2018/04/28/异步与回调-一/#comments" itemprop="discussionUrl">
<span class="post-comments-count ds-thread-count" data-thread-key="2018/04/28/异步与回调-一/" itemprop="commentCount"></span>
</a>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h2 id="目录"><a href="#目录" class="headerlink" title="目录"></a><strong>目录</strong></h2><ol>
<li><strong>异步:现在与将来</strong><ul>
<li><strong>分块程序</strong></li>
<li><strong>事件循环</strong></li>
<li><strong>并行线程</strong></li>
<li><strong>并发</strong></li>
<li><strong>任务</strong></li>
<li><strong>语句顺序</strong></li>
</ul>
</li>
<li><strong>回调</strong><ul>
<li><strong>回调的顺序</strong></li>
<li><strong>回调的信任</strong></li>
</ul>
</li>
</ol>
<h2 id="异步-现在与将来"><a href="#异步-现在与将来" class="headerlink" title="异步:现在与将来"></a><strong>异步:现在与将来</strong></h2><p>在程序运行中,现在运行的部分和将来运行的部分之间的关系就是异步编程的核心。</p>
<h3 id="分块程序"><a href="#分块程序" class="headerlink" title="分块程序"></a><strong>分块程序</strong></h3><p>一个程序由多个块组成，当前运行的部分就是<strong>现在</strong>，剩余的部分就是<strong>将来</strong>，最常见的<strong>块</strong>单位是函数。<br>为什么会出现回调：程序中<strong>将来</strong>执行的部分，并不一定在<strong>现在</strong>执行完成后立即执行，既现在无法完成的部分将会一步完成<br><figure class="highlight plain"><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 data = ajax('http://someurl') // ajax 没有返回任何值给data</div><div class="line">console.log(data)</div></pre></td></tr></table></figure></p>
<p>从现在到将来之间的等待最简单的方法就是<strong>回调函数</strong><br><figure class="highlight plain"><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">ajax('someurl', function(data) {</div><div class="line"> console.log(data)</div><div class="line">})</div></pre></td></tr></table></figure></p>
<p>只要把一段代码封装成一个函数,指定他在相应某个事件(定时器,鼠标点击,ajax响应)时执行,就创建了一个<strong>未来</strong>执行的代码块。<br><figure class="highlight plain"><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 now() {</div><div class="line"> return 10;</div><div class="line">}</div><div class="line">function later() { // 函数内部的代码为未来执行的代码</div><div class="line"> answer = answer * 2</div><div class="line"> console.log('Meaning is life:',answer)</div><div class="line">}</div><div class="line">var answer = now()</div><div class="line">setTimeout( later, 1000)</div></pre></td></tr></table></figure></p>
<blockquote>
<p>现在:<br>function now() {<br> return 10;<br>}<br>function later() { … }<br>var answer = now()<br>setTimeout( later, 1000)</p>
<p>将来:<br>answer = answer * 2<br>console.log(‘Meaning is life:’,answer)</p>
</blockquote>
<p><strong>异步控制台</strong><br>console.<em>是由<em>*宿主环境</em></em>添加到JavaScript中的.<br>多数情况下,控制台输出和期望一直。但是控制台I/O会延迟，在调用过程中遇到对象被修改，会出现意料之外的结果。</p>
<h3 id="事件循环"><a href="#事件循环" class="headerlink" title="事件循环"></a><strong>事件循环</strong></h3><p>JavaScript引擎本身所做的只是在给定任意时刻执行程序中的单个代码块。<br><strong>需要，谁的需要</strong>才是关键<br>时间循环：JavaScript宿主环境提供一种机制来处理程序中的多个块的执行，且执行每块时调用JavaScript引擎，这种机制被称为<strong>事件循环</strong>。<br><strong>“事件”</strong>(JavaScript代码执行)调度总是有他的环境进行的。<br><figure class="highlight plain"><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><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div></pre></td><td class="code"><pre><div class="line">// eventLoop是一个用作队列的数组(先进先出)</div><div class="line">var eventLoop = []</div><div class="line">var event</div><div class="line">// 永远执行</div><div class="line">while(true) {</div><div class="line"> // 一次 tick</div><div class="line"> if(eventLoop.length > 0) {</div><div class="line"> // 拿到队列中的下一个事件</div><div class="line"> event = eventLoop.shift()</div><div class="line"></div><div class="line"> // 现在执行下一个事件</div><div class="line"> try {</div><div class="line"> event()</div><div class="line"> }</div><div class="line"> catch(err) {</div><div class="line"> console.err(error)</div><div class="line"> }</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure></p>
<blockquote>
<p>while 实现一个持续循环,每一轮成为一个tick,如果有队列等待,那么就从队列中摘取下一个事件并执行,这就是回调函数。<br>假设有20个项目，回调就会等待，他得排在其他项目后面–通常没有<strong>抢占式</strong>的方式支持直接排到队首(不能插队),所以setTimeout的精度不高<br><figure class="highlight plain"><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></pre></td><td class="code"><pre><div class="line">// ...其他的代码</div><div class="line">setTimeout( function(){}, 20)</div><div class="line">// 假设前面的代码中有足够多的回调,而定时器的回调放在末尾</div><div class="line">// 在20ms的时候还在执行其他的回调,那么定时器就不精确</div></pre></td></tr></table></figure></p>
</blockquote>
<h3 id="并行线程"><a href="#并行线程" class="headerlink" title="并行线程"></a><strong>并行线程</strong></h3><ul>
<li>异步是关于<strong>现在</strong>和<strong>将来</strong>的时间间隙</li>
<li>并行是关于能够<strong>同时</strong>发生的事情</li>
</ul>
<h3 id="完整运行"><a href="#完整运行" class="headerlink" title="完整运行"></a><strong>完整运行</strong></h3><p><strong>竞态条件</strong>:函数顺序的不确定性,无法可靠的预测结果既形成竞态.</p>
<h3 id="并发"><a href="#并发" class="headerlink" title="并发"></a><strong>并发</strong></h3><p>两个或多个’进程’同时执行就叫并发,并发可以看做’任务’级的并行,而运算级的并行体现在线程上<br><strong>非交互</strong>:如果进程间不影响,不确定性是可以接受的<br><figure class="highlight plain"><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">ajax('url1', foo)</div><div class="line">ajax('url2', bar)</div><div class="line">// 两者之间并没有逻辑交互</div></pre></td></tr></table></figure></p>
<p><strong>交互</strong>:如果进程间不影响,不确定性是可以接受的<br><figure class="highlight plain"><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">var res = []</div><div class="line">handle(result) {</div><div class="line"> res.push(result)</div><div class="line">}</div><div class="line">ajax('url1', handle)</div><div class="line">ajax('url2', handle)</div><div class="line">// 两者都调用一个处理逻辑,形成了**竞态条件**</div></pre></td></tr></table></figure></p>
<p><strong>协作</strong>:如果进程间不影响,不确定性是可以接受的<br><figure class="highlight plain"><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><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div></pre></td><td class="code"><pre><div class="line">var res = []</div><div class="line">handle(data) {</div><div class="line"> res.push(data)</div><div class="line"> // 一次处理1000个</div><div class="line"> var chunk = data.splice(0,1000)</div><div class="line"></div><div class="line"> // 添加到已有的res数组</div><div class="line"> res = res.concat(</div><div class="line"> chunk.map((item) => item*2)</div><div class="line"> )</div><div class="line"></div><div class="line"> // 如果还有数据</div><div class="line"> if(data.length > 0) {</div><div class="line"> // 异步处理</div><div class="line"> setTimeout(() => handle(data),0)</div><div class="line"> }</div><div class="line">}</div><div class="line">ajax('url1', handle)</div><div class="line">ajax('url2', handle)</div><div class="line">// 事件循环队列交替运行,把数据集合放在包含1000条项目中,确保'进程'运行时间很短,提高性能</div></pre></td></tr></table></figure></p>
<h3 id="任务"><a href="#任务" class="headerlink" title="任务"></a><strong>任务</strong></h3><p><strong>任务队列</strong>: 挂在时间循环队列的每个tick之后的一个队列. 在事件循环队列的每个tick中,可能出现异步动作不会导致一个完整的新事件添加到事件循环队列中,而会在当前tick的任务队列末尾添加一个项目.<br><figure class="highlight plain"><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></pre></td><td class="code"><pre><div class="line">console.log('A')</div><div class="line"></div><div class="line">setTimeout(() => console.log('B'),0)</div><div class="line"></div><div class="line">schedule( () => {</div><div class="line"> console.log('C')</div><div class="line"> schedule( () => {</div><div class="line"> console.log('D')</div><div class="line"> })</div><div class="line">})</div><div class="line"></div><div class="line">// A C D B 定时器触发是为了调度下一个事件循环的tick</div></pre></td></tr></table></figure></p>
<h3 id="语句顺序"><a href="#语句顺序" class="headerlink" title="语句顺序"></a><strong>语句顺序</strong></h3><p>代码在预编译阶段会重新安排语句顺序来提高执行速度<br><figure class="highlight plain"><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></pre></td><td class="code"><pre><div class="line">var a,b</div><div class="line">a = 10</div><div class="line">a++</div><div class="line">b = 30</div><div class="line">b++</div><div class="line">console.log( a + b ) // 42</div><div class="line"></div><div class="line">// 预编译之后</div><div class="line">var a,b</div><div class="line">a = 11</div><div class="line">b = 31</div><div class="line">console.log( a + b ) // 42</div></pre></td></tr></table></figure></p>
<h2 id="回调"><a href="#回调" class="headerlink" title="回调"></a><strong>回调</strong></h2><h3 id="回调的顺序"><a href="#回调的顺序" class="headerlink" title="回调的顺序"></a><strong>回调的顺序</strong></h3><p><strong>嵌套回调与链式回调</strong><br><figure class="highlight plain"><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><div class="line">16</div></pre></td><td class="code"><pre><div class="line">// 回调地狱, 不停地嵌套回调函数</div><div class="line">// 现在执行 1</div><div class="line">listen('click', function handler(ev) {</div><div class="line"> // 将来执行 2</div><div class="line"> setTimeout( function request() {</div><div class="line"> // 还是将来执行 3</div><div class="line"> ajax('someurl', function response(text){</div><div class="line"> // 最后一个将来执行 4</div><div class="line"> if(text === 'hello') {</div><div class="line"> handler();</div><div class="line"> } else if(text === 'world') {</div><div class="line"> request()</div><div class="line"> }</div><div class="line"> })</div><div class="line"> }, 500)</div><div class="line">})</div></pre></td></tr></table></figure></p>
<h3 id="回调的信任"><a href="#回调的信任" class="headerlink" title="回调的信任"></a><strong>回调的信任</strong></h3><p><strong>控制反转</strong>: 把自己执行的代码交给第三方(插件)<br>回调的问题:</p>
<blockquote>
<p><strong>调用回调过早</strong><br><strong>调用回调过晚</strong><br><strong>调用回调次数太多或太少</strong><br><strong>没有把环境/参数传递给回调函数</strong><br><strong>吞掉可能出错的异常</strong></p>
</blockquote>
<p>建议:<strong>永远异步调用回调,即使就在事件循环的下一轮</strong><br><figure class="highlight plain"><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">function result(data) {</div><div class="line"> console.log(a)</div><div class="line">}</div><div class="line">var a = 0</div><div class="line">ajax('someurl', result)</div><div class="line">a++</div><div class="line">// 并不知道会输出什么 同步为0 异步为1</div></pre></td></tr></table></figure></p>
<figure class="highlight plain"><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><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div></pre></td><td class="code"><pre><div class="line">// 强制变成异步执行</div><div class="line">function asyncify(fn) {</div><div class="line"> var orig_fn = fn</div><div class="line"> intv = setTimeout( function(){</div><div class="line"> intv = null</div><div class="line"> if(fn) fn();</div><div class="line"> },0)</div><div class="line"> fn = null</div><div class="line"> return function() {</div><div class="line"> // 触发太快, 定时器intv触发指示异步转换发生之前</div><div class="line"> if(intv) {</div><div class="line"> fn = orig_fn.bind.apply(orig_fn,</div><div class="line"> // 把封装的this添加到bind调用参数中</div><div class="line"> // 以及柯里化所传入的参数</div><div class="line"> [this].concat( [].slice.call(arguments))</div><div class="line"> )</div><div class="line"> }</div><div class="line"> // 已经是异步</div><div class="line"> else {</div><div class="line"> // 调用原来的函数</div><div class="line"> orign_fn.apply(this, arguments)</div><div class="line"> }</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
</div>
<div>
</div>
<div>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
<link itemprop="mainEntityOfPage" href="https://machock.github.io/2018/04/22/javascript类型转换-1/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="Machock">
<meta itemprop="description" content="">
<meta itemprop="image" content="/images/avatar.jpg">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Machock">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2018/04/22/javascript类型转换-1/" itemprop="url">
javascript类型转换
</a>
</h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2018-04-22T17:11:21+08:00">
2018-04-22
</time>
</span>
<span class="post-comments-count">
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-comment-o"></i>
</span>
<a href="/2018/04/22/javascript类型转换-1/#comments" itemprop="discussionUrl">
<span class="post-comments-count ds-thread-count" data-thread-key="2018/04/22/javascript类型转换-1/" itemprop="commentCount"></span>
</a>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h2 id="目录"><a href="#目录" class="headerlink" title="目录"></a><strong>目录</strong></h2><ol>
<li><strong>抽象操作</strong><ul>
<li><strong>ToString</strong></li>
<li><strong>ToNumber</strong></li>
<li><strong>ToBoolean</strong></li>
</ul>
</li>
<li><strong>显示强制类型转换</strong><ul>
<li><strong>字符串与数字之间转换</strong></li>
<li><strong>显示解析数字字符串</strong></li>
<li><strong>显示转换为布尔值</strong></li>
</ul>
</li>
<li><strong>隐式强制类型转换</strong><ul>
<li><strong>字符串与数字之间的强制隐式转换</strong></li>
<li><strong>隐式强制转换为布尔值</strong></li>
<li><strong>显示转换为布尔值</strong></li>
</ul>
</li>
<li><strong>宽松相等</strong><ul>
<li><strong>性能比较</strong></li>
<li><strong>隐式强制转换为布尔值</strong></li>
<li><strong>显示转换为布尔值</strong><br>在JavaScript编程中经常用到类型转换,其中包括显示(类型)转换,隐式(强制类型)转换,对于阅读代码的人而言,理解’显示’与隐式也不一致,不过大致可以理解为对于阅读代码的人来讲,能看懂的就叫’显示’,否则即为’隐式’。</li>
</ul>
</li>
</ol>
<h2 id="抽象操作"><a href="#抽象操作" class="headerlink" title="抽象操作"></a><strong>抽象操作</strong></h2><p>在介绍类型转换之前，需要掌握字符串、数字、布尔之间的相互转换，既ToString、ToNumber、ToBoolean，以及 ToPromitive的抽象操作。</p>
<h3 id="ToString"><a href="#ToString" class="headerlink" title="ToString"></a><strong>ToString</strong></h3><p>基本类型的字符串转化：<br><figure class="highlight plain"><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">null=>'null'</div><div class="line">undefined => 'undefined'</div><div class="line">true=>'true'</div></pre></td></tr></table></figure></p>
<p>极大数以积极小数的转换使用指数形式表示：<br><figure class="highlight plain"><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 a = 1.07 * 1000 * 1000 * 1000 * 1000 * 1000 * 1000 * 1000 ;</div><div class="line">a.toString() // '1.07e+21'</div></pre></td></tr></table></figure></p>
<p>对象执行toString(), 使用(Object.prototype.toString) 返回内部属性[[Class]]的值, 如’[object Object]’<br>数组使用toString:<br><figure class="highlight plain"><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 a = [1,2,3] </div><div class="line">a.toString() // '1,2,3'</div></pre></td></tr></table></figure></p>
<p>JSON字符串化<br><figure class="highlight plain"><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></pre></td><td class="code"><pre><div class="line">JSON.stringify(42) // '42'</div><div class="line">JSON.stringify('42') // '42'</div><div class="line">JSON.stringify(null) // '42'</div><div class="line">JSON.stringify(true) // 'true'</div></pre></td></tr></table></figure></p>
<p>如果对象中遇到 undefined、function、symbol 会自动忽略，在数组中则返回null<br><figure class="highlight plain"><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></pre></td><td class="code"><pre><div class="line">JSON.stringify(undefined) // undefined</div><div class="line">JSON.stringify(function(){}) // undefined</div><div class="line">JSON.stringify([1,null,undefined,function(){}, 4]) //'[1,null,null,4]'</div><div class="line">JSON.stringify({a: function(){}, b: 1}) // '{b:1}'</div></pre></td></tr></table></figure></p>
<h3 id="ToNumber"><a href="#ToNumber" class="headerlink" title="ToNumber"></a><strong>ToNumber</strong></h3><p>基本类型的数字转化：<br><figure class="highlight plain"><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></pre></td><td class="code"><pre><div class="line">true => 1</div><div class="line">undefined => NAN</div><div class="line">false=> 0</div><div class="line">null => 0</div></pre></td></tr></table></figure></p>
<p>为了将值转化为基础类型,抽象操作ToPromitive回先检查改值是否有valueOf()方法,如果有并返回基本类型值,再进行强制类型转换. 如果没有就是用toString()的返回值(如果有)进行强制转换,如果均不返回基本类型值,就会报错 typeerror<br><figure class="highlight plain"><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><div class="line">16</div></pre></td><td class="code"><pre><div class="line">var a = {</div><div class="line"> valueOf: function(){return 5;}</div><div class="line">}</div><div class="line">var b = {</div><div class="line"> toString: function(){return 5;}</div><div class="line">}</div><div class="line">var c = [4,2];</div><div class="line">c.toString: function(){</div><div class="line"> return this.join('')</div><div class="line">}</div><div class="line">Number(a) // 5</div><div class="line">Number(b) // 5</div><div class="line">Number(c) // 42</div><div class="line">Number('') // 0</div><div class="line">Number([]) // 0</div><div class="line">Number(['abc']) // NAN</div></pre></td></tr></table></figure></p>
<h3 id="ToBoolean"><a href="#ToBoolean" class="headerlink" title="ToBoolean"></a><strong>ToBoolean</strong></h3><p>假值:除了假值即为真值<br><figure class="highlight plain"><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">undefined</div><div class="line">null</div><div class="line">false</div><div class="line">+0 -0 NAN</div><div class="line">""</div></pre></td></tr></table></figure></p>
<p>假值对象:即为对假值封装的对象.<br><figure class="highlight plain"><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></pre></td><td class="code"><pre><div class="line">var a = new Booleab(false) // true</div><div class="line">var b = new Number(0) // true</div><div class="line">var c = new String("") // true</div><div class="line">// 因为使用new对构造函数实例化,是通过封装对象对基本类型进行封装,既基本类型值外面使用对象包裹.</div></pre></td></tr></table></figure></p>
<h2 id="显示强制类型转换"><a href="#显示强制类型转换" class="headerlink" title="显示强制类型转换"></a><strong>显示强制类型转换</strong></h2><h3 id="字符串与数字之间转换"><a href="#字符串与数字之间转换" class="headerlink" title="字符串与数字之间转换"></a><strong>字符串与数字之间转换</strong></h3><p>数字和字符串之间的转换是通过String()和Number()这两个内建函数,并不通过new关键字创建<br><figure class="highlight plain"><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></pre></td><td class="code"><pre><div class="line">var a = 42;</div><div class="line">var b = String(a) // '42'</div><div class="line">var c = "3.14"</div><div class="line">var d = Number(c) // 3.14</div></pre></td></tr></table></figure></p>
<p>使用toString()和 +<br><figure class="highlight plain"><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></pre></td><td class="code"><pre><div class="line">var a = 42;</div><div class="line">a.toString() // '42'</div><div class="line">var c = "3.14"</div><div class="line">+c // 3.14</div></pre></td></tr></table></figure></p>
<p>日期的显示转换为数字:<br><figure class="highlight plain"><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 a = new Date()</div><div class="line">+a // 1524369274939 获得的是时间戳</div><div class="line"> new Date().getTime() === (new Date).getTime() === Date.now()</div></pre></td></tr></table></figure></p>
<p>运算符 ~ :~ 返回2的补码:<br><figure class="highlight plain"><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">var a = -1;</div><div class="line">~a ==> -(a+1) // 0</div><div class="line">~42 // -43</div><div class="line">// 技巧: </div><div class="line">var b = 'abc'</div><div class="line">~b.indexOf('d') // 0</div></pre></td></tr></table></figure></p>
<p>~~字位截除: 只是用32位数字<br><figure class="highlight plain"><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">~~32.3 // 32</div><div class="line">~~-32.3 // -32</div><div class="line">// 取整,用于去除小数点</div></pre></td></tr></table></figure></p>
<h3 id="显示解析数字字符串"><a href="#显示解析数字字符串" class="headerlink" title="显示解析数字字符串"></a><strong>显示解析数字字符串</strong></h3><p>Number(): 只能接收数字字符串,否则会转换失败返回NAN.<br>parseFloat(): 解析浮点字符串,直到解析遇到字符串或者解析到最后<br>parseInt(): 只能解析字符串<br><figure class="highlight plain"><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">parseInt(["32A",'212','Naaa']) // 32</div><div class="line">parseInt(true) // NAN</div><div class="line">parseInt(function(){}) // NAN</div></pre></td></tr></table></figure></p>
<h4 id="解析非字符串"><a href="#解析非字符串" class="headerlink" title="解析非字符串"></a><strong>解析非字符串</strong></h4><figure class="highlight plain"><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">parseInt(1/0,19) // 18</div><div class="line">// 释义: parseInt只能接收字符串, 1/0 ==> Infinity</div><div class="line">// 基数19: 有字符付范围是0-9和a-i(区分大小写)</div><div class="line">// I刚好是19,第二个字符'n'不在范围内,不是一个有效字符,解析完毕</div><div class="line">parseInt(0.000008) // 0</div><div class="line">parseInt(0.0000008) // 8 (来自于'8e-7')</div><div class="line">parseInt(false,16) // 250 (fa来自于'false') 0-15</div><div class="line">parseInt('0x10') // 16</div><div class="line">parseInt('103',2) // 2 1*2^1 + 0*2^0</div></pre></td></tr></table></figure>
<h4 id="显示转换布尔值"><a href="#显示转换布尔值" class="headerlink" title="显示转换布尔值"></a><strong>显示转换布尔值</strong></h4><p>使用 Boolean()进行转换.</p>
<h2 id="隐式强制类型转换"><a href="#隐式强制类型转换" class="headerlink" title="隐式强制类型转换"></a><strong>隐式强制类型转换</strong></h2><h3 id="字符串与数字之间的强制隐式转换"><a href="#字符串与数字之间的强制隐式转换" class="headerlink" title="字符串与数字之间的强制隐式转换"></a><strong>字符串与数字之间的强制隐式转换</strong></h3><p>使用 + 号进行字符串与数字的连接<br><figure class="highlight plain"><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">var a = '42'</div><div class="line">var b = 0</div><div class="line">a + b // '420'</div><div class="line">var c = [1,2]</div><div class="line">var d = [3,4]</div><div class="line">c + d // '1,23,4'</div></pre></td></tr></table></figure></p>
<p>数字和空字符串相 + 转换为字符串<br><figure class="highlight plain"><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 a = 42</div><div class="line">var b = ''</div><div class="line">a + b // '42'</div></pre></td></tr></table></figure></p>
<p>使用 a + ‘’ 和String(a)是不一样的.<br>a + ‘’ : 使用ToPromitive抽象操作(先调用valueOf,然后通过ToString返回字符串)<br>ToString: 直接调用toString() 方法<br><figure class="highlight plain"><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">var a = {</div><div class="line"> valueOf: function(){ return 42 },</div><div class="line"> toString: function() { return 1 }</div><div class="line">}</div><div class="line">a + '' // '42'</div><div class="line">String(a) // '1'</div></pre></td></tr></table></figure></p>
<p>字符串转换为数字的情况:<br><figure class="highlight plain"><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 a = [3]</div><div class="line">var b = [1]</div><div class="line">a - b // 2</div></pre></td></tr></table></figure></p>
<h3 id="布尔值到数字的隐式强制转换"><a href="#布尔值到数字的隐式强制转换" class="headerlink" title="布尔值到数字的隐式强制转换"></a><strong>布尔值到数字的隐式强制转换</strong></h3><p>转换为布尔值的情况:<br><figure class="highlight plain"><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">if(...)</div><div class="line">for(..,..,..)</div><div class="line">while(...)和 do .. while(..)</div><div class="line">? .. : ..</div><div class="line">|| 和 &&</div></pre></td></tr></table></figure></p>
<p>&& 和 || 返回两个之中的一个:<br><figure class="highlight plain"><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">var a = 42</div><div class="line">var b = 'abc'</div><div class="line">var c = null</div><div class="line">a || b // 42 第一个值为true则去第一个否则取后面一个</div><div class="line">c && b // null c为真 后面的则为返回值</div></pre></td></tr></table></figure></p>
<h3 id="符号的强制类型转换"><a href="#符号的强制类型转换" class="headerlink" title="符号的强制类型转换"></a><strong>符号的强制类型转换</strong></h3><figure class="highlight plain"><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 s1 = Symbol('cool')</div><div class="line">String(s1) // 'Symbol(cool)'</div><div class="line">s1 + "" // typeError</div></pre></td></tr></table></figure>
<h2 id="宽松相等"><a href="#宽松相等" class="headerlink" title="宽松相等"></a><strong>宽松相等</strong></h2><p>‘==’允许强制类型转换,’===’不允许</p>
<h3 id="性能比较"><a href="#性能比较" class="headerlink" title="性能比较"></a><strong>性能比较</strong></h3><p>严格来讲’==’多做了一个强制类型转换的操作,但性能相差微乎其微</p>
<h3 id="抽象相等"><a href="#抽象相等" class="headerlink" title="抽象相等"></a><strong>抽象相等</strong></h3><h3 id="字符串和数字之间的比较"><a href="#字符串和数字之间的比较" class="headerlink" title="字符串和数字之间的比较"></a><strong>字符串和数字之间的比较</strong></h3><p>规范定义:</p>
<blockquote>
<p>(1) 如果Type(x)为数字,Type(y)是字符串,则返回 x == ToNumber(y)<br>(2) 如果Type(x)为字符串,Type(y)是数字,则返回 ToNumber(x) == y<br>结论将字符串执行ToNumber() 后进行比较<br><figure class="highlight plain"><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></pre></td><td class="code"><pre><div class="line">var a = 42</div><div class="line">var b = '42'</div><div class="line">a == b // true</div><div class="line">a === b // false</div></pre></td></tr></table></figure></p>
</blockquote>
<h3 id="字符串和数字之间的比较-1"><a href="#字符串和数字之间的比较-1" class="headerlink" title="字符串和数字之间的比较"></a><strong>字符串和数字之间的比较</strong></h3><p>规范定义:</p>
<blockquote>
<p>(1) 如果Type(x)为布尔类型,则返回 ToNumber(x) == y<br>(2) 如果Type(y)为布尔类型,则返回 x == ToNumber(y)<br>结论将布尔值执行ToNumber() 后进行比较<br><figure class="highlight plain"><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">var a = true</div><div class="line">var b = '32'</div><div class="line">var c = '1'</div><div class="line">a == b // false</div><div class="line">a == c // true</div></pre></td></tr></table></figure></p>
</blockquote>
<h3 id="null-和-undefined-之间的比较"><a href="#null-和-undefined-之间的比较" class="headerlink" title="null 和 undefined 之间的比较"></a><strong>null 和 undefined 之间的比较</strong></h3><p>规范定义:</p>
<blockquote>
<p>(1) 如果x为null,y为undefined,返回true<br>(2) 如果x为undefined,y为null,返回true<br>结论: 使用null == undefined 是安全可靠的,避免了0,false和’’这样的假值<br><figure class="highlight plain"><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">var a = null</div><div class="line">var b </div><div class="line">a == b // true</div><div class="line">a == null // true</div><div class="line">b == null // true</div><div class="line">a == '' //false</div><div class="line">b == '' //false</div><div class="line">a == 0 //false</div><div class="line">a == 0 //false</div></pre></td></tr></table></figure></p>
</blockquote>
<h3 id="对象-和-非对象-之间的比较"><a href="#对象-和-非对象-之间的比较" class="headerlink" title="对象 和 非对象 之间的比较"></a><strong>对象 和 非对象 之间的比较</strong></h3><p>规范定义:</p>
<blockquote>
<p>(1) 如果Type(x)为字符串或数字,Type(y)为对象,则返回 x == ToPrimitive(y)<br>(2) 如果Type(x)为对象,Type(y)为字符串或数字,则返回 ToPrimitive(x) == y<br><figure class="highlight plain"><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><div class="line">16</div><div class="line">17</div></pre></td><td class="code"><pre><div class="line">var a = 42</div><div class="line">var b = ['42']</div><div class="line">a == b // true</div><div class="line">var c = 'abc'</div><div class="line">var d = Object(a) // 使用封装对象进行封装</div><div class="line">c == d // true</div><div class="line">c === d // false</div><div class="line">var e = null </div><div class="line">var f = Object(e)</div><div class="line">e == f // false</div><div class="line">var g = undefined </div><div class="line">var h = Object(e)</div><div class="line">g == h // false</div><div class="line">var k = NAN </div><div class="line">var j = Object(k)</div><div class="line">k == j // false</div><div class="line">k != j // true</div></pre></td></tr></table></figure></p>
<p>null 和undefined 均不能被封装,Object(null) 得到 一个常规对象 {}<br>NaN能够被封装为数字封装对象,拆封后 NAN == NAN 为 false</p>
<h2 id="抽象关系比较"><a href="#抽象关系比较" class="headerlink" title="抽象关系比较"></a><strong>抽象关系比较</strong></h2><figure class="highlight plain"><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">st=>start: 开始比较</div><div class="line">op=>operation: 根据ToNumber规则将双方强制类型转换为数字进行比较</div><div class="line">op2=>operation: 都是字符串,按照字母顺序来比较(ASCII码)</div><div class="line">cond=>condition: 都是字符串比较</div><div class="line">e=>end</div><div class="line"></div><div class="line">st->cond</div><div class="line">cond(yes)->op2</div><div class="line">cond(no)->op</div></pre></td></tr></table></figure>
</blockquote>
<figure class="highlight plain"><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></pre></td><td class="code"><pre><div class="line">var a = [42]</div><div class="line">var b = ['43']</div><div class="line">a < b // true</div><div class="line">a > b // false</div><div class="line">var c = ['42']</div><div class="line">var d = ['043']</div><div class="line">a < b // false</div><div class="line">var e = {b:42}</div><div class="line">var f = {b:42}</div><div class="line">e < f // false</div><div class="line">e = f // false</div><div class="line">e > f // false</div><div class="line">e <= f // true 结果翻转: 因为 e>f 为 false, 所以e<=f 为true</div><div class="line">e >= f // true</div></pre></td></tr></table></figure>
</div>
<div>
</div>
<div>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
</section>
</div>
</div>
<div class="sidebar-toggle">
<div class="sidebar-toggle-line-wrap">
<span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
<span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
<span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
</div>
</div>
<aside id="sidebar" class="sidebar">
<div class="sidebar-inner">
<section class="site-overview sidebar-panel sidebar-panel-active">
<div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
<img class="site-author-image" itemprop="image"
src="/images/avatar.jpg"
alt="Machock" />
<p class="site-author-name" itemprop="name">Machock</p>
<p class="site-description motion-element" itemprop="description">JavaScript、css、html</p>
</div>
<nav class="site-state motion-element">
<div class="site-state-item site-state-posts">
<a href="/archives">
<span class="site-state-item-count">3</span>
<span class="site-state-item-name">日志</span>
</a>
</div>
<div class="site-state-item site-state-tags">
<a href="/tags">
<span class="site-state-item-count">5</span>
<span class="site-state-item-name">标签</span>
</a>
</div>
</nav>
<div class="links-of-author motion-element">
</div>
</section>
</div>
</aside>
</div>
</main>
<footer id="footer" class="footer">
<div class="footer-inner">
<div class="copyright" >
©
<span itemprop="copyrightYear">2018</span>
<span class="with-love">
<i class="fa fa-heart"></i>
</span>
<span class="author" itemprop="copyrightHolder">Machock</span>
</div>
<div class="powered-by">
由 <a class="theme-link" href="https://hexo.io">Hexo</a> 强力驱动
</div>
<div class="theme-info">
主题 -
<a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
NexT.Muse
</a>
</div>
</div>
</footer>
<div class="back-to-top">
<i class="fa fa-arrow-up"></i>
</div>
</div>
<script type="text/javascript">
if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
window.Promise = null;
}
</script>
<script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
<script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
<script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
<script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
<script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
<script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<script type="text/javascript" src="/js/src/utils.js?v=5.1.0"></script>
<script type="text/javascript" src="/js/src/motion.js?v=5.1.0"></script>
<script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.0"></script>
<script type="text/javascript">
var duoshuoQuery = {short_name:"your-duoshuo-shortname"};
(function() {
var ds = document.createElement('script');
ds.type = 'text/javascript';ds.async = true;
ds.id = 'duoshuo-script';
ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
ds.charset = 'UTF-8';
(document.getElementsByTagName('head')[0]
|| document.getElementsByTagName('body')[0]).appendChild(ds);
})();
</script>
<script src="/lib/ua-parser-js/dist/ua-parser.min.js?v=0.7.9"></script>
<script src="/js/src/hook-duoshuo.js"></script>