<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>JavaScript on 日日是好日</title><link>https://jjjjjjy.github.io/posts/javascript/</link><description>Recent content in JavaScript on 日日是好日</description><generator>Hugo -- gohugo.io</generator><language>zh-cn</language><lastBuildDate>Fri, 13 Mar 2026 14:47:52 +0800</lastBuildDate><atom:link href="https://jjjjjjy.github.io/posts/javascript/index.xml" rel="self" type="application/rss+xml"/><item><title>Promise</title><link>https://jjjjjjy.github.io/posts/javascript/promise/</link><pubDate>Fri, 13 Mar 2026 14:47:52 +0800</pubDate><guid>https://jjjjjjy.github.io/posts/javascript/promise/</guid><description>&lt;h4 id="promise-定义"&gt;Promise 定义
&lt;/h4&gt;&lt;ol&gt;
&lt;li&gt;Promise 是 JS 提供的&lt;strong&gt;异步&lt;/strong&gt;解决方案。&lt;/li&gt;
&lt;li&gt;内部存在三种状态：pending fulfilled rejected。状态一旦改变不可逆。&lt;/li&gt;
&lt;li&gt;Promise 内部维护两个回调队列：onFulfilledCallbacks和onRejectedCallbacks。then 会把回调存入队列。当 resolve 或 reject 时，会执行对应回调。&lt;/li&gt;
&lt;li&gt;then 返回新的 Promise，因此可以实现链式调用。&lt;/li&gt;
&lt;/ol&gt;
&lt;h4 id="promise-状态"&gt;Promise 状态
&lt;/h4&gt;&lt;p&gt;pending 等待
fulfilled 成功
rejected 失败&lt;/p&gt;
&lt;p&gt;状态变化
pending → fulfilled
pending → rejected&lt;/p&gt;
&lt;p&gt;状态一旦改变就不能再变。【原因:避免竞态条件】&lt;/p&gt;
&lt;h4 id="promise-特点"&gt;Promise 特点
&lt;/h4&gt;&lt;p&gt;Promise 最大的特点是 then会返回新的Promise。也就是Promise可以进行链式调用，因此可以解决回调地狱&lt;/p&gt;
&lt;h4 id="promise-本质"&gt;Promise 本质
&lt;/h4&gt;&lt;p&gt;Promise的本质是 状态 + 回调队列&lt;/p&gt;</description></item><item><title>闭包</title><link>https://jjjjjjy.github.io/posts/javascript/closure/</link><pubDate>Sat, 28 Feb 2026 14:26:13 +0800</pubDate><guid>https://jjjjjjy.github.io/posts/javascript/closure/</guid><description>&lt;h1 id="闭包"&gt;闭包
&lt;/h1&gt;&lt;p&gt;&lt;strong&gt;闭包概念：&lt;/strong&gt;&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;闭包是函数在创建时形成的词法作用域绑定关系。&lt;/li&gt;
&lt;li&gt;本质是函数对象内部持有对其创建时作用域的引用。&lt;/li&gt;
&lt;li&gt;当函数在其定义作用域之外执行时，仍然可以访问当时的变量，这种机制就是闭包。&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;📍形成闭包的必要条件：&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;内部函数引用了外部变量&lt;/li&gt;
&lt;li&gt;内部函数有没有活到外层函数结束之后&lt;/li&gt;
&lt;li&gt;这个内部函数在外部仍然存在&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;📍 闭包什么时候产生？&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;函数创建时就产生闭包结构&lt;/strong&gt;，但只有函数逃逸时才会保留环境。&lt;/p&gt;
&lt;h3 id="词法作用域"&gt;词法作用域：
&lt;/h3&gt;&lt;p&gt;词法作用域（Lexical Scope）是指：变量的作用域在代码“&lt;strong&gt;写出来&lt;/strong&gt;”的时候就已经确定了。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;词法作用域是指变量的作用域在代码定义阶段就已经确定，由函数的书写位置决定，而不是由调用位置决定。&lt;/li&gt;
&lt;li&gt;JavaScript 是词法作用域语言，函数在创建时会记录其外部词法环境，变量查找沿着作用域链向外进行。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;经典例子：log打印的是1，而不是2。 因为foo被定义在全局作用域，而不是定义在bar的作用域。&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"&gt;&lt;code class="language-js" data-lang="js"&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&lt;span style="color:#66d9ef"&gt;let&lt;/span&gt; &lt;span style="color:#a6e22e"&gt;a&lt;/span&gt; &lt;span style="color:#f92672"&gt;=&lt;/span&gt; &lt;span style="color:#ae81ff"&gt;1&lt;/span&gt;;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&lt;span style="color:#66d9ef"&gt;function&lt;/span&gt; &lt;span style="color:#a6e22e"&gt;foo&lt;/span&gt;() {
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#a6e22e"&gt;console&lt;/span&gt;.&lt;span style="color:#a6e22e"&gt;log&lt;/span&gt;(&lt;span style="color:#a6e22e"&gt;a&lt;/span&gt;);
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;}
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&lt;span style="color:#66d9ef"&gt;function&lt;/span&gt; &lt;span style="color:#a6e22e"&gt;bar&lt;/span&gt;() {
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#66d9ef"&gt;let&lt;/span&gt; &lt;span style="color:#a6e22e"&gt;a&lt;/span&gt; &lt;span style="color:#f92672"&gt;=&lt;/span&gt; &lt;span style="color:#ae81ff"&gt;2&lt;/span&gt;;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#a6e22e"&gt;foo&lt;/span&gt;();
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;}
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&lt;span style="color:#a6e22e"&gt;bar&lt;/span&gt;();
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;</description></item></channel></rss>