-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
2438 lines (1124 loc) · 174 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 class="theme-next mist 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 name="theme-color" content="#222">
<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="/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.3" rel="stylesheet" type="text/css" />
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.3">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png?v=5.1.3">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png?v=5.1.3">
<link rel="mask-icon" href="/images/logo.svg?v=5.1.3" color="#222">
<meta name="keywords" content="Hexo, NexT" />
<meta name="description" content="Stay hungry Stay foolish">
<meta property="og:type" content="website">
<meta property="og:title" content="valar morghulis">
<meta property="og:url" content="http://yoursite.com/index.html">
<meta property="og:site_name" content="valar morghulis">
<meta property="og:description" content="Stay hungry Stay foolish">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="valar morghulis">
<meta name="twitter:description" content="Stay hungry Stay foolish">
<script type="text/javascript" id="hexo.configurations">
var NexT = window.NexT || {};
var CONFIG = {
root: '/',
scheme: 'Mist',
version: '5.1.3',
sidebar: {"position":"left","display":"always","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
fancybox: true,
tabs: true,
motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
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="http://yoursite.com/"/>
<title>valar morghulis</title>
</head>
<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">
<div class="container 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">valar morghulis</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-tags">
<a href="/tags/" rel="section">
<i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
标签
</a>
</li>
<li class="menu-item menu-item-categories">
<a href="/categories/" rel="section">
<i class="menu-item-icon fa fa-fw fa-th"></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>
</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">
<div class="post-block">
<link itemprop="mainEntityOfPage" href="http://yoursite.com/2018/03/25/JavaScript-作用域和作用域链学习/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="杨晨昊">
<meta itemprop="description" content="">
<meta itemprop="image" content="/uploads/avatar.jpg">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="valar morghulis">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2018/03/25/JavaScript-作用域和作用域链学习/" 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-03-25T15:54:52+08:00">
2018-03-25
</time>
</span>
<span class="post-category" >
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-folder-o"></i>
</span>
<span class="post-meta-item-text">分类于</span>
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
<a href="/categories/JavaScript/" itemprop="url" rel="index">
<span itemprop="name">JavaScript</span>
</a>
</span>
</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/03/25/JavaScript-作用域和作用域链学习/#comments" itemprop="discussionUrl">
<span class="post-comments-count ds-thread-count" data-thread-key="2018/03/25/JavaScript-作用域和作用域链学习/" itemprop="commentCount"></span>
</a>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<p>作用域<br>一个变量的作用域是程序源代码中定义这个变量的区域。<br>而在ES5中只分为全局作用域和函数作用域，也就是说for,if,while等语句是不会创建作用域的。ES6(let,const)除外。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"> <span class="comment">//全局作用域</span></span><br><span class="line"><span class="keyword">var</span> a = <span class="number">123</span>;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">aa</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="comment">//局部作用域</span></span><br><span class="line"> <span class="keyword">var</span> b = <span class="number">456</span>; </span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>声明提前<br>JavaScript函数里声明的所有变量（但不涉及赋值）都被“提升”至函数体的顶部，在代码开始运行之前。这个特性被称为声明提前。</p>
<pre><code>var a = "g";
function f() {
console.log(a); //输出undefined
var a = "l";
console.log(a); //输出"l"
}
</code></pre><p>由于函数作用域的特性，局部变量在整个函数体始终是有定义的，也就是说，函数体的局部变量覆盖了同名全局变量。在函数体内，变量a被“提前”了，提前至函数体的顶部，所以第一次输出的是undefined，那时候还没赋值，但代码执行到var语句时候，局部变量才会被赋值。因此第二次输出则是“l”。此代码过程如下：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"> <span class="keyword">var</span> a = <span class="string">"g"</span>;</span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">f</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> a; </span><br><span class="line"> <span class="built_in">console</span>.log(a); <span class="comment">//输出undefined</span></span><br><span class="line"> a = <span class="string">"l"</span>;</span><br><span class="line"> <span class="built_in">console</span>.log(a); <span class="comment">//输出"l"</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>因此一些程序员特意将变量声明放在函数体的顶部，而不是将声明靠近放在使用变量之处。</p>
<p>作用域链<br>先看一段简单代码，代码如下：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> name = <span class="string">"wythe"</span>;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">one</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(name); <span class="comment">//wythe</span></span><br><span class="line"> <span class="keyword">var</span> firend = <span class="string">"zero"</span>;</span><br><span class="line">}</span><br><span class="line">one();</span><br><span class="line"><span class="built_in">console</span>.log(firend); <span class="comment">//报错</span></span><br></pre></td></tr></table></figure>
<p>看到代码可知，name是在全局作用域中声明的全局变量，而firend则是在函数作用域中声明的局部变量。在执行时候你会发现函数作用域能够访问到在全局作用域中name这个变量，而全局作用域却不能访问到函数作用域的friend的变量，原因是作用域链!<br>作用域链的规则：<br>外部不能访问内部变量，内部可以访问外部变量<br>为什么会有这样规则？因为是执行环境所规定的。</p>
<p>执行环境定义了变量或函数有权访问其他数据，决定了它们的行为。每个执行环境都有一个与之关联的变量对象(variable object),环境中定义的所有变量和函数都保存在这个对象中。<br>全局执行环境是最外围的一个执行环境。在Web浏览器中，全局执行环境被认为是window对象。某个执行环境中所有所有代码执行完毕后，该环境被销毁，保存在其中的所有的变量和函数定义也随之销毁。</p>
<p>补充说明：需要了解一些概念，变量对象(Variable Object)、活动对象(Activation Object)、函数的属性[[scope]].</p>
<p>变量对象指的是变量对象(缩写为VO)是一个与执行上下文相关的特殊对象，它存储着在上下文中声明的内容有：变量 (var, 变量声明)、函数声明和函数的形参。</p>
<p>执行上下文(执行环境)：每次当控制器转到ECMAScript可执行代码的时候，即会进入到一个执行上下文。执行上下文(简称-EC)是ECMA-262标准里的一个抽象概念，用于同可执行代码(executable code)概念进行区分。<br>活动对象指的是由函数的运行期上下文(代码执行前)创建，在运行时可变，初始时只有 arguments 属性，通过变量的初始化，包含了局部变量、命名参数、 this 等。</p>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</div>
</article>
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
<div class="post-block">
<link itemprop="mainEntityOfPage" href="http://yoursite.com/2018/03/22/JS中关于if-xx-和-a-b/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="杨晨昊">
<meta itemprop="description" content="">
<meta itemprop="image" content="/uploads/avatar.jpg">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="valar morghulis">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2018/03/22/JS中关于if-xx-和-a-b/" itemprop="url">JS中关于if(xx)和 a==b</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-03-22T22:35:51+08:00">
2018-03-22
</time>
</span>
<span class="post-category" >
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-folder-o"></i>
</span>
<span class="post-meta-item-text">分类于</span>
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
<a href="/categories/JavaScript/" itemprop="url" rel="index">
<span itemprop="name">JavaScript</span>
</a>
</span>
</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/03/22/JS中关于if-xx-和-a-b/#comments" itemprop="discussionUrl">
<span class="post-comments-count ds-thread-count" data-thread-key="2018/03/22/JS中关于if-xx-和-a-b/" itemprop="commentCount"></span>
</a>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<p>if判断</p>
<p>在js中一般不使用if(变量)的方式使用if条件语句，容易产生你所不希望的结果，<br>先来看看如下的代码</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span> (<span class="string">"hello"</span>) {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"hello"</span>)</span><br><span class="line">}<span class="comment">//1</span></span><br><span class="line"><span class="keyword">if</span> (<span class="string">""</span>) {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'empty'</span>)</span><br><span class="line">}<span class="comment">//2</span></span><br><span class="line"><span class="keyword">if</span> (<span class="string">" "</span>) {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'blank'</span>)</span><br><span class="line">}<span class="comment">//3</span></span><br><span class="line">看了上面三个<span class="keyword">if</span>语句，你能准确得出结果吗？</span><br><span class="line">来看第一个，<span class="keyword">if</span>(<span class="string">'hello'</span>)和<span class="keyword">if</span>(<span class="string">" "</span>)和<span class="keyword">if</span>从直观上应该是输出结果，<span class="keyword">if</span>(<span class="string">""</span>)应该是不输出结果的，经过测试的却如此。那么再看下面的代码</span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span> ([<span class="number">0</span>]) {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'array'</span>)</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span>(<span class="string">'0.00'</span>){</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'0.00'</span>)</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>这里就比较模糊了，按理说还是输出结果的，但是没有特别确定，经过测试都输除了结果。</p>
<p>那么上面的if是按照什么原理的呢?<br>js是把括号里面的变量转化成布尔类型的变量然后进行判断的。</p>
<p>类型 结果<br>Undefined false<br>Null false<br>Boolean 直接判断<br>String 除了空字符串为false，其他为true<br>Number 除了0，-0，+0，Nan其他为 true<br>Object true<br>记住这些以后看到if(变量)就可以轻松的得到结果了，当然最好还是避免使用判断语句中直接使用变量的情况。</p>
<p>相等运算符 ==</p>
<p>下面来看看不严格相等符号<br>==在比较相同类型的数据时，和===是一样的结果。不同的数据类型===会直接返回false，而==则不一样，有如下的规则</p>
<p>原始类型的值<br>原始类型的数据会转换成数值类型再进行比较。<br>对象与原始类型值比较<br>对象（这里指广义的对象，包括数组和函数）与原始类型的值比较时，对象转化成原始类型的值，再进行比较。<br>undefined 和 null<br>undefined和null与其他类型的值比较时，结果都为false，它们互相比较时结果为true。<br>相等运算符的缺点：<br>相等运算符隐藏的类型转换，会带来一些违反直觉的结果。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">0</span> == <span class="string">''</span> <span class="comment">// true</span></span><br><span class="line"><span class="number">0</span> == <span class="string">'0'</span> <span class="comment">// true</span></span><br><span class="line"></span><br><span class="line"><span class="number">2</span> == <span class="literal">true</span> <span class="comment">// false</span></span><br><span class="line"><span class="number">2</span> == <span class="literal">false</span> <span class="comment">// false</span></span><br><span class="line"></span><br><span class="line"><span class="literal">false</span> == <span class="string">'false'</span> <span class="comment">// false</span></span><br><span class="line"><span class="literal">false</span> == <span class="string">'0'</span> <span class="comment">// true</span></span><br><span class="line"></span><br><span class="line"><span class="literal">false</span> == <span class="literal">undefined</span> <span class="comment">// false</span></span><br><span class="line"><span class="literal">false</span> == <span class="literal">null</span> <span class="comment">// false</span></span><br><span class="line"><span class="literal">null</span> == <span class="literal">undefined</span> <span class="comment">// true</span></span><br><span class="line"></span><br><span class="line"><span class="string">' \t\r\n '</span> == <span class="number">0</span> <span class="comment">// true</span></span><br></pre></td></tr></table></figure>
<p>所以日常最好使用严格相等运算符===</p>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</div>
</article>
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
<div class="post-block">
<link itemprop="mainEntityOfPage" href="http://yoursite.com/2017/12/24/JS面向对象与原型链继承/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="杨晨昊">
<meta itemprop="description" content="">
<meta itemprop="image" content="/uploads/avatar.jpg">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="valar morghulis">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2017/12/24/JS面向对象与原型链继承/" itemprop="url">JS面向对象与原型链继承</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="2017-12-24T15:45:29+08:00">
2017-12-24
</time>
</span>
<span class="post-category" >
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-folder-o"></i>
</span>
<span class="post-meta-item-text">分类于</span>
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
<a href="/categories/JavaScript/" itemprop="url" rel="index">
<span itemprop="name">JavaScript</span>
</a>
</span>
</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="/2017/12/24/JS面向对象与原型链继承/#comments" itemprop="discussionUrl">
<span class="post-comments-count ds-thread-count" data-thread-key="2017/12/24/JS面向对象与原型链继承/" itemprop="commentCount"></span>
</a>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<p>由于最开始是先接触Python的中面向对象，继承的语法以及思路开始的。之后当接触到了JavaScript的的面向对象语法时是觉得有些别捏的。JS本身是不提供class的实现的，而是基于原型链。</p>
<h3 id="面向对象"><a href="#面向对象" class="headerlink" title="面向对象"></a>面向对象</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">People</span>(<span class="params">name</span>)</span>{</span><br><span class="line"> <span class="keyword">this</span>.name = name</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">People.prototype.sayName = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="built_in">console</span>.log()</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> p = <span class="keyword">new</span> People(<span class="string">"yangchenhao"</span>)</span><br><span class="line">p.sayName()</span><br></pre></td></tr></table></figure>
<p>当new一个函数时发生了三件事情</p>
<ol>
<li>创建了一个空对象，把空对象的<em>proto</em>属性指向People.prototype</li>
<li>执行People函数，函数中的this代表这个刚创建的新对象</li>
<li>返回这个对象</li>
</ol>
<p>对于第三步，如果构造函数中有return，分情况讨论。如果return的是基本类型，会忽略不计。如果return的是引用类型，则返回这个引用类型</p>
<p>原型图</p>
<p><img src="http://p16zd0h1i.bkt.clouddn.com/blog/js-class.jpg" alt=""></p>
<p>Tips</p>
<p>任何函数都有.prototype这个属性，对应的值叫做原型对象，这个原型对象可以由被这个函数new的所有对象共享</p>
<h3 id="继承"><a href="#继承" class="headerlink" title="继承"></a>继承</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Dialog</span>(<span class="params">target</span>)</span>{</span><br><span class="line"> <span class="keyword">this</span>.target = target</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">Dialog.prototype.show = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="keyword">this</span>.target + <span class="string">' show'</span>)</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">Dialog.prototype.hide = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="keyword">this</span>.target + <span class="string">' hide'</span>)</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> dialog = <span class="keyword">new</span> Dialog(<span class="string">'body'</span>)</span><br><span class="line"></span><br><span class="line">dialog.show()</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Message</span>(<span class="params">target, name</span>)</span>{</span><br><span class="line"> Dialog.call(<span class="keyword">this</span>, target) <span class="comment">// Message构造函数中执行一遍Dialog函数构造过程</span></span><br><span class="line"> <span class="keyword">this</span>.name = name</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">Message.prototype = <span class="built_in">Object</span>.create(Dialog.prototype) <span class="comment">// 将Message.prototype中_proto_属性指向Dialog.prototype 相当于继承Dialog中的方法</span></span><br><span class="line">Message.prototype.success = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="keyword">this</span>.name, <span class="string">' success'</span>)</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> msgBox = <span class="keyword">new</span> Message(<span class="string">'main'</span>, <span class="string">'msg'</span>)</span><br><span class="line">msgBox.show()</span><br><span class="line">msgBox.success()</span><br></pre></td></tr></table></figure>
<p>Dialog.call(this, target)的作用是: 执行函数 Dialog(target)，执行的过程中里面遇到 this 换成当前传递的 this</p>
<p>Object.create(Dialog.prototype)的作用是：创建一个空对象，空对象的<strong>proto</strong>等于 Dialog.prototype</p>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</div>
</article>
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
<div class="post-block">
<link itemprop="mainEntityOfPage" href="http://yoursite.com/2017/12/21/前端性能优化/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="杨晨昊">
<meta itemprop="description" content="">
<meta itemprop="image" content="/uploads/avatar.jpg">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="valar morghulis">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2017/12/21/前端性能优化/" 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="2017-12-21T14:49:51+08:00">
2017-12-21
</time>
</span>
<span class="post-category" >
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-folder-o"></i>
</span>
<span class="post-meta-item-text">分类于</span>
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
<a href="/categories/JavaScript/" itemprop="url" rel="index">
<span itemprop="name">JavaScript</span>
</a>
</span>
</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="/2017/12/21/前端性能优化/#comments" itemprop="discussionUrl">
<span class="post-comments-count ds-thread-count" data-thread-key="2017/12/21/前端性能优化/" itemprop="commentCount"></span>
</a>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<p>梳理整理一下前端性能优化常见思路与技巧</p>
<p>性能优化的目的是让用户觉得你的网站访问起来速度快，即使实际速度可能并没有变，只是感觉变快了。因此优化可以从两个方向，即真的快和感觉变快了。</p>
<h3 id="真的快"><a href="#真的快" class="headerlink" title="真的快"></a>真的快</h3><p>真的快就是让网站资源以最快速度到达用户浏览器，可以按照下面的思路和方法去优化。</p>
<h4 id="传输的内容体积要小"><a href="#传输的内容体积要小" class="headerlink" title="传输的内容体积要小"></a>传输的内容体积要小</h4><ol>
<li>图片要压缩</li>
<li>图片根据支持格式选择体积更小的格式</li>
<li>css,js内容压缩</li>
<li>服务端开启Gzip，在传输数据之前再次压缩</li>
</ol>
<h4 id="传输的内容数量要少"><a href="#传输的内容数量要少" class="headerlink" title="传输的内容数量要少"></a>传输的内容数量要少</h4><ol>
<li>图片图标合并(css sprite),svg图标合并(svg sprite)</li>
<li>css,js文件打包合并</li>
</ol>
<h4 id="网速要足够快"><a href="#网速要足够快" class="headerlink" title="网速要足够快"></a>网速要足够快</h4><ol>
<li>服务器出口带宽够</li>
<li>南北差异，不同地方部署不同服务器</li>
<li>静态资源放CDN</li>
</ol>
<h4 id="服务器响应要及时"><a href="#服务器响应要及时" class="headerlink" title="服务器响应要及时"></a>服务器响应要及时</h4><ol>
<li>接口响应速度要快(数据库优化，查询优化，算法优化)</li>
<li>cpu，内存，硬盘读写不要成为瓶颈，多加机器</li>
<li>重要页面静态化。服务端提前渲染生成静态页面，用户访问时直接返回</li>
</ol>
<h4 id="能重复利用的资源要利用好"><a href="#能重复利用的资源要利用好" class="headerlink" title="能重复利用的资源要利用好"></a>能重复利用的资源要利用好</h4><ol>
<li>服务器设置合适的静态资源缓存时间</li>
<li>前端文件打包时做合理的分块，让公共资源缓存后能被多个页面复用</li>
</ol>
<h4 id="暂时不需要的资源先不要"><a href="#暂时不需要的资源先不要" class="headerlink" title="暂时不需要的资源先不要"></a>暂时不需要的资源先不要</h4><ol>
<li>图片懒加载</li>
<li>功能，模块，组件按需加载</li>
</ol>
<h4 id="将来需要的资源抽空先拿到"><a href="#将来需要的资源抽空先拿到" class="headerlink" title="将来需要的资源抽空先拿到"></a>将来需要的资源抽空先拿到</h4><ol>
<li>DNS 预解析 <link rel="dns-prefetch" href="//yangchenhao.com"></li>
<li>预连接 <link rel="preconnect" href="//yangchenhao.com"></li>
<li>预获取 <link rel="prefetch" href="image.png"></li>
<li>预渲染 <link rel="prerender" href="//yangchenhao.com"></li>
</ol>
<h3 id="体验快"><a href="#体验快" class="headerlink" title="体验快"></a>体验快</h3><p>体验快就是网站交互是流畅的，舒适的。</p>
<h4 id="滚动页面不要有迟滞感"><a href="#滚动页面不要有迟滞感" class="headerlink" title="滚动页面不要有迟滞感"></a>滚动页面不要有迟滞感</h4><ol>
<li>短时间连续大量触发操作要节流</li>
</ol>
<h4 id="常见操作不要拖泥带水"><a href="#常见操作不要拖泥带水" class="headerlink" title="常见操作不要拖泥带水"></a>常见操作不要拖泥带水</h4><ol>
<li>DOM操作不能过于频繁</li>
<li>不要出现内存泄漏</li>
<li>优化复杂算法</li>
</ol>
<h4 id="动画不要卡顿"><a href="#动画不要卡顿" class="headerlink" title="动画不要卡顿"></a>动画不要卡顿</h4><ol>
<li>多用CSS动画，少用JS动画</li>
<li>开启硬件加速</li>
<li>动画或过渡执行时间不要太久</li>
</ol>
<p>臆想的优化不是优化，无明显成效的优化不是优化。浏览器的性能已经足够快，不要因为“过渡优化”牺牲代码的可读性</p>
<p>先做简单见效快的优化，再做复杂见效慢的优化。</p>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</div>
</article>
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
<div class="post-block">
<link itemprop="mainEntityOfPage" href="http://yoursite.com/2017/12/06/ES6常用语法汇总/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="杨晨昊">
<meta itemprop="description" content="">
<meta itemprop="image" content="/uploads/avatar.jpg">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="valar morghulis">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2017/12/06/ES6常用语法汇总/" itemprop="url">ES6常用语法汇总</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="2017-12-06T20:36:08+08:00">
2017-12-06
</time>
</span>
<span class="post-category" >