-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
1151 lines (664 loc) · 63.2 KB
/
index.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
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 lang="zh-CN">
<head>
<!--[if lt IE 9]>
<style>body {display: none; background: none !important} </style>
<meta http-equiv="Refresh" Content="0; url=//outdatedbrowser.com/" />
<![endif]-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no" />
<meta name="author" content="echo" />
<meta name="description" content="前端，小蜗牛，HTML5，HTML，CSS，CSS3，JS，Javascript，Node.js">
<meta property="og:type" content="website">
<meta property="og:title" content="小蜗牛">
<meta property="og:url" content="http://yoursite.com/index.html">
<meta property="og:site_name" content="小蜗牛">
<meta property="og:description" content="前端，小蜗牛，HTML5，HTML，CSS，CSS3，JS，Javascript，Node.js">
<meta property="og:locale" content="zh-CN">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="小蜗牛">
<meta name="twitter:description" content="前端，小蜗牛，HTML5，HTML，CSS，CSS3，JS，Javascript，Node.js">
<link rel="apple-touch-icon" href= "/apple-touch-icon.png">
<link rel="alternate" href="/atom.xml" title="小蜗牛" type="application/atom+xml">
<link rel="shortcut icon" href="/favicon.png">
<link href="//cdn.bootcss.com/animate.css/3.5.1/animate.min.css" rel="stylesheet">
<link href="//cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
<link href="//cdn.bootcss.com/pace/1.0.2/themes/blue/pace-theme-minimal.css" rel="stylesheet">
<link rel="stylesheet" href="/css/style.css">
<style> .article { opacity: 0;} </style>
<link href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<title>小蜗牛</title>
<script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
<script>
var yiliaConfig = {
fancybox: true,
animate: true,
isHome: true,
isPost: false,
isArchive: false,
isTag: false,
isCategory: false,
fancybox_js: "//cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.min.js",
scrollreveal: "//cdn.bootcss.com/scrollReveal.js/3.1.4/scrollreveal.min.js",
search: false
}
</script>
<script>
yiliaConfig.jquery_ui = [true, "//cdn.bootcss.com/jqueryui/1.10.4/jquery-ui.min.js", "//cdn.bootcss.com/jqueryui/1.10.4/css/jquery-ui.min.css"];
</script>
<script> yiliaConfig.rootUrl = "\/";</script>
</head>
<body>
<div id="container">
<div class="left-col">
<div class="overlay"></div>
<div class="intrude-less">
<header id="header" class="inner">
<a href="/" class="profilepic">
<img src="/avatar.png" class="animated zoomIn">
</a>
<hgroup>
<h1 class="header-author"><a href="/">echo</a></h1>
</hgroup>
<div id="switch-btn" class="switch-btn">
<div class="icon">
<div class="icon-ctn">
<div class="icon-wrap icon-house" data-idx="0">
<div class="birdhouse"></div>
<div class="birdhouse_holes"></div>
</div>
<div class="icon-wrap icon-ribbon hide" data-idx="1">
<div class="ribbon"></div>
</div>
<div class="icon-wrap icon-link hide" data-idx="2">
<div class="loopback_l"></div>
<div class="loopback_r"></div>
</div>
</div>
</div>
<div class="tips-box hide">
<div class="tips-arrow"></div>
<ul class="tips-inner">
<li>菜单</li>
<li>标签</li>
<li>友情链接</li>
</ul>
</div>
</div>
<div id="switch-area" class="switch-area">
<div class="switch-wrap">
<section class="switch-part switch-part1">
<nav class="header-menu">
<ul>
<li><a href="/">主页</a></li>
<li><a href="/archives/">所有文章</a></li>
<li><a href="/tags/">标签云</a></li>
</ul>
</nav>
<nav class="header-nav">
<ul class="social">
<a class="fa Email" href="mailto:123@123.com" title="Email"></a>
<a class="fa GitHub" href="https://github.com/prettyEcho" title="GitHub"></a>
<a class="fa 简书" href="http://www.jianshu.com/u/c9eae1a4377f" title="简书"></a>
</ul>
</nav>
</section>
<section class="switch-part switch-part2">
<div class="widget tagcloud" id="js-tagcloud">
<ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/tags/Array/">Array</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/CSS/">CSS</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/DOM/">DOM</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/ES6/">ES6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/HTML/">HTML</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Javascript/">Javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/babel/">babel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/bug/">bug</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/getter/">getter</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/javascript/">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/media/">media</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/new/">new</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/setter/">setter</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/this/">this</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/viewport/">viewport</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/webstorm/">webstorm</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/上下文/">上下文</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/内存空间/">内存空间</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/原型/">原型</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/原型链/">原型链</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/变量对象/">变量对象</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/块状元素/">块状元素</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/媒体查询/">媒体查询</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/数据类型/">数据类型</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/模块化/">模块化</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/活动对象/">活动对象</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/浏览器加载/">浏览器加载</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/浏览器解析/">浏览器解析</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/盒模型/">盒模型</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/移动端/">移动端</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/行内元素/">行内元素</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/设计思想/">设计思想</a></li></ul>
</div>
</section>
<section class="switch-part switch-part3">
<div id="js-friends">
<a class="main-nav-link switch-friends-link" href="https://hexo.io">Hexo</a>
<a class="main-nav-link switch-friends-link" href="https://pages.github.com/">GitHub</a>
<a class="main-nav-link switch-friends-link" href="http://moxfive.xyz/">MOxFIVE</a>
</div>
</section>
</div>
</div>
</header>
</div>
</div>
<div class="mid-col">
<nav id="mobile-nav">
<div class="overlay">
<div class="slider-trigger"></div>
<h1 class="header-author js-mobile-header hide"><a href="/" title="回到主页">echo</a></h1>
</div>
<div class="intrude-less">
<header id="header" class="inner">
<a href="/" class="profilepic">
<img src="/avatar.png" class="animated zoomIn">
</a>
<hgroup>
<h1 class="header-author"><a href="/" title="回到主页">echo</a></h1>
</hgroup>
<nav class="header-menu">
<ul>
<li><a href="/">主页</a></li>
<li><a href="/archives/">所有文章</a></li>
<li><a href="/tags/">标签云</a></li>
<div class="clearfix"></div>
</ul>
</nav>
<nav class="header-nav">
<ul class="social">
<a class="fa Email" target="_blank" href="mailto:123@123.com" title="Email"></a>
<a class="fa GitHub" target="_blank" href="https://github.com/prettyEcho" title="GitHub"></a>
<a class="fa 简书" target="_blank" href="http://www.jianshu.com/u/c9eae1a4377f" title="简书"></a>
</ul>
</nav>
</header>
</div>
<link class="menu-list" tags="标签" friends="友情链接" about="关于我"/>
</nav>
<div class="body-wrap">
<article id="post-浏览器到底做了什么" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2017/10/30/浏览器到底做了什么/" class="article-date">
<time datetime="2017-10-30T09:16:00.000Z" itemprop="datePublished">2017-10-30</time>
</a>
</div>
<div class="article-inner">
<input type="hidden" class="isFancy" />
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2017/10/30/浏览器到底做了什么/">浏览器到底做了什么</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h3 id="为什么要学习浏览器做了什么？"><a href="#为什么要学习浏览器做了什么？" class="headerlink" title="为什么要学习浏览器做了什么？"></a>为什么要学习浏览器做了什么？</h3><ul>
<li>了解浏览器如何进行加载，可以在引用外部样式文件，外部js时，将他们放到合适的位置，使浏览器以最快的速度将文件加载完毕。</li>
<li>可以知道什么时候绑定事件，能有效保证用户体验。</li>
</ul>
<h3 id="输入URL以后到底发生了什么？"><a href="#输入URL以后到底发生了什么？" class="headerlink" title="输入URL以后到底发生了什么？"></a>输入URL以后到底发生了什么？</h3><h3 id="浏览器的渲染过程"><a href="#浏览器的渲染过程" class="headerlink" title="浏览器的渲染过程"></a>浏览器的渲染过程</h3><p><img src="/2017/10/30/浏览器到底做了什么/render.png" alt=""></p>
<p>我的理解是：</p>
<blockquote>
<p>1.浏览器拿到html文档，采用”自上而下，从左到右”方式进行加载、解析和渲染。<br>2.浏览器先从上解析HTML成DOM树。<br>3.呦，遇到了style标签开始解析CSS成CSSOM；遇到了link标签，去下载相应的css文件，一旦下载完，就进行解析。而此时浏览器不会停下会继续往下解析HTML。<br>4.突然遇到img请求标签，浏览器会请求下载图片，然后继续解析HTML。<br>5.图片加载完成，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码。<br>6.走着走着又遇到了script标签，遇到Boss了，赶紧停下来，先处理它。<br>7.如果js中的代码改变了DOM树的结构，那么就会重新构建、渲染改变的那一部分（reflow），如果影响到样式，却没影响到布局,那么重新渲染受影响的那部分（repaint）。<br>8.迎来<／html>,终于看到了希望，可以休息了。。。</p>
</blockquote>
<p><strong>特别注意：浏览器的上述四个过程是针对从上到下每一小块，而不是针对真个HTML。</strong>（迷惑了我好久）</p>
<blockquote>
<p>几个概念：<br>1.Reflow（回流）：浏览器要花时间去渲染，当它发现了某个部分发生了变化影响了布局，那就需要倒回去重新渲染。<br>2.Repaint（重绘）：如果只是改变了某个元素的背景颜色，文字颜色等，不影响元素周围或内部布局的属性，将只会引起浏览器的repaint，重画某一部分。<br>Reflow要比Repaint更花费时间，也就更影响性能。所以在写代码的时候，要尽量避免过多的Reflow。</p>
<p>减少 reflow/repaint<br>1.尽量减少在js中一条一条修改样式，如果可以的话，先写好class，再去修改className.<br>2.减少使用table布局，因为一个小的改动可能会影响整个table回流。</p>
</blockquote>
<p><a href="http://taligarsiel.com/Projects/howbrowserswork1.htm" target="_blank" rel="external">how browsers work</a><br><a href="http://kb.cnblogs.com/page/129756/" target="_blank" rel="external">中文版</a></p>
</div>
<div class="article-info article-info-index">
<div class="article-category tagcloud">
<a class="article-category-link" href="/categories/前端/">前端</a>
</div>
<div class="article-tag tagcloud">
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/浏览器加载/">浏览器加载</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/浏览器解析/">浏览器解析</a></li></ul>
</div>
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="post-媒体查询" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2017/10/27/媒体查询/" class="article-date">
<time datetime="2017-10-27T10:41:00.000Z" itemprop="datePublished">2017-10-27</time>
</a>
</div>
<div class="article-inner">
<input type="hidden" class="isFancy" />
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2017/10/27/媒体查询/">媒体查询</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h2 id="Media"><a href="#Media" class="headerlink" title="Media"></a>Media</h2><h3 id="引入方式"><a href="#引入方式" class="headerlink" title="引入方式"></a>引入方式</h3><ul>
<li>link方式引入</li>
</ul>
<p><code><link rel="stylesheet" type="text/css" href="./style.css" media="print"></code></p>
<ul>
<li>@import导入方式</li>
</ul>
<p>在样式文件里调用另一个样式文件：</p>
<p><code>@import url(../style.css) screen;</code></p>
<p>在<head></head>的<style></style>调用：</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></pre></td><td class="code"><pre><div class="line"><head></div><div class="line"> <style type="text/css"></div><div class="line"> @import url("../style.css") screen;</div><div class="line"> </style></div><div class="line"></head></div></pre></td></tr></table></figure>
<ul>
<li>@media引用</li>
</ul>
<p>在样式文件里调用另一个样式文件：</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></pre></td><td class="code"><pre><div class="line">@media screen {</div><div class="line"> selector: {</div><div class="line"> key: value</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
<p>在<head></head>的<style></style>调用：</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></pre></td><td class="code"><pre><div class="line"><head></div><div class="line"> <style type="text/css"></div><div class="line"> @media screen {</div><div class="line"> selector: {</div><div class="line"> key: value</div><div class="line"> }</div><div class="line"> }</div><div class="line"> </style></div><div class="line"></head></div></pre></td></tr></table></figure>
<h3 id="媒体特性"><a href="#媒体特性" class="headerlink" title="媒体特性"></a>媒体特性</h3><p><img src="/2017/10/27/媒体查询/media.png" alt=""></p>
</div>
<div class="article-info article-info-index">
<div class="article-category tagcloud">
<a class="article-category-link" href="/categories/前端/">前端</a>
</div>
<div class="article-tag tagcloud">
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/media/">media</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/媒体查询/">媒体查询</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/移动端/">移动端</a></li></ul>
</div>
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="post-移动端常见bug" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2017/10/27/移动端常见bug/" class="article-date">
<time datetime="2017-10-27T10:18:00.000Z" itemprop="datePublished">2017-10-27</time>
</a>
</div>
<div class="article-inner">
<input type="hidden" class="isFancy" />
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2017/10/27/移动端常见bug/">移动端常见bug</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h3 id="a标签点击阴影"><a href="#a标签点击阴影" class="headerlink" title="a标签点击阴影"></a>a标签点击阴影</h3><p><code>a,input,button{ -webkit-tab-highlight-color: *** }</code></p>
<h3 id="清除苹果下按钮圆角"><a href="#清除苹果下按钮圆角" class="headerlink" title="清除苹果下按钮圆角"></a>清除苹果下按钮圆角</h3><p><code>input,button{ -webkit-appearance: none, border-radius: 0}</code></p>
<h3 id="规定移动端通用英文字体"><a href="#规定移动端通用英文字体" class="headerlink" title="规定移动端通用英文字体"></a>规定移动端通用英文字体</h3><p><code>body * { font-family: Helvetica }</code></p>
<h3 id="移动端用户更改字体设置"><a href="#移动端用户更改字体设置" class="headerlink" title="移动端用户更改字体设置"></a>移动端用户更改字体设置</h3><p><code>body{ -webkit-text-size-adjust: 100% }</code></p>
</div>
<div class="article-info article-info-index">
<div class="article-category tagcloud">
<a class="article-category-link" href="/categories/前端/">前端</a>
</div>
<div class="article-tag tagcloud">
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/bug/">bug</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/移动端/">移动端</a></li></ul>
</div>
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="post-viewport" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2017/10/27/viewport/" class="article-date">
<time datetime="2017-10-27T06:26:00.000Z" itemprop="datePublished">2017-10-27</time>
</a>
</div>
<div class="article-inner">
<input type="hidden" class="isFancy" />
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2017/10/27/viewport/">移动端常见配置</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><meata name="viewport" content="width = device-width, user-scalable = no, initial-scaling = 1.0, minimum-scale = 1.0, maximum-scale = 1.0"></div></pre></td></tr></table></figure>
<h3 id="viewport"><a href="#viewport" class="headerlink" title="viewport"></a>viewport</h3><p>视口（可视区宽度）,默认不设置可视区宽度，一般移动端的可视区宽度为980px</p>
<blockquote>
<p>width: 可视区的宽度（number || device-width）<br>user-scalable: 是否点击可以缩放（yes || no）（ios10失效，三星自带浏览器实效）。<br>initial-scale: 可视区缩放比例<br>minimun-scale: 可视区最小缩放比例<br>maximum-scale: 可视区最大缩放比例</p>
</blockquote>
<h3 id="devicePiexlRadio"><a href="#devicePiexlRadio" class="headerlink" title="devicePiexlRadio"></a>devicePiexlRadio</h3><blockquote>
<p>像素比：一个像素放大像素比倍被显示<br>分辨率 = 像素比 * 当前屏幕宽度</p>
</blockquote>
<h3 id="x5浏览器强制横屏或者竖屏显示"><a href="#x5浏览器强制横屏或者竖屏显示" class="headerlink" title="x5浏览器强制横屏或者竖屏显示"></a>x5浏览器强制横屏或者竖屏显示</h3><p><code><meta name="x5-orientation" content="portrait || landscape></code></p>
<h3 id="x5浏览器设置全屏"><a href="#x5浏览器设置全屏" class="headerlink" title="x5浏览器设置全屏"></a>x5浏览器设置全屏</h3><p><code><meta name="x5-fullscreen" content="true"></code></p>
<h3 id="UC强制横屏或者竖屏"><a href="#UC强制横屏或者竖屏" class="headerlink" title="UC强制横屏或者竖屏"></a>UC强制横屏或者竖屏</h3><p><code><meta name="screen-orientation" content="portrait || lanscape></code></p>
<h3 id="UC全屏显示"><a href="#UC全屏显示" class="headerlink" title="UC全屏显示"></a>UC全屏显示</h3><p><code><meta name="full-screen" content="yes"></code></p>
<h3 id="禁止拨打号码或者发送邮箱号码"><a href="#禁止拨打号码或者发送邮箱号码" class="headerlink" title="禁止拨打号码或者发送邮箱号码"></a>禁止拨打号码或者发送邮箱号码</h3><p><code><meta name="format-detection" content="telephone = no, email = no"></code></p>
<h3 id="拨打电话或者发送邮箱号码"><a href="#拨打电话或者发送邮箱号码" class="headerlink" title="拨打电话或者发送邮箱号码"></a>拨打电话或者发送邮箱号码</h3><p><code><a href="tel:***">***</a></code><br><code><a href="mail:***">***</a></code></p>
</div>
<div class="article-info article-info-index">
<div class="article-category tagcloud">
<a class="article-category-link" href="/categories/前端/">前端</a>
</div>
<div class="article-tag tagcloud">
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/viewport/">viewport</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/移动端/">移动端</a></li></ul>
</div>
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="post-基本数据类型" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2017/10/24/基本数据类型/" class="article-date">
<time datetime="2017-10-24T04:20:00.000Z" itemprop="datePublished">2017-10-24</time>
</a>
</div>
<div class="article-inner">
<input type="hidden" class="isFancy" />
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2017/10/24/基本数据类型/">基本数据类型</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h3 id="标识符"><a href="#标识符" class="headerlink" title="标识符"></a>标识符</h3><p>标识符就是变量、对象、属性的名字。</p>
<h3 id="标识符规范"><a href="#标识符规范" class="headerlink" title="标识符规范"></a>标识符规范</h3><ul>
<li>第一个字符必须是字母、下划线或美元符$</li>
<li>其他字符可以是字母、数字、下划线或美元符$</li>
<li>不能把关键字、保留字、true、false、null、Infinity、NaN、Undefined用做标识符</li>
</ul>
<h3 id="数据类型"><a href="#数据类型" class="headerlink" title="数据类型"></a>数据类型</h3><ul>
<li>数字（Number）：整数和小数</li>
<li>字符串（String）: 字符组成的文本</li>
<li>布尔值（Boolean）: true和false</li>
<li>undefined ： 表示“未定义”或不存在，即由于目前没有定义，所以此处暂时没有任何值</li>
<li>null ：表示无值，即此处的值就是“无”的状态。</li>
<li>对象（Object）: 各种值的集合</li>
<li>Symbol ：</li>
</ul>
<blockquote>
<p>通常，我们将数值、字符串、布尔值称为原始类型（primitive type）的值，即它们是最基本的数据类型，不能再细分了。而将对象称为合成类型（complex type）的值，因为一个对象往往是多个原始类型的值的合成，可以看作是一个存放各种值的容器。至于undefined和null，一般将它们看成两个特殊值。</p>
</blockquote>
<p><em>对象分为：基本对象({})、数组、函数</em><br><strong>JS对象可分为狭义对象（{}）、广义对象（JS将一切都视为对象）</strong></p>
<h3 id="判断类型"><a href="#判断类型" class="headerlink" title="判断类型"></a>判断类型</h3><p>判断到底是什么类型，有三种方法：</p>
<ul>
<li>typeof运算符</li>
<li>instanceof运算符</li>
<li>Object.prototype.toString方法</li>
</ul>
<ol>
<li>typeof运算符</li>
</ol>
<ul>
<li><p>原始类型<br>字符串、数字、布尔值分别返回string、number、boolean<br><code>typeof 123; // number</code><br><code>typeof '123'; // string</code><br><code>typeof true; // boolean</code></p>
</li>
<li><p>对象</p>
<p>函数、基本对象、数组分别返回 function、object、object<br><code>typeof function(){}; // function</code><br><code>typeof {}; // object</code><br><code>typeof []; // object</code></p>
</li>
<li><p>undefinded</p>
<p><code>typeof undefined; // undefined</code></p>
<p><strong>可用于检测一个未定义的变量而不报错</strong></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></pre></td><td class="code"><pre><div class="line">>v</div><div class="line">// ReferenceError: v is not defined</div><div class="line">typeof v</div><div class="line">// "undefined"</div><div class="line"></div><div class="line">>// 错误的写法</div><div class="line">if (v) {</div><div class="line"> // ...</div><div class="line">}</div><div class="line">// ReferenceError: v is not defined</div><div class="line">// 正确的写法</div><div class="line">if (typeof v === "undefined") {</div><div class="line"> // ...</div><div class="line">}</div></pre></td></tr></table></figure>
</li>
</ul>
<ul>
<li><p>null</p>
<p><code>typeof null; // object</code></p>
</li>
<li><p>window<br>在浏览器环境下： <code>typeof window; // object</code><br>在其他环境下： <code>typeof window; // undefined</code></p>
</li>
</ul>
<h3 id="instanceof-运算符"><a href="#instanceof-运算符" class="headerlink" title="instanceof 运算符"></a>instanceof 运算符</h3><p>后续待写</p>
<h3 id="Object-prototype-toString"><a href="#Object-prototype-toString" class="headerlink" title="Object.prototype.toString"></a>Object.prototype.toString</h3><p>后续待写</p>
<h3 id="undefined"><a href="#undefined" class="headerlink" title="undefined"></a>undefined</h3><p>undefined类型的值就一个：undefined。表示还未定义。</p>
<ul>
<li>应用场景</li>
</ul>
<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">>// 变量声明了，但没有赋值</div><div class="line">var i;</div><div class="line">i // undefined</div><div class="line">// 调用函数时，应该提供的参数没有提供，该参数等于undefined</div><div class="line">function f(x) {</div><div class="line"> return x;</div><div class="line">}</div><div class="line">f() // undefined</div><div class="line">// 对象没有赋值的属性</div><div class="line">var o = new Object();</div><div class="line">o.p // undefined</div><div class="line">// 函数没有返回值时，默认返回undefined</div><div class="line">function f() {}</div><div class="line">f() // undefined</div></pre></td></tr></table></figure>
<ul>
<li>转化为数字类型</li>
</ul>
<p><code>Number(undefined); // NaN</code></p>
<h3 id="null"><a href="#null" class="headerlink" title="null"></a>null</h3><p>null类型的值也就一个：null。表示一个空对象指针，也代表一中“无”的状态，将来可能被赋予任何值。</p>
<h3 id="应用场景"><a href="#应用场景" class="headerlink" title="应用场景"></a>应用场景</h3><blockquote>
<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 obj = null;</div><div class="line">obj = [1];</div></pre></td></tr></table></figure></p>
</blockquote>
<h3 id="转化为数字类型"><a href="#转化为数字类型" class="headerlink" title="转化为数字类型"></a>转化为数字类型</h3><p><code>Number(null); // 0</code></p>
<h3 id="null和undefined是否相等"><a href="#null和undefined是否相等" class="headerlink" title="null和undefined是否相等"></a>null和undefined是否相等</h3><p><code>null == undefined; // true</code><br><code>null === undefined; // false</code></p>
<h3 id="boolean"><a href="#boolean" class="headerlink" title="boolean"></a>boolean</h3><p>boolean有两种状态：真(true)、假(false)。严格区分大小写。<br>如果JavaScript预期某个位置应该是布尔值，会将该位置上现有的值自动转为布尔值。转换规则是除了下面六个值被转为false，其他值都视为true。</p>
<ul>
<li>undefined </li>
<li>null </li>
<li>0</li>
<li>NaN</li>
<li>false</li>
<li>‘ ‘ 和 “ “</li>
</ul>
</div>
<div class="article-info article-info-index">
<div class="article-category tagcloud">
<a class="article-category-link" href="/categories/前端/">前端</a>
</div>
<div class="article-tag tagcloud">
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/Javascript/">Javascript</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/数据类型/">数据类型</a></li></ul>
</div>
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="post-内存空间和上下文" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2017/10/24/内存空间和上下文/" class="article-date">
<time datetime="2017-10-24T04:16:00.000Z" itemprop="datePublished">2017-10-24</time>
</a>
</div>
<div class="article-inner">
<input type="hidden" class="isFancy" />
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2017/10/24/内存空间和上下文/">内存空间和上下文</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h2 id="堆与栈"><a href="#堆与栈" class="headerlink" title="堆与栈"></a>堆与栈</h2><p>堆，就像书架，你想找到什么书，只需要知道书名就可以了。<br>栈，先进后出，后进先出。</p>
<h2 id="执行上下文"><a href="#执行上下文" class="headerlink" title="执行上下文"></a>执行上下文</h2><p>执行上下文存在于栈（函数调用栈）里面，最下面的永远是全局上下文，当函数被调用时，该函数上下文就会入栈，当函数执行完成时，函数上下文就会出栈。</p>
<h3 id="单线程"><a href="#单线程" class="headerlink" title="单线程"></a>单线程</h3><p>当前js执行的永远是处于栈顶的上下文，下面的上下文只有等待。</p>
<h3 id="同步执行"><a href="#同步执行" class="headerlink" title="同步执行"></a>同步执行</h3><p>当前js执行的永远是处于栈顶的上下文，下面的上下文只有等待。</p>
<h3 id="全局上下文只有一个，它在浏览器关闭时出栈。"><a href="#全局上下文只有一个，它在浏览器关闭时出栈。" class="headerlink" title="全局上下文只有一个，它在浏览器关闭时出栈。"></a>全局上下文只有一个，它在浏览器关闭时出栈。</h3><h2 id="变量对象"><a href="#变量对象" class="headerlink" title="变量对象"></a>变量对象</h2><p>变量对象存在于当前执行上下文中，我们简单的可以理解为它存在于栈里面。<br>基础数据类型（undefined,null,String,Number,Boolean）直接存在于变量对象中，改变时，直接操纵它的值。<br>引用数据类型在变量对象中存在的时指针（地址），对象实际存在堆中，我们操控对象实际在操控其指针。</p>
<h3 id="垃圾回收机制"><a href="#垃圾回收机制" class="headerlink" title="垃圾回收机制"></a>垃圾回收机制</h3><p>当函数上下文出栈时，垃圾回收机制会回收其中的变量。全局的变量不会被清除，直到浏览器关闭，可以手动给变量赋值为null,使其被回收。</p>
</div>
<div class="article-info article-info-index">
<div class="article-category tagcloud">
<a class="article-category-link" href="/categories/前端/">前端</a>
</div>
<div class="article-tag tagcloud">
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/Javascript/">Javascript</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/上下文/">上下文</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/内存空间/">内存空间</a></li></ul>
</div>
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="post-getter-and-setter" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2017/10/24/getter-and-setter/" class="article-date">
<time datetime="2017-10-24T04:11:00.000Z" itemprop="datePublished">2017-10-24</time>
</a>
</div>
<div class="article-inner">
<input type="hidden" class="isFancy" />
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2017/10/24/getter-and-setter/">getter and setter</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h2 id="定义getter和setter的方法"><a href="#定义getter和setter的方法" class="headerlink" title="定义getter和setter的方法"></a>定义getter和setter的方法</h2><h3 id="通过对象初始化器在创建对象的时候指明"><a href="#通过对象初始化器在创建对象的时候指明" class="headerlink" title="通过对象初始化器在创建对象的时候指明"></a>通过对象初始化器在创建对象的时候指明</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><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">(function(){</div><div class="line"> var o = {</div><div class="line"> a: 3,</div><div class="line"> get b(){ return a + 1},</div><div class="line"> set c(x) { this.a = x/2 }</div><div class="line"> }</div><div class="line"> console.log(o.a); //3</div><div class="line"> console.log(o.b); //4</div><div class="line"> o.c = 50;`</div><div class="line"> console.log(o.c); //25</div><div class="line">})();</div></pre></td></tr></table></figure>
<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></pre></td><td class="code"><pre><div class="line">(function () {</div><div class="line"> var b = "bb";</div><div class="line"> var c = "cc";</div><div class="line"> var o = {</div><div class="line"> a : 7,</div><div class="line"> get [b](){return this.a +1;},</div><div class="line"> set [c](x){this.a = x/2},</div><div class="line"> };</div><div class="line"> console.log(o.a);</div><div class="line"> console.log(o[b]);</div><div class="line"> o["cc"] = 50;</div><div class="line"> console.log(o.a);</div><div class="line">})();</div></pre></td></tr></table></figure>
<h3 id="Object-create"><a href="#Object-create" class="headerlink" title="Object.create()"></a>Object.create()</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><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></pre></td><td class="code"><pre><div class="line">(function () {</div><div class="line"> var o = null;</div><div class="line"> o = Object.create(Object.prototype,//指定原型为 Object.prototype</div><div class="line"> {</div><div class="line"> bar:{</div><div class="line"> get :function(){</div><div class="line"> return this.a;</div><div class="line"> },</div><div class="line"> set : function (val) {</div><div class="line"> console.log("Setting `o.bar` to ",val);</div><div class="line"> this.a = val;</div><div class="line"> },</div><div class="line"> configurable :true</div><div class="line"> }</div><div class="line"> }//第二个参数</div><div class="line"> );</div><div class="line"> o.a = 10;</div><div class="line"> console.log(o.bar);</div><div class="line"> o.bar = 12;</div><div class="line"> console.log(o.bar);</div><div class="line">})();</div></pre></td></tr></table></figure>
<h3 id="使用-Object-defineProperty-方法"><a href="#使用-Object-defineProperty-方法" class="headerlink" title="使用 Object.defineProperty 方法"></a>使用 Object.defineProperty 方法</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><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">(function () {</div><div class="line"> var o = { a : 1}//声明一个对象,包含一个 a 属性,值为1</div><div class="line"> Object.defineProperty(o,"b",{</div><div class="line"> get: function () {</div><div class="line"> return this.a;</div><div class="line"> },</div><div class="line"> set : function (val) {</div><div class="line"> this.a = val;</div><div class="line"> },</div><div class="line"> configurable : true</div><div class="line"> });</div><div class="line"></div><div class="line"> console.log(o.b);</div><div class="line"> o.b = 2;</div><div class="line"> console.log(o.b);</div><div class="line">})();</div></pre></td></tr></table></figure>
<h3 id="使用-Object-defineProperties方法"><a href="#使用-Object-defineProperties方法" class="headerlink" title="使用 Object.defineProperties方法"></a>使用 Object.defineProperties方法</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><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">(function () {</div><div class="line"> var obj = {a:1,b:"string"};</div><div class="line"> Object.defineProperties(obj,{</div><div class="line"> "A":{</div><div class="line"> get:function(){return this.a+1;},</div><div class="line"> set:function(val){this.a = val;}</div><div class="line"> },</div><div class="line"> "B":{</div><div class="line"> get:function(){return this.b+2;},</div><div class="line"> set:function(val){this.b = val}</div><div class="line"> }</div><div class="line"> });</div><div class="line"></div><div class="line"> console.log(obj.A);</div><div class="line"> console.log(obj.B);</div><div class="line"> obj.A = 3;</div><div class="line"> obj.B = "hello";</div><div class="line"> console.log(obj.A);</div><div class="line"> console.log(obj.B);</div><div class="line">})();</div></pre></td></tr></table></figure>
<h2 id="属性描述符"><a href="#属性描述符" class="headerlink" title="属性描述符"></a>属性描述符</h2><p>对象里目前存在的属性描述符有两种主要形式：数据描述符和存取描述符。<br>数据描述符和存取描述符均具有以下可选键值：</p>
<p>configurable<br> 当且仅当这个属性描述符值为 true 时，该属性可能会改变，也可能会被从相应的对象删除。默认为 false。<br>enumerable<br> true 当且仅当该属性出现在相应的对象枚举属性中。默认为 false。<br>数据描述符同时具有以下可选键值：</p>
<p>value<br> 与属性相关的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。默认为 undefined。<br>writable<br> true 当且仅当可能用 赋值运算符 改变与属性相关的值。默认为 false。</p>
<p>存取描述符同时具有以下可选键值：get and set</p>
</div>
<div class="article-info article-info-index">
<div class="article-category tagcloud">
<a class="article-category-link" href="/categories/前端/">前端</a>
</div>
<div class="article-tag tagcloud">
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/Javascript/">Javascript</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/getter/">getter</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/setter/">setter</a></li></ul>
</div>
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="post-this指向问题" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2017/10/24/this指向问题/" class="article-date">
<time datetime="2017-10-24T04:09:00.000Z" itemprop="datePublished">2017-10-24</time>
</a>
</div>
<div class="article-inner">
<input type="hidden" class="isFancy" />
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2017/10/24/this指向问题/">this指向问题</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<ul>
<li>this指向是在函数被调用时确定的。</li>
<li>全局对象中的this：指向window</li>
<li>函数中的this:</li>
</ul>
<p><img src="http://upload-images.jianshu.io/upload_images/4740670-49f32fb0d39f4f5c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="this指向.png"></p>
</div>
<div class="article-info article-info-index">
<div class="article-category tagcloud">
<a class="article-category-link" href="/categories/前端/">前端</a>
</div>
<div class="article-tag tagcloud">
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/Javascript/">Javascript</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/this/">this</a></li></ul>
</div>
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="post-说说new" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2017/10/24/说说new/" class="article-date">
<time datetime="2017-10-24T04:07:00.000Z" itemprop="datePublished">2017-10-24</time>
</a>
</div>
<div class="article-inner">
<input type="hidden" class="isFancy" />
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2017/10/24/说说new/">说说new</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h3 id="具体做了什么"><a href="#具体做了什么" class="headerlink" title="具体做了什么"></a>具体做了什么</h3><p>1.新建一个对象<br>2.把该对象的<strong>proto</strong>指向构造器函数的原型<br>3.将该对象赋值给构造器函数的this<br>4.执行构造器函数</p>
<h3 id="如何实现"><a href="#如何实现" class="headerlink" title="如何实现"></a>如何实现</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><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">const _new = function(){</div><div class="line"> //把参数转化为数组</div><div class="line"> let arg = [].slice.call(arguments);</div><div class="line"></div><div class="line"> //取出构造器函数</div><div class="line"> let constructor = arg.shift();</div><div class="line"></div><div class="line"> //创建对象，并把__proto__指向构造器函数</div><div class="line"> let context = Object.create(constructor.prototype);</div><div class="line"></div><div class="line"> //把该对象this指向构造器函数</div><div class="line"> let result = constructor.apply(context, arg);</div><div class="line"> </div><div class="line"> //如何result是一个对象并且不为null，则返回该对象；否则，返回this对象</div><div class="line"> return (typeof result === "object" && result !== null) ? result : context ;</div><div class="line"></div><div class="line">};</div></pre></td></tr></table></figure>
</div>
<div class="article-info article-info-index">
<div class="article-category tagcloud">
<a class="article-category-link" href="/categories/前端/">前端</a>
</div>
<div class="article-tag tagcloud">
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/Javascript/">Javascript</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/new/">new</a></li></ul>
</div>
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="post-JS原型的理解过程" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2017/10/24/JS原型的理解过程/" class="article-date">
<time datetime="2017-10-24T03:54:00.000Z" itemprop="datePublished">2017-10-24</time>
</a>
</div>
<div class="article-inner">
<input type="hidden" class="isFancy" />
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2017/10/24/JS原型的理解过程/">JS原型的理解过程</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h3 id="JS中对象的从属关系"><a href="#JS中对象的从属关系" class="headerlink" title="JS中对象的从属关系"></a>JS中对象的从属关系</h3><p>JS必须在宿主环境中才能正常运行，而宿主环境一般都会为其提供一个全局对象。<br>web浏览器为JS提供的全局对象是window，所以JS中一切的对象和变量都是window的属性。<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 = 1; </div><div class="line">console.log( a ); //1</div><div class="line">console.log(window.a); //1</div><div class="line">console.log(this.a); //1</div></pre></td></tr></table></figure></p>
<h3 id="构造函数和new"><a href="#构造函数和new" class="headerlink" title="构造函数和new"></a>构造函数和new</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">function a(){</div><div class="line"> this.name = 'echo'; //or name = 'echo';</div><div class="line">}</div><div class="line">a();</div><div class="line">console.log(name); // echo</div><div class="line">console.log(window.name);//echo</div></pre></td></tr></table></figure></p>
<p>构造函数里面的东东都是window对象下的属性。这下明白为什么在构造函数里定义的变量如果不用var const let的话，该变量就是全局变量了吧，很神奇吧，这还不算神奇，神奇的还在后面。</p>
<p>让我们继续看吧。</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></pre></td><td class="code"><pre><div class="line">function a(){</div><div class="line"> this.name = 'echo';</div><div class="line">}</div><div class="line">var aa = a();</div><div class="line">console.log(aa.name); //报错</div><div class="line">console.log(name); // echo</div><div class="line">console.log(typeof aa); // undefined</div></pre></td></tr></table></figure>
<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 a(){</div><div class="line"> this.name = 'echo';</div><div class="line">}</div><div class="line">var aa = new a();</div><div class="line">console.log(aa.name); //echo</div><div class="line">console.log(name); // echo</div><div class="line">console.log(typeof aa); // object</div></pre></td></tr></table></figure>
<p>以上代码我们可以看出new操作符在里面没干好事，具体干了什么呢？解释一下：<br>创建一个新对象 > 把构造函数里面的this指向该对象 > 执行函数，给该对象赋予属性和方法 > 返回对象</p>