-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
957 lines (457 loc) · 44.1 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
<!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="学习总结 知识分享">
<meta property="og:type" content="website">
<meta property="og:title" content="ArtemisZ 's blog">
<meta property="og:url" content="https://github.com/ArtemisZ/ArtemisZ.github.io/index.html">
<meta property="og:site_name" content="ArtemisZ 's blog">
<meta property="og:description" content="学习总结 知识分享">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="ArtemisZ 's blog">
<meta name="twitter:description" content="学习总结 知识分享">
<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://github.com/ArtemisZ/ArtemisZ.github.io/"/>
<title> ArtemisZ 's blog </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">ArtemisZ 's blog</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-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-about">
<a href="/about" rel="section">
<i class="menu-item-icon fa fa-fw fa-user"></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>
<li class="menu-item menu-item-itemap">
<a href="/sitemap.xml" rel="section">
<i class="menu-item-icon fa fa-fw fa-question-circle"></i> <br />
menu.itemap
</a>
</li>
<li class="menu-item menu-item-commonweal">
<a href="/404.html" rel="section">
<i class="menu-item-icon fa fa-fw fa-heartbeat"></i> <br />
公益404
</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://github.com/ArtemisZ/ArtemisZ.github.io/2017/05/31/《计算机组成原理》读书笔记—-第一篇-概述/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="ArtemisZ">
<meta itemprop="description" content="">
<meta itemprop="image" content="/images/github头像.png">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="ArtemisZ 's blog">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2017/05/31/《计算机组成原理》读书笔记—-第一篇-概述/" 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-05-31T11:03:52+08:00">
2017-05-31
</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/读书笔记/" itemprop="url" rel="index">
<span itemprop="name">读书笔记</span>
</a>
</span>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<p>[TOC]</p>
<h1 id="第一章-概论"><a href="#第一章-概论" class="headerlink" title="第一章 概论"></a>第一章 概论</h1><h2 id="1-1-计算机系统简介"><a href="#1-1-计算机系统简介" class="headerlink" title="1.1 计算机系统简介"></a>1.1 计算机系统简介</h2><h3 id="1-1-1-计算机的软硬件概念"><a href="#1-1-1-计算机的软硬件概念" class="headerlink" title="1.1.1 计算机的软硬件概念"></a>1.1.1 计算机的软硬件概念</h3><p>计算机系统由硬件和软件两大部分组成。</p>
<p>硬件是计算机的实体部分，如主机、外设等。</p>
<p>软件是由人们事先编制成具有各种特殊功能的信息组成的，通常把这些信息存在RAM，ROM等里面，这些通常被作为计算机的贮存或辅存的内容。</p>
<p>软件可以分为两大类：系统软件和应用软件。</p>
<ol>
<li>系统软件又称为系统程序，用来管理计算机系统，监视服务，使系统资源得到合理调度，确保高效运行。包括标准程序库，语言处理程序，操作系统，服务性程序，数据库管理系统，网络软件等等。</li>
<li>应用软件又称为应用程序，是用户根据任务需要所编制的各种程序。</li>
</ol>
<h3 id="1-1-2-计算机系统的层次结构"><a href="#1-1-2-计算机系统的层次结构" class="headerlink" title="1.1.2 计算机系统的层次结构"></a>1.1.2 计算机系统的层次结构</h3><p>早期的计算机只有机器语言。<br>20世纪50年代出现了符号式的程序设计语言，即汇编语言。（机器系统软件将汇编语言翻译成机器语言）<br>20世纪60年代，出现各种面向问题的高级语言，如C、Pascal等。（将高级语言翻译成汇编语言，这个过程为翻译，翻译程序分为两种，编译程序，解释程序）</p>
<h3 id="1-1-3-计算机组成和计算机体系结构"><a href="#1-1-3-计算机组成和计算机体系结构" class="headerlink" title="1.1.3 计算机组成和计算机体系结构"></a>1.1.3 计算机组成和计算机体系结构</h3><p>计算机体系结构指的是那些能够被程序员所见到的计算机系统的属性，即概念性的结构和功能特性，指用机器语言编程的程序员所看到的传统机器属性，包括指令集、数据类型、存储器寻址技术、I/O机理等等，大都属于抽象的属性。<br>计算机组成是指如何实现计算机体系结构所体现的属性，包含很多对于程序员来说是透明的硬件细节。<br>例如指令系统体现了机器的属性，这是属于计算机结构的问题。但指令的实现（如何取指令、分析指令、取操作数、如何运算、如何送结果等等），这些都是属于计算机组成问题。<br>本书主要研究计算机的组成，计算机的体系结构在《计算机体系结构》中讲述。</p>
<h2 id="1-2-计算机的基本组成"><a href="#1-2-计算机的基本组成" class="headerlink" title="1.2 计算机的基本组成"></a>1.2 计算机的基本组成</h2><h3 id="1-2-1-冯-·-诺依曼计算机的特点"><a href="#1-2-1-冯-·-诺依曼计算机的特点" class="headerlink" title="1.2.1 冯 · 诺依曼计算机的特点"></a>1.2.1 冯 · 诺依曼计算机的特点</h3><ol>
<li>计算机由运算器、存储器、控制器、输入和输出设备构成；</li>
<li>指令和数据以相同地位存储在存储器里面，并可按地址寻访；</li>
<li>指令和数据均用二进制码表示；</li>
<li>指令由操作码和地址码组成，操作码用来表示操作的性质，地址码用来表示操作数所在存储器的位置；</li>
<li>指令在存储器中按顺序存放。通常，指令是顺序执行的，特定情况下可根据运算结果改变执行顺序；</li>
<li>机器以运算器为中心，输入输出设备与存储器的数据传输通过运算器。</li>
</ol>
<h3 id="1-2-2-计算机的硬件框图"><a href="#1-2-2-计算机的硬件框图" class="headerlink" title="1.2.2 计算机的硬件框图"></a>1.2.2 计算机的硬件框图</h3><p><img src="http://img9.ph.126.net/ZJAQqnSHQKULftUasHuoqA==/6597795444330573489.jpg" alt="典型的冯诺依曼计算机结构框图"></p>
<p>实线为数据线，虚线为控制线和反馈线。</p>
<p><img src="http://oq2wo1a67.bkt.clouddn.com/%E4%BB%A5%E5%AD%98%E5%82%A8%E5%99%A8%E4%B8%BA%E4%B8%AD%E5%BF%83%E7%9A%84%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BB%93%E6%9E%84%E6%A1%86%E5%9B%BE.PNG" alt="以存储器为中心的计算机结构框图"><br>实线为控制线，虚线为反馈线，双线为数据线。</p>
<p>把运算器和控制器合起来称为中央处理器CPU，输入设备和输出设备简称为I/O设备。</p>
<p>现代计算机可认为由三部分组成：CPU、I/O设备、主存储器M.M ( Main Memory )。 CPU和M.M合起来称为主机，I/O设备称为外部设备。</p>
<p><img src="http://oq2wo1a67.bkt.clouddn.com/%E7%8E%B0%E4%BB%A3%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%9A%84%E7%BB%93%E6%9E%84%E6%A1%86%E5%9B%BE.PNG" alt="现代计算机的组成框图"></p>
<p>M.M 存放程序和数据，可直接和CPU交换数据。</p>
<h3 id="1-2-3-计算机的工作过程"><a href="#1-2-3-计算机的工作过程" class="headerlink" title="1.2.3 计算机的工作过程"></a>1.2.3 计算机的工作过程</h3><ol>
<li>上机前<ol>
<li>建立数据模型</li>
<li>确定计算方法</li>
<li>编写程序</li>
</ol>
</li>
<li>上机运行</li>
</ol>
<p><img src="http://oq2wo1a67.bkt.clouddn.com/%E8%AE%A1%E7%AE%97%E4%BA%8C%E5%85%83%E7%A8%8B%E5%BA%8F%E7%9A%84%E7%A8%8B%E5%BA%8F%E6%B8%85%E5%8D%95.PNG" alt="计算二元方程的程序清单"></p>
<h2 id="1-3-计算机硬件的主要技术指标"><a href="#1-3-计算机硬件的主要技术指标" class="headerlink" title="1.3 计算机硬件的主要技术指标"></a>1.3 计算机硬件的主要技术指标</h2><ol>
<li>机器字长<ol>
<li>CPU一次能处理的数据的位数，</li>
<li>和CPU的寄存器位数有关，</li>
<li>直接影响ALU，数据总线，存储字长的位数；</li>
</ol>
</li>
<li>存储容量<ol>
<li>存储器的容量应该包括主存容量和辅存容量：存储容量 = 存储单元个数（2的（MAR位数）次方） * 存储字长（MDR位数）</li>
</ol>
</li>
<li>运算速度（吉普森法）<br> $$<br> T<em>M =<br> \sum \limits</em>{i=1}^{n} f_i t_i<br>$$<br>$T_M$为机器运行速度<br>$f_i$为第i种指令占全部操作数的百分比数<br>$t_i$为第i种指令的执行速度</li>
</ol>
<p>现在机器的运算速度，普遍用单位时间内执行指令的平均条数来衡量，并用MIPS作为计量单位，即每秒执行百万条指令。<br>CPI（Cycle Per Instruction）即执行一条指令所需的时钟周期（主频的倒数）数。<br>FLOPS（Floadting Point Operation Per Second）即每秒浮点运算次数来衡量运算速度。</p>
<h2 id="1-4-本书结构"><a href="#1-4-本书结构" class="headerlink" title="1.4 本书结构"></a>1.4 本书结构</h2><p><img src="http://oq2wo1a67.bkt.clouddn.com/%E5%85%A8%E4%B9%A6%E5%90%84%E7%AB%A0%E8%8A%82%E4%B9%8B%E9%97%B4%E7%9A%84%E5%85%B3%E7%B3%BB.PNG" alt="本书结构"></p>
<h2 id="1-5-习题"><a href="#1-5-习题" class="headerlink" title="1.5 习题"></a>1.5 习题</h2><ol>
<li>什么是计算机系统，计算机硬件，计算机软件？硬件和软件哪个更重要？</li>
</ol>
<p>计算机系统是将人们事先我们想要执行的任务以代码的形式保存在存储器内部，然后由计算机控制单元执行的系统。</p>
<p>计算机硬件是指显卡，内存条，微处理器这些。</p>
<p>计算机软件是分为系统软件和应用软件。系统软件是指像是数据库管理系统，操作系统这种可以直接操作硬件的软件。应用软件是指像是数据库系统，应用系统这种软件。</p>
<p>硬件和软件都很重要。硬件是软件的载体，有了软件，硬件也能更好地发挥它的作用。</p>
<ol>
<li>如何理解计算机系统的层次结构？</li>
</ol>
<p>计算机系统的层次结构主要分为6层</p>
<p>第0层：由硬件直接执行微指令<br>第1层：用微程序解释机器指令<br>第2层：用机器语言解释操作系统<br>第3层：用汇编程序翻译成机器语言程序<br>第4层：用编译程序翻译成汇编语言程序</p>
<ol>
<li><p>说明高级语言、汇编语言和机器语言的差别和联系。<br>高级语言是指C，Java这种比较贴近于人类语言的高级语言，<br>汇编语言是指使用助记符来标记的语言，<br>机器语言是指0,1字符串表示的语言。</p>
</li>
<li><p>如何理解计算机组成和计算机体系结构？</p>
</li>
<li><p>冯诺依曼计算机的特点是什么？</p>
</li>
</ol>
<h1 id="第二章-计算机的发展及应用"><a href="#第二章-计算机的发展及应用" class="headerlink" title="第二章 计算机的发展及应用"></a>第二章 计算机的发展及应用</h1><h2 id="2-1-计算机的发展史"><a href="#2-1-计算机的发展史" class="headerlink" title="2.1 计算机的发展史"></a>2.1 计算机的发展史</h2><h3 id="2-1-1-计算机的产生和发展"><a href="#2-1-1-计算机的产生和发展" class="headerlink" title="2.1.1 计算机的产生和发展"></a>2.1.1 计算机的产生和发展</h3><ol>
<li>第一代电子管计算机<ol>
<li>ENIAC（Electronic Numerical Integrator And Computer）：1945年提出，1946年交付使用，1955年退役</li>
<li>von Neumann在为一个新的EDVAC（电子离散变量计算机）所指定的计划首次提出了<strong>存储程序</strong>的概念，即将程序和数据一起存放在存储器中。</li>
<li>1946年，von Neumann及同行设计了一台存储程序的计算机IAS。IAS未能问世，总体结构变成后来通用计算机的原型。</li>
</ol>
</li>
<li>第二代晶体管计算机</li>
<li>第三代集成电路计算机</li>
</ol>
<h3 id="2-1-2-微型计算机的出现和发展"><a href="#2-1-2-微型计算机的出现和发展" class="headerlink" title="2.1.2 微型计算机的出现和发展"></a>2.1.2 微型计算机的出现和发展</h3><p>Moore（摩尔）定律：微芯片上集成的晶体管数目每三年翻两番。</p>
<p>不同机器各自有不同的汇编语言。为了把这种符号语言转变成机器能够识别的语言，人们又创造了<strong>汇编程序</strong>，它能把这种汇编语言翻译成为机器语言。</p>
<p>在汇编语言之后又出现了面向问题的高级语言。<br>高级语言的几个阶段：</p>
<ol>
<li>FORTRAN（1954年）：主要面向科学计算和工程计算</li>
<li>可视化程序设计阶段（1968）PASCAL</li>
<li>面向对象程序设计阶段 C++，Java</li>
</ol>
<p>为了高级语言能运行，所以需要有一个翻译系统，于是产生了编译程序和解释程序，他们能把高级语言翻译成机器语言。</p>
<p>随着编译程序，解释程序，汇编程序的出现，逐渐形成了软件系统。</p>
<p>为了使计算机资源让更多用户<strong>共享</strong>，又出现了<strong>操作系统</strong>。操作系统能够管理计算机中各种软件，硬件及其他信息资源，能调度用户的作业程序，使多个用户能有效地公用一套计算机系统。</p>
<p>一些服务型程序如装配程序，调试程序，诊断程序和排错程序等也逐渐形成。<br>计算机在信息处理，情报检索及各种管理系统中应用的发展，要求大量处理某些数据，建立和检索大量的表格。这些数据和表格按照一定规律组织起来使用户使用更方便，于是数显了数据库。</p>
<p>随着网络的发展，又产生了网络软件等等。</p>
<p>上面说的都是系统软件，软件发展的另一个主要内容就是应用软件。</p>
<p>软件发展有几个特点：</p>
<ol>
<li>开发周期长</li>
<li>制作成本高</li>
<li>检测软件产品质量的特殊性</li>
</ol>
<h2 id="2-2-计算机的应用"><a href="#2-2-计算机的应用" class="headerlink" title="2.2 计算机的应用"></a>2.2 计算机的应用</h2><h3 id="2-2-1-科学计算和数据处理"><a href="#2-2-1-科学计算和数据处理" class="headerlink" title="2.2.1 科学计算和数据处理"></a>2.2.1 科学计算和数据处理</h3><ol>
<li>科学计算（天文学，量子化学，空气动力学，核物理学）</li>
<li>数据处理</li>
</ol>
<h3 id="2-2-2-工业控制和实时控制"><a href="#2-2-2-工业控制和实时控制" class="headerlink" title="2.2.2 工业控制和实时控制"></a>2.2.2 工业控制和实时控制</h3><h3 id="2-2-3-网络技术的应用"><a href="#2-2-3-网络技术的应用" class="headerlink" title="2.2.3 网络技术的应用"></a>2.2.3 网络技术的应用</h3><p>网络技术的基础是计算机技术和通信技术的结合。</p>
<p>新Moore定律：全球入网量每六个月翻一番。</p>
<p>网络应用涉及方面：</p>
<ol>
<li>电子商务</li>
<li>网络教育</li>
<li>敏捷制造</li>
<li>虚拟现实</li>
<li>办公自动化和管理信息系统</li>
<li>多媒体技术</li>
<li>人工智能</li>
</ol>
</div>
<div>
</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://github.com/ArtemisZ/ArtemisZ.github.io/2017/03/21/clourse/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="ArtemisZ">
<meta itemprop="description" content="">
<meta itemprop="image" content="/images/github头像.png">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="ArtemisZ 's blog">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2017/03/21/clourse/" 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="2017-03-21T21:56:11+08:00">
2017-03-21
</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<p>[TOC]</p>
<h1 id="零-前言"><a href="#零-前言" class="headerlink" title="零. 前言"></a>零. 前言</h1><p>从我开始接触前端时就听说过闭包，但是一直不理解闭包究竟是什么。上网看了各种博客，大家对闭包的说法不一。闭包在我理解是一种比较抽象的东西。所以我写了一篇博文来方便自己理解闭包。博主是第一次写博文，如果在文章中有什么看不懂或者概念错误的地方，请大家多多见谅和指出错误。</p>
<h1 id="一-闭包的定义"><a href="#一-闭包的定义" class="headerlink" title="一. 闭包的定义"></a>一. 闭包的定义</h1><p>再说闭包之前，首先让我们先来理解一下自由变量和约束变量。</p>
<p>在程序设计语言中，变量可以分为<strong>自由变量</strong>与<strong>约束变量</strong>两种。简单来说，一个函数里局部变量和参数都被认为是约束变量；而不是约束变量的则是自由变量。下面我们通过一个demo来解说。 </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> x = <span class="number">10</span>; <span class="comment">// 相对于fn来说，x是一个自由变量</span></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>)</span>{</div><div class="line"> <span class="keyword">var</span> b = <span class="number">20</span>;</div><div class="line"> <span class="built_in">console</span>.log( x + b ); <span class="comment">// 30 </span></div><div class="line">}</div><div class="line">fn();</div></pre></td></tr></table></figure>
<p>在上述例子中，相对于<strong>函数实例fn</strong>而言，x是一个自由变量，因为x并不是fn的局部变量和参数。而b是fn的局部参数，所以b是fn的约束变量。</p>
<p>那么现在我们可以解释一下闭包的第一个定义：</p>
<blockquote>
<p>在计算机科学中，闭包是引用了自由变量的函数。</p>
</blockquote>
<p>其实闭包不一定要是函数实例，也可以是代码块，只要满足可以保存变量在内存，同时有一些方法对于这些变量进行访问就行了。</p>
<p>所以，我们可以引申出闭包的第二个定义：</p>
<blockquote>
<p>闭包是由<strong>函数</strong>和与其相关的<strong>引用环境</strong>组合而成的<strong>实例</strong>，环境由闭包创建时在作用域中的任何局部变量和参数组成。</p>
</blockquote>
<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><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><div class="line">25</div></pre></td><td class="code"><pre><div class="line">// 例子1</div><div class="line">function Person(){</div><div class="line"> var name,</div><div class="line"> age;</div><div class="line"></div><div class="line"> function init(name, age){</div><div class="line"> name = name;</div><div class="line"> age = age;</div><div class="line"> return this;</div><div class="line"> }</div><div class="line"> function show(){</div><div class="line"> console.log('name: %s, age: %d', name, age);</div><div class="line"> }</div><div class="line"></div><div class="line"> return {</div><div class="line"> init: init,</div><div class="line"> show: show</div><div class="line"> }</div><div class="line">}</div><div class="line"></div><div class="line">var eyesiM = Person().init('EyesiM', 22); // 闭包的实例1</div><div class="line">var dcc = Person().init('Dcc', 20); // 闭包的实例2</div><div class="line"></div><div class="line">eyesiM.show(); // name: EyesiM, age: 22</div><div class="line">dcc.show(); // name: Dcc, age: 20</div></pre></td></tr></table></figure>
<p>上面的变量eyesiM和变量dcc就是闭包的实例，其中变量eyesiM的环境中局部变量name和age的值为’EyesiM’和22；变量dcc的环境中的局部变量name和age的值为’Dcc’和20。</p>
<h1 id="二-闭包的应用"><a href="#二-闭包的应用" class="headerlink" title="二. 闭包的应用"></a>二. 闭包的应用</h1><p>闭包可以用来在一个函数与一组“私有”变量之间建立关联关系。在给定函数被多次调用的过程中，这些私有变量能够保存在内存中。变量的作用域仅限于包含它们的函数，因此无法从除包含它们的函数之外进行访问。</p>
<h2 id="1-模块模式"><a href="#1-模块模式" class="headerlink" title="1. 模块模式"></a>1. 模块模式</h2><p>在Java等等一些语言里面会有<code>private</code>关键字来将方法和变量声明为私有的，即它们只能被同一个类中的其它方法所调用。</p>
<p>JavaScript不提供原生的支持，但是可以使用闭包模拟私有变量和私有方法。私有变量可以限制对代码的访问；避免非核心的方法弄乱了代码的公共接口部分。</p>
<figure class="highlight javascript"><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"><span class="comment">// 例子2</span></div><div class="line"><span class="keyword">var</span> demo = (<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</div><div class="line"> <span class="comment">// 模拟私有变量</span></div><div class="line"> <span class="keyword">var</span> count = <span class="number">0</span>;</div><div class="line"></div><div class="line"> <span class="function"><span class="keyword">function</span> <span class="title">show</span>(<span class="params"></span>)</span>{</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'count: %d'</span>, count++);</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="keyword">return</span> {</div><div class="line"> <span class="attr">show</span>: show</div><div class="line"> }</div><div class="line">})();</div><div class="line"></div><div class="line">demo.show(); <span class="comment">// 0</span></div><div class="line">demo.count; <span class="comment">// 我们不能直接引用，所以这里会返回undefined</span></div></pre></td></tr></table></figure>
<p>在我理解，模块模式可以有两种用途：</p>
<ol>
<li><strong>立即调用函数表达式（IIFE）</strong>：将我们自身的变量和方法封装起来，可以避免全局污染。例子2就是一个IIFE的例子。</li>
<li><strong>引入依赖</strong>：我们可以引入对某一个全局对象的依赖，对这一个全局进行扩充。下面我们可以通过一个例子来表示。</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// MODULE 就是一个全局对象，如果不存在就初始化为`{}`，我们使用局部参数my指向这个对象，接着我们给这个全局对象添加属性`method`，然后返回指向这个全局对象的引用。</span></div><div class="line"><span class="keyword">var</span> MODULE = (<span class="function"><span class="keyword">function</span> (<span class="params">my</span>) </span>{</div><div class="line"> my.method = {</div><div class="line"> <span class="comment">// add code</span></div><div class="line"> }</div><div class="line"> <span class="keyword">return</span> my;</div><div class="line">}(MODULE || {}));</div></pre></td></tr></table></figure>
<h2 id="2-循环中创建闭包"><a href="#2-循环中创建闭包" class="headerlink" title="2. 循环中创建闭包"></a>2. 循环中创建闭包</h2><p>在我们使用ES6的<code>let关键字</code>之前，闭包的一个常见问题就出现在循环中创建闭包。</p>
<figure class="highlight html"><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">// 例子3</div><div class="line"><span class="meta"><!DOCTYPE html></span></div><div class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></div><div class="line"><span class="tag"><<span class="name">head</span>></span></div><div class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></div><div class="line"> <span class="tag"><<span class="name">title</span>></span>Document<span class="tag"></<span class="name">title</span>></span></div><div class="line"><span class="tag"></<span class="name">head</span>></span></div><div class="line"><span class="tag"><<span class="name">body</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"apple"</span>></span>apple<span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"banana"</span>></span>banana<span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"orange"</span>></span>orange<span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">body</span>></span></div><div class="line"><span class="tag"></<span class="name">html</span>></span></div></pre></td></tr></table></figure>
<figure class="highlight javascript"><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><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">showColor</span>(<span class="params">item</span>) </span>{</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'id: %s, color: %s'</span>, item.id, item.color);</div><div class="line">}</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">addHTML</span>(<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">var</span> colors = [{</div><div class="line"> <span class="attr">id</span>: <span class="string">'apple'</span>,</div><div class="line"> <span class="attr">color</span>: <span class="string">'red'</span></div><div class="line"> }, {</div><div class="line"> <span class="attr">id</span>: <span class="string">'banana'</span>,</div><div class="line"> <span class="attr">color</span>: <span class="string">'yellow'</span></div><div class="line"> }, {</div><div class="line"> <span class="attr">id</span>: <span class="string">'orange'</span>,</div><div class="line"> <span class="attr">color</span>: <span class="string">'orange'</span></div><div class="line"> }];</div><div class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>, length = colors.length; i < length; i++) {</div><div class="line"> <span class="keyword">var</span> item = colors[i];</div><div class="line"> <span class="comment">// error</span></div><div class="line"> <span class="comment">// 当我们把鼠标依次移过id为'apple', 'banana', 'orange'的div时，控制台打印出的是</span></div><div class="line"> <span class="comment">// id: orange, color: orange</span></div><div class="line"> <span class="comment">// id: orange, color: orange</span></div><div class="line"> <span class="comment">// id: orange, color: orange</span></div><div class="line"> <span class="comment">// document.getElementById(item.id).onmouseover = function(){</span></div><div class="line"> <span class="comment">// showColor(item);</span></div><div class="line"> <span class="comment">// }</span></div><div class="line"> <span class="comment">// success</span></div><div class="line"> <span class="comment">// 当我们把鼠标依次移过id为'apple', 'banana', 'orange'的div时，控制台打印出的是</span></div><div class="line"> <span class="comment">// id: apple, color: red</span></div><div class="line"> <span class="comment">// id: banana, color: yellow</span></div><div class="line"> <span class="comment">// id: orange, color: orange</span></div><div class="line"> <span class="built_in">document</span>.getElementById(item.id).onmouseover = <span class="function"><span class="keyword">function</span>(<span class="params">item</span>) </span>{</div><div class="line"> <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</div><div class="line"> showColor(item);</div><div class="line"> };</div><div class="line"> }(item);</div><div class="line"> }</div><div class="line">}</div><div class="line">addHTML();</div></pre></td></tr></table></figure>
<h1 id="三-闭包的注意点"><a href="#三-闭包的注意点" class="headerlink" title="三. 闭包的注意点"></a>三. 闭包的注意点</h1><p>闭包避免了环境中的变量被当成垃圾回收，因此使用闭包会使得闭包中的变量都被保存在内存中。</p>
<p>在一般的多页面中，我们关闭或重定向了页面之后，浏览器会自动回收原页面所占用的资源，但是如果我们所做的项目是SPA的话，就需要考虑到内存的使用，所以一定要慎用闭包。</p>
<h1 id="四-参考资料"><a href="#四-参考资料" class="headerlink" title="四. 参考资料"></a>四. 参考资料</h1><ol>
<li><a href="https://www.zybuluo.com/yangfch3/note/141582" target="_blank" rel="external">yangfch3的笔记-闭包</a></li>
<li><a href="http://www.oschina.net/translate/javascript-module-pattern-in-depth" target="_blank" rel="external">深入理解JavaScript 模块模式</a></li>
<li><a href="http://web.jobbole.com/82520/" target="_blank" rel="external">详解javascript立即执行函数表达式（IIFE）</a></li>
</ol>
<h1 id="最后，与正文无关"><a href="#最后，与正文无关" class="headerlink" title="最后，与正文无关"></a>最后，与正文无关</h1><p>（听说老师会上网查报告是不是复制粘贴的，本人保证这篇东西绝逼是我写的，还改了好几版。/(ㄒoㄒ)/~~）</p>
</div>
<div>
</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/github头像.png"
alt="ArtemisZ" />
<p class="site-author-name" itemprop="name">ArtemisZ</p>
<p class="site-description motion-element" itemprop="description">学习总结 知识分享</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">2</span>
<span class="site-state-item-name">日志</span>
</a>
</div>
<div class="site-state-item site-state-categories">
<span class="site-state-item-count">1</span>
<span class="site-state-item-name">分类</span>
</div>
<div class="site-state-item site-state-tags">
<span class="site-state-item-count">2</span>
<span class="site-state-item-name">标签</span>
</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">2017</span>
<span class="with-love">
<i class="fa fa-heart"></i>
</span>
<span class="author" itemprop="copyrightHolder">ArtemisZ</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>
</body>
</html>