Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
212 lines (169 loc) · 92.8 KB
/
Copy pathindex.html
File metadata and controls
212 lines (169 loc) · 92.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="format-detection" content="telephone=no"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><link rel="icon" href="/images/icons/favicon-16x16.png?v=2.7.0" type="image/png" sizes="16x16"><link rel="icon" href="/images/icons/favicon-32x32.png?v=2.7.0" type="image/png" sizes="32x32"><meta property="og:type" content="website">
<meta property="og:title" content="Scott">
<meta property="og:url" content="https://scottjustcode.github.io/index.html">
<meta property="og:site_name" content="Scott">
<meta property="og:locale" content="zh_CN">
<meta property="article:author" content="Scott">
<meta name="twitter:card" content="summary"><title>Scott</title><link ref="canonical" href="https://scottjustcode.github.io/index.html"><link rel="dns-prefetch" href="https://cdn.jsdelivr.net"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.12.1/css/all.min.css" type="text/css"><link rel="stylesheet" href="/css/index.css?v=2.7.0"><script>var Stun = window.Stun || {};
var CONFIG = {
root: '/',
algolia: undefined,
assistSearch: undefined,
fontIcon: {"prompt":{"success":"fas fa-check-circle","info":"fas fa-arrow-circle-right","warning":"fas fa-exclamation-circle","error":"fas fa-times-circle"},"copyBtn":"fas fa-copy"},
sidebar: {"offsetTop":"20px","tocMaxDepth":6},
header: {"enable":true,"showOnPost":true,"scrollDownIcon":false},
postWidget: {"endText":true},
nightMode: {"enable":true},
back2top: {"enable":true},
codeblock: {"style":"default","highlight":"dark","wordWrap":true},
reward: false,
fancybox: false,
zoomImage: {"gapAside":"20px"},
galleryWaterfall: undefined,
lazyload: false,
pjax: undefined,
externalLink: {"icon":{"enable":true,"name":"fas fa-external-link-alt"}},
shortcuts: undefined,
prompt: {"copyButton":"复制","copySuccess":"复制成功","copyError":"复制失败"},
sourcePath: {"js":"js","css":"css","images":"images"},
};
window.CONFIG = CONFIG;</script><meta name="generator" content="Hexo 6.2.0"></head><body><div class="container" id="container"><header class="header" id="header"><div class="header-inner"><nav class="header-nav header-nav--fixed"><div class="header-nav-inner"><div class="header-nav-menubtn"><i class="fas fa-bars"></i></div><div class="header-nav-menu"><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/"><span class="header-nav-menu-item__icon"><i class="fas fa-home"></i></span><span class="header-nav-menu-item__text">首页</span></a></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/archives/"><span class="header-nav-menu-item__icon"><i class="fas fa-folder-open"></i></span><span class="header-nav-menu-item__text">归档</span></a></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/categories/"><span class="header-nav-menu-item__icon"><i class="fas fa-layer-group"></i></span><span class="header-nav-menu-item__text">分类</span></a></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/tags/"><span class="header-nav-menu-item__icon"><i class="fas fa-tags"></i></span><span class="header-nav-menu-item__text">标签</span></a></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/aboutMe/"><span class="header-nav-menu-item__icon"><i class="fas fa-user"></i></span><span class="header-nav-menu-item__text">关于我</span></a></div></div><div class="header-nav-mode"><div class="mode"><div class="mode-track"><span class="mode-track-moon"></span><span class="mode-track-sun"></span></div><div class="mode-thumb"></div></div></div></div></nav><div class="header-banner"><div class="header-banner-info"><div class="header-banner-info__title">Scott</div><div class="header-banner-info__subtitle"></div></div></div></div></header><main class="main" id="main"><div class="main-inner"><div class="content-wrap" id="content-wrap"><div class="content content-home" id="content"><section class="postlist"><article class="postlist-item post"><header class="post-header"><h1 class="post-title"><a class="post-title__link" href="/2022/09/19/JS%E5%A4%8D%E4%B9%A0%E7%B3%BB%E5%88%97%E2%80%94%E2%80%94es6%E9%81%8D%E5%8E%86%E6%96%B9%E6%B3%95/">JS复习系列——es6遍历方法</a></h1><div class="post-meta"><span class="post-meta-item post-meta-item--createtime"><span class="post-meta-item__icon"><i class="far fa-calendar-plus"></i></span><span class="post-meta-item__info">发表于</span><span class="post-meta-item__value">2022-09-19</span></span><span class="post-meta-item post-meta-item--updatetime"><span class="post-meta-item__icon"><i class="far fa-calendar-check"></i></span><span class="post-meta-item__info">更新于</span><span class="post-meta-item__value">2022-09-24</span></span></div></header><div class="post-body"><div class="post-excerpt"><p> 复习一下es6后的遍历方法</p>
<p>先声明一个对象</p>
<figure class="highlight js"><div class="table-container"><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><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> student = {</span><br><span class="line"> <span class="attr">class</span>: <span class="number">1</span>,</span><br><span class="line"> <span class="attr">list</span>: [</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">id</span>: <span class="number">1</span>,</span><br><span class="line"> <span class="attr">name</span>: <span class="string">'scott'</span>,</span><br><span class="line"> <span class="attr">score</span>: <span class="number">99</span>,</span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">id</span>: <span class="number">2</span>,</span><br><span class="line"> <span class="attr">name</span>: <span class="string">'tom'</span>,</span><br><span class="line"> <span class="attr">score</span>: <span class="number">98</span>,</span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">id</span>: <span class="number">3</span>,</span><br><span class="line"> <span class="attr">name</span>: <span class="string">'jerry'</span>,</span><br><span class="line"> <span class="attr">score</span>: <span class="number">96</span>,</span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">id</span>: <span class="number">4</span>,</span><br><span class="line"> <span class="attr">name</span>: <span class="string">'lucy'</span>,</span><br><span class="line"> <span class="attr">score</span>: <span class="number">97</span>,</span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">id</span>: <span class="number">5</span>,</span><br><span class="line"> <span class="attr">name</span>: <span class="string">'jack'</span>,</span><br><span class="line"> <span class="attr">score</span>: <span class="number">100</span>,</span><br><span class="line"> },</span><br><span class="line"> ],</span><br><span class="line"> };</span><br></pre></td></tr></table></div></figure>
<p>1.forEach方法</p>
<p>不支持break和continue</p>
<figure class="highlight js"><div class="table-container"><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">student.<span class="property">list</span>.<span class="title function_">forEach</span>(<span class="function">(<span class="params">item, index</span>) =></span> {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(item);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'index='</span> + index);</span><br><span class="line"> });</span><br><span class="line"><span class="comment">//{id: 1, name: 'scott', score: 99}</span></span><br><span class="line"><span class="comment">//index=0</span></span><br><span class="line"><span class="comment">//{id: 2, name: 'tom', score: 98}</span></span><br><span class="line"><span class="comment">//index=1</span></span><br><span class="line"><span class="comment">//{id: 3, name: 'jerry', score: 96}</span></span><br><span class="line"><span class="comment">//index=2</span></span><br><span class="line"><span class="comment">//{id: 4, name: 'lucy', score: 97}</span></span><br><span class="line"><span class="comment">//index=3</span></span><br><span class="line"><span class="comment">//{id: 5, name: 'jack', score: 100}</span></span><br><span class="line"><span class="comment">//index=4</span></span><br></pre></td></tr></table></div></figure>
<p>上文说到不支持break和continue,但也有其他方法能实现。</p>
<p>break的效果我们可以用try catch方法中止,还有every和some也可以</p>
<p>continue的效果可以通过return语句实现。</p>
<p>2.map方法</p>
<p>map会遍历数据并返回一个新的数组</p>
<figure class="highlight js"><div class="table-container"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="number">4</span>, <span class="number">3</span>, <span class="number">2</span>, <span class="number">1</span>];</span><br><span class="line"> <span class="keyword">let</span> newArr = arr.<span class="title function_">map</span>(<span class="function">(<span class="params">item, index, arr</span>) =></span> {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(item);</span><br><span class="line"> <span class="keyword">return</span> item + <span class="number">1</span>;</span><br><span class="line"> });</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(newArr);</span><br><span class="line"><span class="comment">//4</span></span><br><span class="line"><span class="comment">//3</span></span><br><span class="line"><span class="comment">//2</span></span><br><span class="line"><span class="comment">//1</span></span><br><span class="line"><span class="comment">//[5,4,3,2]</span></span><br></pre></td></tr></table></div></figure>
<p>foreach和map的最大不同就是,map有返回值,如上例,但是foreach没有,而且他会直接修改原数组,和map恰恰相反。</p>
<p>3.filter过滤方法</p>
<p>filter会过滤数据,返回符合条件的数据存在新的数组,没有符合的话就为空</p>
<figure class="highlight js"><div class="table-container"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> afterArr = student.<span class="property">list</span>.<span class="title function_">filter</span>(<span class="function"><span class="params">item</span> =></span> {</span><br><span class="line"> <span class="keyword">return</span> item.<span class="property">score</span> > <span class="number">96</span>;</span><br><span class="line"> });</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(afterArr);</span><br><span class="line"><span class="comment">//jerry被筛掉了</span></span><br><span class="line"><span class="number">0</span>: {<span class="attr">id</span>: <span class="number">1</span>, <span class="attr">name</span>: <span class="string">'scott'</span>, <span class="attr">score</span>: <span class="number">99</span>}</span><br><span class="line"><span class="number">1</span>: {<span class="attr">id</span>: <span class="number">2</span>, <span class="attr">name</span>: <span class="string">'tom'</span>, <span class="attr">score</span>: <span class="number">98</span>}</span><br><span class="line"><span class="number">2</span>: {<span class="attr">id</span>: <span class="number">4</span>, <span class="attr">name</span>: <span class="string">'lucy'</span>, <span class="attr">score</span>: <span class="number">97</span>}</span><br><span class="line"><span class="number">3</span>: {<span class="attr">id</span>: <span class="number">5</span>, <span class="attr">name</span>: <span class="string">'jack'</span>, <span class="attr">score</span>: <span class="number">100</span>}</span><br></pre></td></tr></table></div></figure>
<p>4.some方法</p>
<p>检测数据是非存在,返回true或false</p>
<figure class="highlight js"><div class="table-container"><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></pre></td><td class="code"><pre><span class="line"> <span class="keyword">let</span> temp;</span><br><span class="line"> <span class="keyword">let</span> someArr = student.<span class="property">list</span>.<span class="title function_">some</span>(<span class="function">(<span class="params">item,index</span>) =></span> {</span><br><span class="line"> temp = index;</span><br><span class="line"> <span class="keyword">return</span> item.<span class="property">name</span> == <span class="string">'scott'</span>;</span><br><span class="line"> });</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(someArr);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(temp);</span><br><span class="line"><span class="comment">//true</span></span><br><span class="line"><span class="comment">//0</span></span><br></pre></td></tr></table></div></figure>
<p>5.every方法</p>
<p>和some差不多,也是检测条件是否满足后返回true或false。</p>
<p>和some不同的是,every要全部满足条件才会返回true,否则false</p>
<figure class="highlight js"><div class="table-container"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> someArr = student.<span class="property">list</span>.<span class="title function_">every</span>(<span class="function">(<span class="params">item, index</span>) =></span> {</span><br><span class="line"> <span class="keyword">return</span> item.<span class="property">score</span> > <span class="number">95</span>;</span><br><span class="line"> });</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(someArr);</span><br><span class="line"> <span class="comment">//true</span></span><br></pre></td></tr></table></div></figure>
<figure class="highlight js"><div class="table-container"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> someArr = student.<span class="property">list</span>.<span class="title function_">every</span>(<span class="function">(<span class="params">item, index</span>) =></span> {</span><br><span class="line"> <span class="keyword">return</span> item.<span class="property">score</span> > <span class="number">96</span>;</span><br><span class="line"> });</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(someArr);</span><br><span class="line"> <span class="comment">//false</span></span><br></pre></td></tr></table></div></figure>
<p>其实从关键字意思也能分清的,some意思是一些,只要数据中有一些满足就true了。every意思是每一个,理解为数据中每一个都要满足要求才是true。</p>
<p>6.reduce方法</p>
<p>reduce是求和方法,实现累加(用于购物车)</p>
<figure class="highlight js"><div class="table-container"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="number">5</span>, <span class="number">6</span>, <span class="number">3</span>, <span class="number">2</span>, <span class="number">1</span>];</span><br><span class="line"> <span class="keyword">let</span> reduceArr = arr.<span class="title function_">reduce</span>(<span class="function">(<span class="params">sum,val,index</span>)=></span>{</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'sum='</span>+sum,<span class="string">'val='</span>+val,<span class="string">'index='</span>+index);</span><br><span class="line"> <span class="keyword">return</span> sum+val</span><br><span class="line"> });</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(reduceArr);</span><br><span class="line"><span class="comment">//sum=5 val=6 index=1</span></span><br><span class="line"><span class="comment">//sum=11 val=3 index=2</span></span><br><span class="line"><span class="comment">//sum=14 val=2 index=3</span></span><br><span class="line"><span class="comment">//sum=16 val=1 index=4</span></span><br><span class="line"><span class="comment">//17</span></span><br></pre></td></tr></table></div></figure>
<p>reduce的参数还是比较复杂的,它内部有个累加器。它会把上一次遍历的sum+val返回到当前的sum上,构成累加,而val则是下一次要加的数值</p>
</div></div></article><article class="postlist-item post"><header class="post-header"><h1 class="post-title"><a class="post-title__link" href="/2022/09/18/JS%E5%A4%8D%E4%B9%A0%E7%B3%BB%E5%88%97%E2%80%94%E2%80%94call%E3%80%81bind%E3%80%81apply%E5%8C%BA%E5%88%AB/">JS复习系列——call、bind、apply区别</a></h1><div class="post-meta"><span class="post-meta-item post-meta-item--createtime"><span class="post-meta-item__icon"><i class="far fa-calendar-plus"></i></span><span class="post-meta-item__info">发表于</span><span class="post-meta-item__value">2022-09-18</span></span><span class="post-meta-item post-meta-item--updatetime"><span class="post-meta-item__icon"><i class="far fa-calendar-check"></i></span><span class="post-meta-item__info">更新于</span><span class="post-meta-item__value">2022-09-19</span></span></div></header><div class="post-body"><div class="post-excerpt"><p> call、bind、apply这三个方法大体上一样,但还是有区别的。先来说一下call</p>
<p>示例一: </p>
<figure class="highlight js"><div class="table-container"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">test</span> (){</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'a'</span>)</span><br><span class="line"> }</span><br><span class="line"> test.<span class="title function_">call</span>()</span><br><span class="line"><span class="comment">//控制台:a</span></span><br></pre></td></tr></table></div></figure>
<p>call可以调用函数,直接方法名+call调用test函数,输出a,效果和test()一样。</p>
<p>示例二:</p>
<figure class="highlight js"><div class="table-container"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> user = {</span><br><span class="line"> <span class="attr">name</span>: <span class="string">'scott'</span>,</span><br><span class="line"> };</span><br><span class="line"> <span class="keyword">function</span> <span class="title function_">test</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">name</span>);</span><br><span class="line"> }</span><br><span class="line"> test.<span class="title function_">call</span>(user);</span><br><span class="line"><span class="comment">//控制台:scott</span></span><br></pre></td></tr></table></div></figure>
<p><strong>call可以改变函数中的this指向</strong>,这里我们新建了一个对象user,里面有name属性,而user里并没有test方法,test的this按道理来说应该指向window,但是我们用了call之后传入user改变了对象,使其指向了user,能够获取user的name属性。</p>
<p>示例三:</p>
<figure class="highlight js"><div class="table-container"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> user = {</span><br><span class="line"> <span class="attr">name</span>: <span class="string">'scott'</span>,</span><br><span class="line"> <span class="title function_">showName</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'我是'</span> + <span class="variable language_">this</span>.<span class="property">name</span>);</span><br><span class="line"> },</span><br><span class="line"> };</span><br><span class="line"> <span class="keyword">let</span> customer = {</span><br><span class="line"> <span class="attr">name</span>:<span class="string">'company'</span></span><br><span class="line"> };</span><br><span class="line"> user.<span class="property">showName</span>.<span class="title function_">call</span>(customer);</span><br><span class="line"><span class="comment">//控制台:我是company</span></span><br></pre></td></tr></table></div></figure>
<p>和上面一样,这次是方法showName,只有user有这个方法,依靠call可以改变对象,使其获取其他对象的属性。</p>
<p>示例三:</p>
<figure class="highlight js"><div class="table-container"><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="keyword">let</span> user = {</span><br><span class="line"> <span class="attr">name</span>: <span class="string">'scott'</span>,</span><br><span class="line"> <span class="title function_">showName</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'我是'</span> + <span class="variable language_">this</span>.<span class="property">name</span>);</span><br><span class="line"> },</span><br><span class="line"> <span class="title function_">learn</span>(<span class="params">course</span>) { </span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">name</span>+<span class="string">'正在学'</span> + course);</span><br><span class="line"> },</span><br><span class="line"> };</span><br><span class="line"> <span class="keyword">let</span> customer = {</span><br><span class="line"> <span class="attr">name</span>: <span class="string">'lucy'</span>,</span><br><span class="line"> };</span><br><span class="line"> user.<span class="property">learn</span>.<span class="title function_">call</span>(customer,<span class="string">'javascript'</span>);<span class="comment">//第一个参数为对象,第二个为方法的参数,多个参数依次逗号隔开</span></span><br><span class="line"><span class="comment">//控制台:lucy正在学javascript</span></span><br></pre></td></tr></table></div></figure>
<p>这个例子里面新增的learn方法接收参数course, 对象指向customer,jacascript是learn的参数,多个参数的话,依次排在后面就行。</p>
<p>apply和call以上都相同,不同的是传参形式。</p>
<p>示例四:</p>
<figure class="highlight js"><div class="table-container"><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="keyword">let</span> user = {</span><br><span class="line"> <span class="attr">name</span>: <span class="string">'scott'</span>,</span><br><span class="line"> <span class="title function_">showName</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'我是'</span> + <span class="variable language_">this</span>.<span class="property">name</span>);</span><br><span class="line"> },</span><br><span class="line"> <span class="title function_">learn</span>(<span class="params">course</span>) { </span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">name</span>+<span class="string">'正在学'</span> + course);</span><br><span class="line"> },</span><br><span class="line"> };</span><br><span class="line"> <span class="keyword">let</span> customer = {</span><br><span class="line"> <span class="attr">name</span>: <span class="string">'lucy'</span>,</span><br><span class="line"> };</span><br><span class="line"> user.<span class="property">learn</span>.<span class="title function_">apply</span>(customer,[<span class="string">'javascript'</span>]);<span class="comment">//注意中括号</span></span><br><span class="line"><span class="comment">//控制台:lucy正在学javascript</span></span><br></pre></td></tr></table></div></figure>
<p>apply的最大不同就是参数列表要以<strong>数组的形式</strong>传入</p>
<p>bind与上面两个方法区别较大,首先,bind不会调用函数</p>
<p>示例五:</p>
<figure class="highlight js"><div class="table-container"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> user = {</span><br><span class="line"> <span class="attr">name</span>: <span class="string">'scott'</span>,</span><br><span class="line"> <span class="title function_">showName</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'我是'</span> + <span class="variable language_">this</span>.<span class="property">name</span>);</span><br><span class="line"> },</span><br><span class="line"> };</span><br><span class="line"> <span class="keyword">let</span> customer = {</span><br><span class="line"> <span class="attr">name</span>:<span class="string">'company'</span></span><br><span class="line"> };</span><br><span class="line"> user.<span class="property">showName</span>.<span class="title function_">bind</span>(customer);</span><br><span class="line"><span class="comment">//控制台:什么都没有</span></span><br></pre></td></tr></table></div></figure>
<p>bind的实质是返回一个改变了this指向的函数,我们要用变量接收它后才能看到它的作用</p>
<figure class="highlight js"><div class="table-container"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> user = {</span><br><span class="line"> <span class="attr">name</span>: <span class="string">'scott'</span>,</span><br><span class="line"> <span class="title function_">showName</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'我是'</span> + <span class="variable language_">this</span>.<span class="property">name</span>);</span><br><span class="line"> },</span><br><span class="line"> };</span><br><span class="line"> <span class="keyword">let</span> customer = {</span><br><span class="line"> <span class="attr">name</span>:<span class="string">'company'</span></span><br><span class="line"> };</span><br><span class="line"> <span class="keyword">let</span> test= user.<span class="property">showName</span>.<span class="title function_">bind</span>(customer);</span><br><span class="line"> <span class="title function_">test</span>()</span><br><span class="line"> <span class="comment">//控制台:我是company</span></span><br></pre></td></tr></table></div></figure>
<p>依然是改变了this的指向</p>
<p>应用:</p>
<p>使用call、bind、apply可以实现子类使用父类的方法</p>
<figure class="highlight js"><div class="table-container"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Person</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">job</span> = <span class="keyword">function</span> (<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'前端开发'</span>);</span><br><span class="line"> };</span><br><span class="line">}</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">Runner</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">run</span> = <span class="keyword">function</span> (<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'跑步'</span>);</span><br><span class="line"> };</span><br><span class="line">}</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">Swimmer</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="title class_">Person</span>.<span class="title function_">call</span>(<span class="variable language_">this</span>);</span><br><span class="line"> <span class="title class_">Runner</span>.<span class="title function_">call</span>(<span class="variable language_">this</span>);</span><br><span class="line">}</span><br><span class="line"><span class="keyword">let</span> swimmer = <span class="keyword">new</span> <span class="title class_">Swimmer</span>();</span><br><span class="line"></span><br><span class="line">swimmer.<span class="title function_">job</span>();<span class="comment">//前端开发</span></span><br><span class="line">swimmer.<span class="title function_">run</span>();<span class="comment">//跑步</span></span><br></pre></td></tr></table></div></figure>
<p>swimmer获得job方法和run方法</p>
</div></div></article><article class="postlist-item post"><header class="post-header"><h1 class="post-title"><a class="post-title__link" href="/2022/09/17/JS%E5%A4%8D%E4%B9%A0%E7%B3%BB%E5%88%97%E2%80%94%E2%80%94%E9%98%B2%E6%8A%96%E3%80%81%E8%8A%82%E6%B5%81%E5%8F%8A%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF/">JS复习系列——防抖、节流及应用场景</a></h1><div class="post-meta"><span class="post-meta-item post-meta-item--createtime"><span class="post-meta-item__icon"><i class="far fa-calendar-plus"></i></span><span class="post-meta-item__info">发表于</span><span class="post-meta-item__value">2022-09-17</span></span><span class="post-meta-item post-meta-item--updatetime"><span class="post-meta-item__icon"><i class="far fa-calendar-check"></i></span><span class="post-meta-item__info">更新于</span><span class="post-meta-item__value">2022-09-18</span></span></div></header><div class="post-body"><div class="post-excerpt"><p>来说一下防抖,什么是防抖,简单通俗的说,就是在一段时间内只执行最后一次,避免重复请求,提高性能。</p>
<p>场景:多用于提交信息input和输入框,比如注册用户名时,检测其用户名是否规范,未重复。频繁的输入内容会不停的向服务器发送请求,影响性能,所以理想状态下,我们只想要延迟一定时间后的内容。</p>
<figure class="highlight html"><div class="table-container"><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="tag"><<span class="name">body</span>></span></span><br><span class="line"> 搜索框:<span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> /></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">let</span> <span class="title class_">Input</span> = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">'input'</span>);</span></span><br><span class="line"><span class="language-javascript"> <span class="title class_">Input</span>.<span class="property">oninput</span> = <span class="keyword">function</span> (<span class="params"></span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">value</span>)</span></span><br><span class="line"><span class="language-javascript"> };</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line">//搜索框中搜索‘前端’,控制台有9条信息</span><br></pre></td></tr></table></div></figure>
<p>现在就可以用防抖进行优化,核心思想就是利用定时器来设置请求的触发机制</p>
<figure class="highlight html"><div class="table-container"><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></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> 搜索框:<span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> /></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">let</span> <span class="title class_">Input</span> = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">'input'</span>);</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">let</span> t = <span class="literal">null</span>;<span class="comment">//用t来判断</span></span></span><br><span class="line"><span class="language-javascript"> <span class="title class_">Input</span>.<span class="property">oninput</span> = <span class="keyword">function</span> (<span class="params"></span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">if</span> (t !== <span class="literal">null</span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//t每次变化的时候都会关闭定时器</span></span></span><br><span class="line"><span class="language-javascript"> <span class="built_in">clearTimeout</span>(t);</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//t会接收定时器的返回数字,1000ms后输出文本框内容</span></span></span><br><span class="line"><span class="language-javascript"> t = <span class="built_in">setTimeout</span>(<span class="function">() =></span> { </span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">value</span>);</span></span><br><span class="line"><span class="language-javascript"> },<span class="number">1000</span>);</span></span><br><span class="line"><span class="language-javascript"> };</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></div></figure>
<p>这段代码就是每当输入框内容有变化(1000ms以内),定时器的输出任务就会重启,不停的关闭开启定时器。因为定时器的返回值是number,引入t来判断。</p>
<p>节流的话就是控制执行的次数,和防抖类似,在规定时间内只能触发一次</p>
<p>场景:页面滚动事件,连续点击事件</p>
</div></div></article><article class="postlist-item post"><header class="post-header"><h1 class="post-title"><a class="post-title__link" href="/2022/09/15/JS%E5%A4%8D%E4%B9%A0%E7%B3%BB%E5%88%97%E2%80%94%E2%80%94js%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF%E3%80%81%E5%AE%8F%E4%BB%BB%E5%8A%A1%E3%80%81%E5%BE%AE%E4%BB%BB%E5%8A%A1/">JS复习系列——事件循环、宏任务、微任务</a></h1><div class="post-meta"><span class="post-meta-item post-meta-item--createtime"><span class="post-meta-item__icon"><i class="far fa-calendar-plus"></i></span><span class="post-meta-item__info">发表于</span><span class="post-meta-item__value">2022-09-15</span></span><span class="post-meta-item post-meta-item--updatetime"><span class="post-meta-item__icon"><i class="far fa-calendar-check"></i></span><span class="post-meta-item__info">更新于</span><span class="post-meta-item__value">2022-10-26</span></span></div></header><div class="post-body"><div class="post-excerpt"><p>最近复习到了js事件循环机制,也看了很多课程:</p>
<p>youtube:<span class="exturl"><a class="exturl__link" target="_blank" rel="noopener" href="https://www.youtube.com/watch?v=cCOL7MC4Pl0" >Jake Archibald: 在循环 - JSConf.Asia - YouTube</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span>;</p>
<p>上面的国内b站有搬运:<span class="exturl"><a class="exturl__link" target="_blank" rel="noopener" href="https://www.bilibili.com/video/BV1K4411D7Jb?share_source=copy_web&vd_source=1cdf3cad8c4bb077b61d8017c2710e49" >【事件循环】【前端】事件原理讲解,超级硬核,忍不住转载_哔哩哔哩_bilibili</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span></p>
<p>b站上<span class="exturl"><a class="exturl__link" target="_blank" rel="noopener" href="https://www.bilibili.com/video/BV1gB4y1K7bD/?spm_id_from=333.788.recommend_more_video.3" >前端面试题:JavaScript运行机制(一)单线程_哔哩哔哩_bilibili</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span></p>
<p>首先,浏览器是多线程的,而js是异步单线程的,</p>
<p>常驻线程有:</p>
<p>(1)GUI渲染线程:负责给浏览器解析html、css构建dom树,该线程与js线程互斥,双方同一时刻只有一个在运行</p>
<p>(2)JS引擎线程(web worker):负责处理js脚本程序,运行代码</p>
<p>(3)浏览器事件线程(onclick):当<strong>事件符合触发条件被触发时(如点击,移动等操作)</strong>,该线程会把事件添加到<strong>任务队列末尾</strong>,等待JS引擎的处理</p>
<p>非常驻线程:</p>
<p>(4)定时器触发线程</p>
<p>(5)http异步线程</p>
<p>(6)EventLoop事件循环处理线程</p>
<p>先看一道题</p>
<p>示例一:</p>
<figure class="highlight js"><div class="table-container"><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></pre></td><td class="code"><pre><span class="line"> <span class="built_in">setTimeout</span>(<span class="function">() =></span> {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'A'</span>);</span><br><span class="line"> }, <span class="number">20</span>);</span><br><span class="line"></span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'B'</span>);</span><br><span class="line"></span><br><span class="line"> <span class="built_in">setTimeout</span>(<span class="function">() =></span> {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'C'</span>);</span><br><span class="line"> }, <span class="number">10</span>);</span><br><span class="line"></span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'D'</span>);</span><br><span class="line"></span><br><span class="line"> <span class="built_in">setTimeout</span>(<span class="function">() =></span> {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'E'</span>);</span><br><span class="line"> }, <span class="number">20</span>);</span><br><span class="line"></span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'F'</span>);</span><br><span class="line"></span><br><span class="line"> <span class="built_in">setTimeout</span>(<span class="function">() =></span> {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'G'</span>);</span><br><span class="line"> }, <span class="number">10</span>);</span><br><span class="line"><span class="comment">//B D F C G A E</span></span><br></pre></td></tr></table></div></figure>
<p>这题很简单,只有回调函数和同步任务,同步任务全部直接依次进入调用栈中,按顺序输出<strong>B D F</strong>,而回调函数则会进入任务队列,等待事件循环触发任务,<strong>C G</strong>事件比<strong>A E</strong>事件更快触发,所以更早进入调用栈中。</p>
<p>示例二:</p>
<figure class="highlight js"><div class="table-container"><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></pre></td><td class="code"><pre><span class="line"> <span class="built_in">setTimeout</span>(<span class="function">() =></span> {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'A'</span>);</span><br><span class="line"> }, <span class="number">20</span>);</span><br><span class="line"></span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'B'</span>);</span><br><span class="line"></span><br><span class="line"> <span class="built_in">setTimeout</span>(<span class="function">() =></span> {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'C'</span>);</span><br><span class="line"> }, <span class="number">10</span>);</span><br><span class="line"></span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'D'</span>);</span><br><span class="line"> </span><br><span class="line"> <span class="comment">//计时器运行155ms</span></span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">time</span>(<span class="string">'test'</span>);</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i < <span class="number">100000000</span>; i++) {}</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">timeEnd</span>(<span class="string">'test'</span>);</span><br><span class="line"> </span><br><span class="line"> <span class="built_in">setTimeout</span>(<span class="function">() =></span> {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'E'</span>);</span><br><span class="line"> }, <span class="number">20</span>);</span><br><span class="line"></span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'F'</span>);</span><br><span class="line"></span><br><span class="line"> <span class="built_in">setTimeout</span>(<span class="function">() =></span> {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'G'</span>);</span><br><span class="line"> }, <span class="number">10</span>);</span><br><span class="line"><span class="comment">//B D F C A G E</span></span><br></pre></td></tr></table></div></figure>
<p>在中间加了个计时器,答案马上不同了。B D F C还是和上面一样,同步任务依次序调用,但是要注意由于计时器的原因,A C进入任务队列的时间要比E G早,具体早多少呢?问题的关键就在这里,通过运行得知计时器运行了155ms,所以A C比E G早155ms进入任务队列,而定时器A放入队列的时间为20ms,C放入时间为10ms,E由于计时器的阻塞,实际放入队列的时间是20ms+155ms,G同理,时间为10ms+155ms。所以输出顺序为C A G E</p>
<p>示例三:</p>
<figure class="highlight js"><div class="table-container"><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></pre></td><td class="code"><pre><span class="line"> <span class="keyword">async</span> <span class="keyword">function</span> <span class="title function_">async1</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'A'</span>);</span><br><span class="line"> <span class="keyword">await</span> <span class="title function_">async2</span>();</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'B'</span>);</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">async</span> <span class="keyword">function</span> <span class="title function_">async2</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'C'</span>);</span><br><span class="line"> }</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'D'</span>);</span><br><span class="line"> <span class="built_in">setTimeout</span>(<span class="keyword">function</span> (<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'E'</span>);</span><br><span class="line"> }, <span class="number">0</span>);</span><br><span class="line"> <span class="title function_">async1</span>();</span><br><span class="line"> <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="keyword">function</span> (<span class="params">resolve</span>) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'F'</span>);</span><br><span class="line"> <span class="title function_">resolve</span>();</span><br><span class="line"> }).<span class="title function_">then</span>(<span class="keyword">function</span> (<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'G'</span>);</span><br><span class="line"> });</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'H'</span>);</span><br><span class="line"><span class="comment">//DACFHBGE</span></span><br></pre></td></tr></table></div></figure>
<p>这里就要涉及到微任务和宏任务了,宏任务是由node、浏览器发起的,而微任务是由js引擎发起的。<strong>在执行过程中遵循先同后异,先微后宏的原则</strong>。在这道题中,很显然,调用栈中第一个放入的是D,然后定时器setTimeout把E放入宏任务中等待,接着是调用async1函数,这个函数实际上是一个promise同步函数,而<strong>promise是一个同步构造函数,其then的返回是一个微任务异步函数</strong>。根据这个特点,A就进入调用栈中,排在D后面。async1中调用await async2,await async2就是一个变相的promise,因此async2的C就放入到调用栈中,排在A后面。然后接下去还是promise对象,同理,F放入同步调用栈中,then是异步任务,不用考虑。然后H放入调用栈中,立即输出的同步任务DACFH全部结束。</p>
<p>然后看异步任务,异步任务根据先微后宏的原则,先来分一下类:async1中的B是微任务,定时器的E是宏任务,then中的G是一个微任务。所以结果很明确,BGE依次排队进入调用栈输出。</p>
<p><strong>宏任务:</strong></p>
<p><strong>1.script (可以理解为外层同步代码)</strong></p>
<p><strong>2.setTimeout/setInterval</strong></p>
<p><strong>3. UI rendering/UI事件</strong></p>
<p><strong>4. postMessage,MessageChannel5. setImmediate,I/O(Node.js)</strong></p>
<p><strong>微任务:</strong></p>
<p><strong>1.Promise</strong></p>
<p><strong>2.process.nextTick(Node.js)</strong></p>
<p><strong>3.Object.observe(已废弃;Proxy 对象替代)</strong></p>
<p><strong>4.MutaionObserver</strong></p>
<p>示例四:</p>
<figure class="highlight js"><div class="table-container"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> button = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">'button'</span>);</span><br><span class="line"> button.<span class="title function_">addEventListener</span>(<span class="string">'click'</span>, <span class="function">() =></span> {</span><br><span class="line"> <span class="title class_">Promise</span>.<span class="title function_">resolve</span>().<span class="title function_">then</span>(<span class="function">() =></span> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'Microtask 1'</span>));</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'Listener 1'</span>);</span><br><span class="line"> });</span><br><span class="line"> button.<span class="title function_">addEventListener</span>(<span class="string">'click'</span>, <span class="function">() =></span> {</span><br><span class="line"> <span class="title class_">Promise</span>.<span class="title function_">resolve</span>().<span class="title function_">then</span>(<span class="function">() =></span> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'Microtask 2'</span>));</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'Listener 2'</span>);</span><br><span class="line"> <span class="comment">//点击按钮输出L1 M1 L2 M2</span></span><br></pre></td></tr></table></div></figure>
<p>首先上下两段点击事件整体相同,只有输出内容不同。按顺序,点击后肯定先执行第一个事件。第一个事件中的promise后面的then上文说过是异步函数,所以L1最先输出,那么问题的关键就是第二个输出谁呢?是下面的L2吗?并不是的,因为第一个事件相当于一个主线程的运行逻辑,它与第二个事件是不同的线程。L1输出之后调用栈就空了,同步执行完毕就要执行异步任务了,接着找到then的M1。这之后才轮到第二个点击事件执行,同理,输出L2 M2。</p>
<p>示例五:</p>
<figure class="highlight js"><div class="table-container"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> button = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">'button'</span>);</span><br><span class="line"> button.<span class="title function_">addEventListener</span>(<span class="string">'click'</span>, <span class="function">() =></span> {</span><br><span class="line"> <span class="title class_">Promise</span>.<span class="title function_">resolve</span>().<span class="title function_">then</span>(<span class="function">() =></span> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'Microtask 1'</span>));</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'Listener 1'</span>);</span><br><span class="line"> });</span><br><span class="line"> button.<span class="title function_">addEventListener</span>(<span class="string">'click'</span>, <span class="function">() =></span> {</span><br><span class="line"> <span class="title class_">Promise</span>.<span class="title function_">resolve</span>().<span class="title function_">then</span>(<span class="function">() =></span> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'Microtask 2'</span>));</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'Listener 2'</span>);</span><br><span class="line"> </span><br><span class="line"> button.<span class="title function_">click</span>()</span><br><span class="line"> <span class="comment">//点击按钮输出L1 L2 M1 M2</span></span><br></pre></td></tr></table></div></figure>
<p> 与上文唯一的不同在于button按钮是模拟点击事件,这就相当于声明了一个函数,调用栈中激活了click函数。而在这个线程中,两个点击事件都在里面,这是最关键的。所以先同后异,L1 L2 M1 M2。</p>
</div></div></article><article class="postlist-item post"><header class="post-header"><h1 class="post-title"><a class="post-title__link" href="/2022/09/09/JS%E5%A4%8D%E4%B9%A0%E7%B3%BB%E5%88%97%E2%80%94%E2%80%94const%E3%80%81let%E3%80%81var%E5%8C%BA%E5%88%AB/">JS复习系列——const、let、var区别</a></h1><div class="post-meta"><span class="post-meta-item post-meta-item--createtime"><span class="post-meta-item__icon"><i class="far fa-calendar-plus"></i></span><span class="post-meta-item__info">发表于</span><span class="post-meta-item__value">2022-09-09</span></span><span class="post-meta-item post-meta-item--updatetime"><span class="post-meta-item__icon"><i class="far fa-calendar-check"></i></span><span class="post-meta-item__info">更新于</span><span class="post-meta-item__value">2022-09-18</span></span></div></header><div class="post-body"><div class="post-excerpt"><p>记录复习内容,es6中新增了let和const两个声明变量的关键字,简单的说一下区别:</p>
<p>1.var可以重复声明相同的变量名,const和let不行</p>
<p>示例一:</p>
<figure class="highlight js"><div class="table-container"><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></pre></td><td class="code"><pre><span class="line"> <span class="keyword">const</span> a = <span class="number">1</span>;</span><br><span class="line"> <span class="keyword">const</span> a = <span class="number">2</span>;<span class="comment">//语法报错</span></span><br><span class="line"> ---------------------------分割线-----------------------------------</span><br><span class="line"> <span class="keyword">let</span> b = <span class="number">3</span>;</span><br><span class="line"> <span class="keyword">let</span> b = <span class="number">4</span>;<span class="comment">//语法报错</span></span><br><span class="line"> ---------------------------分割线-----------------------------------</span><br><span class="line"> <span class="keyword">var</span> c = <span class="number">5</span>;</span><br><span class="line"> <span class="keyword">var</span> c = <span class="number">6</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(c)<span class="comment">//6,取最后声明的值</span></span><br></pre></td></tr></table></div></figure>
<p>2.var会变量提升,let和const不会</p>
<p>示例二:</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a;<span class="comment">//先声明变量a</span></span><br><span class="line">a = <span class="number">1</span>;<span class="comment">//将1赋值给a</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a);<span class="comment">//结果为1,最常规的方法,等于分解var a = 2的步骤</span></span><br></pre></td></tr></table></div></figure>
<p>示例三:</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">a=<span class="number">1</span>;<span class="comment">//先赋值</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a);<span class="comment">//结果为1,成功</span></span><br><span class="line"><span class="keyword">var</span> a;<span class="comment">//声明变量a</span></span><br></pre></td></tr></table></div></figure>
<p>这里就体现了var的变量提升,编译的时候,会将var声明的变量提升等级,编译顺序更优先,示例三的实际编译顺序就等于示例二,var声明的顺序优先于赋值,所以不报错(函数声明的优先级比var更高)</p>
<p>3.let存在暂时性死区</p>
<p>示例四:</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">a=<span class="number">1</span>;<span class="comment">//先赋值</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a);<span class="comment">//报错:Uncaught ReferenceError: Cannot access 'a' before initialization</span></span><br><span class="line"><span class="keyword">let</span> a;<span class="comment">//声明变量a</span></span><br></pre></td></tr></table></div></figure>
<p>let报错,未初始化,这就是let的暂时性死区。变量的声明,初始化,赋值是不同的阶段,let在这里没有初始化就赋值,输出。而const在声明变量的时候必须赋值,否则语法直接报错。而var声明变量后会立即初始化变量为undefined</p>
<p>示例五:</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a;</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(a)<span class="comment">//结果为undefined,var声明后立即初始化为undefined</span></span><br></pre></td></tr></table></div></figure>
<p>3.const定义的叫常量,后期无法进行修改,let,var可以修改值</p>
<p>示例六:</p>
<figure class="highlight js"><div class="table-container"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="number">1</span>;</span><br><span class="line"> a = <span class="number">2</span>;</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(a); <span class="comment">//结果为2,</span></span><br><span class="line"></span><br><span class="line"> <span class="keyword">let</span> b = <span class="number">3</span>;</span><br><span class="line"> b = <span class="number">4</span>;</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(b); <span class="comment">//结果为4</span></span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> c = <span class="number">5</span>;</span><br><span class="line"> c = <span class="number">6</span>;</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(c); <span class="comment">//报错TypeError: Assignment to constant variable.无法赋值给常量</span></span><br></pre></td></tr></table></div></figure>
<p>4.const、let存在块级作用域,简单理解为作用在{}之内。var的作用域是所在的上下文</p>
<figure class="highlight js"><div class="table-container"><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">function</span> <span class="title function_">varTest</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">var</span> a = <span class="number">1</span>;</span><br><span class="line"> {</span><br><span class="line"> <span class="keyword">var</span> a = <span class="number">2</span>; </span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(a); <span class="comment">// 2</span></span><br><span class="line"> }</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(a); <span class="comment">// 结果为代码块里赋值的2</span></span><br><span class="line"> }</span><br><span class="line"> <span class="title function_">varTest</span>();</span><br><span class="line">---------------------------分割线-----------------------------------</span><br><span class="line"> <span class="keyword">function</span> <span class="title function_">letTest</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">let</span> a = <span class="number">1</span>;</span><br><span class="line"> {</span><br><span class="line"> <span class="keyword">let</span> a = <span class="number">2</span>; </span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(a); <span class="comment">// 2</span></span><br><span class="line"> }</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(a); <span class="comment">// 结果是自身块级作用域的1</span></span><br><span class="line"> }</span><br><span class="line"> <span class="title function_">letTest</span>();</span><br></pre></td></tr></table></div></figure>
</div></div></article><article class="postlist-item post"><header class="post-header"><h1 class="post-title"><a class="post-title__link" href="/2022/09/08/JS%E5%A4%8D%E4%B9%A0%E7%B3%BB%E5%88%97%E2%80%94%E2%80%94%E4%BD%9C%E7%94%A8%E5%9F%9F%E3%80%81%E4%BD%9C%E7%94%A8%E5%9F%9F%E9%93%BE/">JS复习系列——作用域、作用域链</a></h1><div class="post-meta"><span class="post-meta-item post-meta-item--createtime"><span class="post-meta-item__icon"><i class="far fa-calendar-plus"></i></span><span class="post-meta-item__info">发表于</span><span class="post-meta-item__value">2022-09-08</span></span><span class="post-meta-item post-meta-item--updatetime"><span class="post-meta-item__icon"><i class="far fa-calendar-check"></i></span><span class="post-meta-item__info">更新于</span><span class="post-meta-item__value">2022-09-08</span></span></div></header><div class="post-body"><div class="post-excerpt"><p>最近在复习js的知识,就发在blog上。PS:新人理解不全面,有推荐的文章可以推给我</p>
<p>js的作用域和作用域链是比较基本的问题,实际就是访问权限的问题。概括一下:</p>
<p>1.内部函数可以访问外部的函数的属性、方法,而外部函数不能访问内部函数的属性、方法</p>
<figure class="highlight js"><div class="table-container"><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></pre></td><td class="code"><pre><span class="line"> <span class="comment">//创建一个外部函数outer</span></span><br><span class="line"> <span class="keyword">function</span> <span class="title function_">outer</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">const</span> a = <span class="number">1</span>;</span><br><span class="line"> <span class="keyword">const</span> b = <span class="number">2</span>;</span><br><span class="line"> <span class="comment">//创建一个内部函数inner</span></span><br><span class="line"> <span class="keyword">function</span> <span class="title function_">inner</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">const</span> c = <span class="number">3</span>;</span><br><span class="line"> <span class="keyword">const</span> d = <span class="number">4</span>;</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'a='</span> + a);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'c='</span> + c);</span><br><span class="line"> }</span><br><span class="line"> <span class="title function_">inner</span>()</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'d='</span>+ d)</span><br><span class="line"></span><br><span class="line"> }</span><br><span class="line"> <span class="title function_">outer</span>()</span><br><span class="line"></span><br><span class="line">--------------------------分割线-------------------------------------</span><br><span class="line">控制台结果如下:</span><br><span class="line">a=<span class="number">1</span></span><br><span class="line">c=<span class="number">3</span></span><br><span class="line">报错❌:d is not defined</span><br></pre></td></tr></table></div></figure>
<p>2.无论外部函数还是内部函数都可以访问全局变量</p>
<figure class="highlight js"><div class="table-container"><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="comment">//设置全局变量</span></span><br><span class="line"> <span class="keyword">const</span> a = <span class="number">10</span>;</span><br><span class="line"> <span class="comment">//创建一个外部函数outer</span></span><br><span class="line"> <span class="keyword">function</span> <span class="title function_">outer</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">const</span> b = <span class="number">2</span>;</span><br><span class="line"> <span class="comment">//创建一个内部函数inner</span></span><br><span class="line"> <span class="keyword">function</span> <span class="title function_">inner</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">const</span> c = <span class="number">3</span>;</span><br><span class="line"> <span class="keyword">const</span> d = <span class="number">4</span>;</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'a='</span> + a);</span><br><span class="line"> }</span><br><span class="line"> <span class="title function_">inner</span>()</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'a='</span> + a)</span><br><span class="line"> }</span><br><span class="line"> <span class="title function_">outer</span>()</span><br><span class="line">--------------------------分割线-------------------------------------</span><br><span class="line">控制台结果如下:</span><br><span class="line">a=<span class="number">10</span></span><br><span class="line">a=<span class="number">10</span></span><br></pre></td></tr></table></div></figure>
<p>3.变量访问具有优先级,优先从原作用域访问,找不到会依次向父级作用域访问,直到找到为止。</p>
<p>这种层层寻找的模式就是作用域链</p>
<p>示例一:</p>
<figure class="highlight js"><div class="table-container"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//设置全局变量</span></span><br><span class="line"> <span class="keyword">const</span> a = <span class="number">10</span>;</span><br><span class="line"> <span class="keyword">const</span> c = <span class="number">20</span>;</span><br><span class="line"> <span class="comment">//创建一个外部函数outer</span></span><br><span class="line"> <span class="keyword">function</span> <span class="title function_">outer</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">const</span> b = <span class="number">2</span>;</span><br><span class="line"> <span class="comment">//创建一个内部函数inner</span></span><br><span class="line"> <span class="keyword">function</span> <span class="title function_">inner</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">const</span> c = <span class="number">3</span>;</span><br><span class="line"> <span class="keyword">const</span> d = <span class="number">4</span>;</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'a='</span> + a);<span class="comment">//访问到最外部的全局变量a=10</span></span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'b='</span> + b); <span class="comment">//访问到outer的b=2</span></span><br><span class="line"> }</span><br><span class="line"> <span class="title function_">inner</span>()</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'c='</span> + c)<span class="comment">//无法访问outer的c,只能访问外部的全局变量c=20</span></span><br><span class="line"> }</span><br><span class="line"> <span class="title function_">outer</span>()</span><br><span class="line">--------------------------分割线-------------------------------------</span><br><span class="line">控制台结果如下:</span><br><span class="line">a=<span class="number">10</span></span><br><span class="line">b=<span class="number">2</span></span><br><span class="line">c=<span class="number">20</span></span><br></pre></td></tr></table></div></figure>
<p>示例二:调用test方法会定位到outer原函数的作用域中,不会在test方法所在的全局变量中访问b=100</p>
<figure class="highlight js"><div class="table-container"><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></pre></td><td class="code"><pre><span class="line"> <span class="comment">//设置全局变量</span></span><br><span class="line"> <span class="keyword">const</span> a = <span class="number">10</span>;</span><br><span class="line"> <span class="keyword">const</span> c = <span class="number">20</span>;</span><br><span class="line"> <span class="comment">//创建一个外部函数outer</span></span><br><span class="line"> <span class="keyword">function</span> <span class="title function_">outer</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">const</span> b = <span class="number">2</span>;</span><br><span class="line"> <span class="comment">//创建一个内部函数inner</span></span><br><span class="line"> <span class="keyword">function</span> <span class="title function_">inner</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">const</span> c = <span class="number">3</span>;</span><br><span class="line"> <span class="keyword">const</span> d = <span class="number">4</span>;</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(a+b)<span class="comment">//12</span></span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> inner</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">const</span> test = <span class="title function_">outer</span>();</span><br><span class="line"> <span class="keyword">const</span> b = <span class="number">100</span>;</span><br><span class="line"> <span class="title function_">test</span>()</span><br><span class="line">--------------------------分割线-------------------------------------</span><br><span class="line">控制台结果如下:</span><br><span class="line"><span class="number">12</span></span><br></pre></td></tr></table></div></figure>
</div></div></article><article class="postlist-item post"><header class="post-header"><h1 class="post-title"><a class="post-title__link" href="/2022/08/25/test/">比较随意的第一次发文</a></h1><div class="post-meta"><span class="post-meta-item post-meta-item--createtime"><span class="post-meta-item__icon"><i class="far fa-calendar-plus"></i></span><span class="post-meta-item__info">发表于</span><span class="post-meta-item__value">2022-08-25</span></span><span class="post-meta-item post-meta-item--updatetime"><span class="post-meta-item__icon"><i class="far fa-calendar-check"></i></span><span class="post-meta-item__info">更新于</span><span class="post-meta-item__value">2022-10-21</span></span></div></header><div class="post-body"><div class="post-excerpt"><p>今天研究完了hexo,改了主题页面,其实本来想自己搭一个博客的,之前也确实有在写。只是后来想到网络安全问题,浏览过别人搭的博客,看到好心人留言有安全隐患。作为一名新手,网络安全的处理方法还没仔细研究过,就背了一点相关的八股文,什么反射型XSS等。恰巧看到hexo的有个主题和我原先构想的demo大差不差,就直接拿来用了。博客嘛,内容为王,以后经验丰富了,再来完善我的博客demo也不迟(其实雏形已经有了,卡在了数据接口这块)。</p>
<img src="https://s1.ax1x.com/2022/10/21/xcuym8.jpg" style="zoom:50%;" />
</div></div></article></section><nav class="paginator"><div class="paginator-inner"><span class="page-number current">1</span></div></nav></div></div><div class="sidebar-wrap" id="sidebar-wrap"><aside class="sidebar" id="sidebar"><section class="sidebar-toc hide"></section><!-- ov = overview--><section class="sidebar-ov"><div class="sidebar-ov-author"><div class="sidebar-ov-author__avatar"><img class="sidebar-ov-author__avatar_img" src="/images/icons/MyLogo.jpg" alt="avatar"></div><p class="sidebar-ov-author__text">Find my way</p></div><div class="sidebar-ov-social"><a class="sidebar-ov-social-item" href="https://github.com/scottjustcode" target="_blank" rel="noopener" data-popover="Github" data-popover-pos="up"><span class="sidebar-ov-social-item__icon"><i class="fab fa-github"></i></span></a><a class="sidebar-ov-social-item" href="/images/myWechat.jpg" target="_blank" rel="noopener" data-popover="微信" data-popover-pos="up"><span class="sidebar-ov-social-item__icon"><i class="fab fa-weixin"></i></span></a><a class="sidebar-ov-social-item" href="https://juejin.cn/user/3277017679398526" target="_blank" rel="noopener" data-popover="掘金" data-popover-pos="up"><span class="sidebar-ov-social-item__icon">掘</span></a></div><div class="sidebar-ov-state"><a class="sidebar-ov-state-item sidebar-ov-state-item--posts" href="/archives/"><div class="sidebar-ov-state-item__count">7</div><div class="sidebar-ov-state-item__name">归档</div></a><a class="sidebar-ov-state-item sidebar-ov-state-item--categories" href="/categories/"><div class="sidebar-ov-state-item__count">0</div><div class="sidebar-ov-state-item__name">分类</div></a><a class="sidebar-ov-state-item sidebar-ov-state-item--tags" href="/tags/"><div class="sidebar-ov-state-item__count">3</div><div class="sidebar-ov-state-item__name">标签</div></a></div><div class="sidebar-ov-cc"><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" target="_blank" rel="noopener" data-popover="知识共享许可协议" data-popover-pos="up"><img src="/images/cc-by-nc-sa.svg"></a></div></section></aside></div><div class="clearfix"></div></div></main><footer class="footer" id="footer"><div class="footer-inner"></div></footer><div class="loading-bar" id="loading-bar"><div class="loading-bar__progress"></div></div><div class="back2top" id="back2top"><span class="back2top__icon"><i class="fas fa-rocket"></i></span></div></div><script src="https://cdn.jsdelivr.net/npm/jquery@v3.4.1/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-animate@1.5.2/velocity.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-animate@1.5.2/velocity.ui.min.js"></script><script src="/js/utils.js?v=2.7.0"></script><script src="/js/stun-boot.js?v=2.7.0"></script><script src="/js/scroll.js?v=2.7.0"></script><script src="/js/header.js?v=2.7.0"></script><script src="/js/sidebar.js?v=2.7.0"></script></body></html>