mirror of
https://github.com/ZiuChen/ZiuChen.github.io.git
synced 2025-12-18 00:44:18 +08:00
Deploying to gh-pages from @ ZiuChen/ZiuChen.github.io@0b16bed85a 🚀
This commit is contained in:
ZiuChen
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,262 +0,0 @@
|
||||
import{_ as s,o as n,c as a,S as l}from"./chunks/framework.04e6e156.js";const d=JSON.parse('{"title":"【2023】青训营 - 前端练习题汇总解析","description":"","frontmatter":{},"headers":[],"relativePath":"article/【2023】青训营 - 前端练习题汇总解析.md","filePath":"article/【2023】青训营 - 前端练习题汇总解析.md","lastUpdated":1697042822000}'),p={name:"article/【2023】青训营 - 前端练习题汇总解析.md"},e=l(`<h1 id="【2023】青训营-前端练习题汇总解析" tabindex="-1">【2023】青训营 - 前端练习题汇总解析 <a class="header-anchor" href="#【2023】青训营-前端练习题汇总解析" aria-label="Permalink to "【2023】青训营 - 前端练习题汇总解析""></a></h1><p>汇总了青训营官方账号每天发布的练习题，并且给出了答案、做了简单解析与知识扩充，有不足之处欢迎一起交流学习。</p><p>每天的选择题不同，而编程题是一样的，直接去Leetcode刷题即可。</p><h2 id="选择题" tabindex="-1">选择题 <a class="header-anchor" href="#选择题" aria-label="Permalink to "选择题""></a></h2><h3 id="day-1" tabindex="-1">DAY 1 <a class="header-anchor" href="#day-1" aria-label="Permalink to "DAY 1""></a></h3><h4 id="题目描述" tabindex="-1">题目描述 <a class="header-anchor" href="#题目描述" aria-label="Permalink to "题目描述""></a></h4><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">选择题 1： </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">下列哪些是 HTML5 的新特性？ </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">A. 语义标签 </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">B. Canvas 绘图 </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">C. <audio>元素 </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">D. 增强型表单 </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">选择题 2： </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">下面可以继承的属性有哪些？ </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">A. font-size </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">B. background </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">C. color </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">D. cursor</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h4 id="答案与解析" tabindex="-1">答案与解析 <a class="header-anchor" href="#答案与解析" aria-label="Permalink to "答案与解析""></a></h4><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">1. ABCD</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">2. ACD</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h4 id="html5新增内容" tabindex="-1">HTML5新增内容 <a class="header-anchor" href="#html5新增内容" aria-label="Permalink to "HTML5新增内容""></a></h4><ul><li>语义化标签 <ul><li><code>header</code> <code>nav</code> <code>section</code> <code>article</code> <code>aside</code> <code>footer</code></li><li>使用语义化标签有利于SEO与无障碍</li></ul></li><li><code><video></code>与<code><audio></code>标签 <ul><li>支持引入外部视频/音频资源</li><li>可以搭配<code><source></code>标签实现fallback</li></ul></li><li><code><canvas></code>画布</li><li><code><input> <form></code>元素属性扩展 <ul><li><code>type</code>属性支持了更多的值 内置了更多的样式</li></ul></li><li>全局新增属性<code>data-*</code><ul><li>在JavaScript中可以通过DOM元素引用的<code>.dataset</code>直接获取到元素上的<code>data-*</code>属性的值</li><li>Vue的<code>Scoped Style</code>，Github的贡献墙颜色都是基于<code>[data-*]</code>选择器</li></ul></li></ul><h4 id="css属性可继承性" tabindex="-1">CSS属性可继承性 <a class="header-anchor" href="#css属性可继承性" aria-label="Permalink to "CSS属性可继承性""></a></h4><p>常见的CSS属性都支持继承，不必特别记忆</p><ul><li>如果一个属性具备继承性，那么在该元素上设置后，它的后代元素都可以继承这个属性</li><li>如果后代元素自己设置有该属性，则会优先使用自己的属性</li><li>需要注意的是：子元素从父元素继承来的<code>font-size: 2em;</code>继承的是计算值，而不是原始值</li><li>如果父元素设置了<code>font-size: 2em;</code>，此时子元素再设置<code>font-size: 2em;</code>达到的效果实际上是在父元素的基础上的<code>2em</code>，实质上是<code>font-size: 4em;</code></li></ul><h4 id="强制继承" tabindex="-1">强制继承 <a class="header-anchor" href="#强制继承" aria-label="Permalink to "强制继承""></a></h4><p>如果某些属性不具备可继承性，我们希望子元素能够继承，则可以使用强制继承：</p><div class="language-css line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">father</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">border</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2px</span><span style="color:#A6ACCD;"> soild red</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">child</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">border</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> inherit</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="day-2" tabindex="-1">DAY 2 <a class="header-anchor" href="#day-2" aria-label="Permalink to "DAY 2""></a></h3><h4 id="题目描述-1" tabindex="-1">题目描述 <a class="header-anchor" href="#题目描述-1" aria-label="Permalink to "题目描述""></a></h4><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">选择题 1： </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">对于一条100M的宽带，理论下载速度上限是多少？ </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">A. 12.5MB/s </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">B. 100MB/s </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">C. 10MB/s </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">D. 10Mb/s </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">选择题 2： </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">关于 for of 和 for in 的描述，正确的是？ </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">A. for in 可以循环普通对象 </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">B. for of 可以循环普通对象</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">C. 都不可以循环数组</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">D. 都可以循环数组</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h4 id="答案与解析-1" tabindex="-1">答案与解析 <a class="header-anchor" href="#答案与解析-1" aria-label="Permalink to "答案与解析""></a></h4><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">1. A</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">2. AD</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h4 id="字节与比特" tabindex="-1">字节与比特 <a class="header-anchor" href="#字节与比特" aria-label="Permalink to "字节与比特""></a></h4><p>运营商的100M指的是100Mb，单位是<code>bit</code>，而日常使用中的网速单位是<code>Byte</code></p><p>换算公式是<code>1Byte = 8bit</code>，故<code>100 / 8 = 12.5MB/s</code></p><h4 id="for-in与for-of" tabindex="-1">for-in与for-of <a class="header-anchor" href="#for-in与for-of" aria-label="Permalink to "for-in与for-of""></a></h4><ul><li><code>for-in</code>可以遍历数组与对象 得到的是索引/key</li><li><code>for-of</code>可以遍历数组但不能遍历对象 遍历数组得到的是值</li></ul><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> arr </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">abc</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">cba</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">nba</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">]</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> obj </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Ziu</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">age</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">18</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// for-in可以遍历数组</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">for</span><span style="color:#A6ACCD;"> (</span><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> i </span><span style="color:#89DDFF;">in</span><span style="color:#A6ACCD;"> arr) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">i</span><span style="color:#F07178;">) </span><span style="color:#676E95;font-style:italic;">// 0 1 2</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// for-of可以遍历数组</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">for</span><span style="color:#A6ACCD;"> (</span><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> i </span><span style="color:#89DDFF;">of</span><span style="color:#A6ACCD;"> arr) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">i</span><span style="color:#F07178;">) </span><span style="color:#676E95;font-style:italic;">// abc cba nba</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// for-in可以遍历对象的key值</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">for</span><span style="color:#A6ACCD;"> (</span><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> i </span><span style="color:#89DDFF;">in</span><span style="color:#A6ACCD;"> obj) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">i</span><span style="color:#F07178;">) </span><span style="color:#676E95;font-style:italic;">// name age</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// for-of不能遍历对象 会报错</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">for</span><span style="color:#A6ACCD;"> (</span><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> i </span><span style="color:#89DDFF;">of</span><span style="color:#A6ACCD;"> obj) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">i</span><span style="color:#F07178;">) </span><span style="color:#676E95;font-style:italic;">// Error</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div><h3 id="day-3" tabindex="-1">DAY 3 <a class="header-anchor" href="#day-3" aria-label="Permalink to "DAY 3""></a></h3><h4 id="题目描述-2" tabindex="-1">题目描述 <a class="header-anchor" href="#题目描述-2" aria-label="Permalink to "题目描述""></a></h4><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">选择题 1： </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">关于事件冒泡描述正确的是？ </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">A. 从目标元素向 document 冒泡 </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">B. 从 document 向目标元素冒泡 </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">C. 从 document 向目标元素冒泡，再从目标元素向 document 冒泡 </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">D. 以上都不是 </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">选择题 2： </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">以下哪些 script 标签属性会使脚本有可能在 DOMContentLoaded 事件之后加载？ </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">A. <script async> </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">B. <script defer> </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">C. <script type="module"> </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">D. <script type="module" async></span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h4 id="答案与解析-2" tabindex="-1">答案与解析 <a class="header-anchor" href="#答案与解析-2" aria-label="Permalink to "答案与解析""></a></h4><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">1. A</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">2. AD</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h4 id="冒泡与捕获" tabindex="-1">冒泡与捕获 <a class="header-anchor" href="#冒泡与捕获" aria-label="Permalink to "冒泡与捕获""></a></h4><p>事件冒泡：浏览器从触发事件的目标元素开始向上检查其祖先元素是否注册了此事件的监听器，如果其祖先元素注册了此事件监听回调，则触发回调。此操作会层层向上，直到<code><html></code>元素</p><p><a href="https://juejin.cn/post/7093018681621512222" target="_blank" rel="noreferrer">一文读懂事件冒泡与事件捕获</a></p><h4 id="script的defer-async属性" tabindex="-1">script的defer async属性 <a class="header-anchor" href="#script的defer-async属性" aria-label="Permalink to "script的defer async属性""></a></h4><ul><li>defer 延迟加载 <ul><li>不会阻塞DOM Tree的构建过程</li><li>下载完成后 总会等待DOM Tree构建完成后执行</li><li>一定在<code>DOMContentLoaded</code>事件之前触发</li></ul></li><li>async 异步加载 <ul><li>不保证执行顺序 独立下载、独立运行</li><li>只要下载完成就立即执行 不保证在<code>DOMContentLoaded</code>之前或之后被执行</li></ul></li></ul><p>被标记为<code>type="module"</code>的<code><script></code>会被浏览器识别为ES6 Module，当浏览器解析到此<code><script></code>时将异步下载此脚本，不会造成堵塞浏览器，其本质上与<code>defer</code>是一致的：</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">module</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">./foo.js</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;"><!-- 等同于 --></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">module</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">./foo.js</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">defer</span><span style="color:#89DDFF;">></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>当然，如果额外添加了<code>async</code>标记，此脚本将在被下载完成后中断渲染，立即执行</p><p><a href="https://es6.ruanyifeng.com/#docs/module-loader" target="_blank" rel="noreferrer">Module 的加载实现</a></p><h3 id="day-4" tabindex="-1">DAY 4 <a class="header-anchor" href="#day-4" aria-label="Permalink to "DAY 4""></a></h3><h4 id="题目描述-3" tabindex="-1">题目描述 <a class="header-anchor" href="#题目描述-3" aria-label="Permalink to "题目描述""></a></h4><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">选择题 1： </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">以下哪些是 CSS 块级元素的特性？ </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">A. 宽度默认由其中的内容决定 </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">B. 高度默认由其中的内容决定 </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">C. 可以被分拆到多行 </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">D. 可以通过 height 属性指定高度 </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">选择题 2： </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">以下关于跨域说法错误的是？ </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">A. http://example.com和https://example.com是相同的域名，属于同源 </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">B. 跨域资源共享规范中规定了除了 GET 之外的 HTTP 请求，或者搭配某些 MINE 类型的 POST 请求，浏览器都需要先发一个 OPTIONS 请求。 </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">C. CSS 中通过 @font-face 使用字体也会有跨域问题 </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">D. Cookie，LocalStorage 和 IndexedDB 都会受到同源策略的限制</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h4 id="答案与解析-3" tabindex="-1">答案与解析 <a class="header-anchor" href="#答案与解析-3" aria-label="Permalink to "答案与解析""></a></h4><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">1. BD</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">2. A</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h4 id="块级元素、行内级元素、行内块级元素" tabindex="-1">块级元素、行内级元素、行内块级元素 <a class="header-anchor" href="#块级元素、行内级元素、行内块级元素" aria-label="Permalink to "块级元素、行内级元素、行内块级元素""></a></h4><p>块级元素在BFC中布局，行内级元素在IFC中布局，二者具有不同的特性：</p><p>常见的块级(block)元素：<code>div</code> <code>h1</code> <code>p</code> 等</p><ul><li>每个块级元素都是独自占一行</li><li>元素的宽度如果不设置的话，默认为父元素的宽度（父元素宽度100%）</li><li>高度、行高、外边距（margin）以及内边距（padding）都可以控制</li><li>多个块状元素从上至下排列</li></ul><p>常见的行内级(inline-level)元素：<code>a</code> <code>span</code> 等</p><ul><li>不能设置宽高，默认宽度就是它本身内容的宽度，不独占一行</li><li>高度、行高、外边距以及内边距都可以控制</li><li>但是之间会有空白缝隙，设置它上一级的 <code>font-size: 0;</code> 才能消除间隙</li></ul><p>常见的行内块级(inline-block)元素：<code>img</code> <code>button</code> <code>input</code> 等</p><ul><li>同时具有块级与行内级元素的特性</li><li>可以设置宽高，其默认宽高由其内容决定</li></ul><h4 id="跨域资源共享-cors" tabindex="-1">跨域资源共享 CORS <a class="header-anchor" href="#跨域资源共享-cors" aria-label="Permalink to "跨域资源共享 CORS""></a></h4><p>CORS是常用的跨域解决办法之一，下面简单列出纲要，详细解析请见 <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS" target="_blank" rel="noreferrer">跨域资源共享（CORS）</a></p><ul><li>什么是CORS？可以解决哪些场景下的跨域问题？</li><li>满足哪些条件的请求可以被识别为<code>简单请求</code>？</li><li>什么是预检请求？</li><li>附带身份凭证的跨域请求需要注意什么？</li></ul><p>简单介绍一下跨域的内容：</p><ul><li>跨域的概念 <ul><li>域名由<code>协议://域名:端口号</code>组成</li><li>三个部分有任一不同即被浏览器视为跨域</li><li>是浏览器的安全行为，跨域请求会被真实发出和处理，但响应会被浏览器拦截</li></ul></li><li>跨域的影响 <ul><li>不同域之间的资源不能共享（<code>Cookie LocalStorage IndexedDB</code>等）</li><li>无法接触非同源网页的DOM和js对象</li><li>无法向非同源地址发送Ajax请求</li></ul></li><li>跨域的解决方案 <ul><li>JSONP</li><li>CORS</li><li>代理服务器</li></ul></li></ul><p><a href="https://segmentfault.com/a/1190000040485198" target="_blank" rel="noreferrer">什么是跨域？出现原因及解决方法</a></p><h3 id="day-5" tabindex="-1">DAY 5 <a class="header-anchor" href="#day-5" aria-label="Permalink to "DAY 5""></a></h3><h4 id="题目描述-4" tabindex="-1">题目描述 <a class="header-anchor" href="#题目描述-4" aria-label="Permalink to "题目描述""></a></h4><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">选择题 1： </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">下列哪些可以实现浏览器存储数据？ </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">A. cookie </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">B. localStorage </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">C. session </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">D. sessionStorage </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">选择题 2： </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">对以下代码说法正确的是？ </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">let arr = [1,2,3,4,5]; </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">let arr2 = [1, , 3]; </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">A. 执行 arr.length = 3，此时数组为 [1,2,3] </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">B. 执行 arr[10] = 11，此时 arr.length 为 6 </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">C. 执行 delete arr[2]，此时 arr.length 为 4，数组为 [1,2,4,5] </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">D. arr2.length 的长度为 2</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h4 id="答案与解析-4" tabindex="-1">答案与解析 <a class="header-anchor" href="#答案与解析-4" aria-label="Permalink to "答案与解析""></a></h4><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">1. ABD</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">2. A</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h4 id="解析cookie-localstorage-sessionstorage异同" tabindex="-1">解析Cookie LocalStorage SessionStorage异同 <a class="header-anchor" href="#解析cookie-localstorage-sessionstorage异同" aria-label="Permalink to "解析Cookie LocalStorage SessionStorage异同""></a></h4><p><code>Cookie LocalStorage SessionStorage</code>都是保存在浏览器内部的数据</p><p>而<code>Session</code>一般是保存在服务器中，用来标识客户端会话信息。</p><table><thead><tr><th></th><th>Cookie</th><th>LocalStorage</th><th>SessionStorage</th></tr></thead><tbody><tr><td>大小</td><td>4Kb</td><td>5MB</td><td>5MB</td></tr><tr><td>兼容</td><td>H4/H5</td><td>H5</td><td>H5</td></tr><tr><td>访问</td><td>任何窗口</td><td>任何窗口</td><td>同一窗口</td></tr><tr><td>有效期</td><td>手动设置</td><td>无</td><td>窗口关闭</td></tr><tr><td>存储位置</td><td>浏览器和服务器</td><td>浏览器</td><td>浏览器</td></tr><tr><td>与请求一起发送</td><td>是</td><td>否</td><td>否</td></tr><tr><td>语法</td><td>复杂</td><td>简单</td><td>简单</td></tr></tbody></table><ul><li>Cookie是由<code>?key1=value1;key2=value2</code>组成的，可以通过<code>encodeURIComponent()</code>来保证它不包含任何逗号、分号或空格(cookie值中禁止使用这些值).</li><li>Cookie一般的字段有<code>path domain max-age expires secure</code></li><li>不同的host之间的localStorage、sessionStorage对象是隔离的</li></ul><h4 id="代码运行结果" tabindex="-1">代码运行结果 <a class="header-anchor" href="#代码运行结果" aria-label="Permalink to "代码运行结果""></a></h4><p>首先定义<code>arr</code>与<code>arr2</code>两个数组：</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> arr </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">3</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">4</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">5</span><span style="color:#A6ACCD;">]</span></span>
|
||||
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> arr2 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">3</span><span style="color:#A6ACCD;">]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>A选项：</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">arr</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">length </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">3</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(arr) </span><span style="color:#676E95;font-style:italic;">// [1, 2, 3]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>B选项：</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">arr[</span><span style="color:#F78C6C;">10</span><span style="color:#A6ACCD;">] </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">11</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(arr</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">length) </span><span style="color:#676E95;font-style:italic;">// 11</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>C选项：</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 当你删除一个数组元素时，数组的长度不受影响。即便你删除了数组的最后一个元素也是如此。</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">delete</span><span style="color:#A6ACCD;"> arr[</span><span style="color:#F78C6C;">2</span><span style="color:#A6ACCD;">]</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(arr[</span><span style="color:#F78C6C;">2</span><span style="color:#A6ACCD;">]) </span><span style="color:#676E95;font-style:italic;">// undefined</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(arr) </span><span style="color:#676E95;font-style:italic;">// [1, 2, <empty item>, 4, 5]</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(arr</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">length) </span><span style="color:#676E95;font-style:italic;">// 5</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>D选项：</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(arr2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">length) </span><span style="color:#676E95;font-style:italic;">// 3</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>delete 操作符用于删除对象的某个属性；如果没有指向这个属性的引用，那它最终会被释放。</p><p><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/delete" target="_blank" rel="noreferrer">MDN: delete操作符</a></p><h3 id="day-6" tabindex="-1">DAY 6 <a class="header-anchor" href="#day-6" aria-label="Permalink to "DAY 6""></a></h3><h4 id="题目描述-5" tabindex="-1">题目描述 <a class="header-anchor" href="#题目描述-5" aria-label="Permalink to "题目描述""></a></h4><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">选择题 1： </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">在 css 选择器当中，优先级排序正确的是？ </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">A. id选择器>标签选择器>类选择器 </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">B. 标签选择器>类选择器>id选择器 </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">C. 类选择器>标签选择器>id选择器 </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">D. id选择器>类选择器>标签选择器 </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">选择题 2： </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">如以下代码所示，给 body 绑定两个事件后，调用 document.body.click() 输出的结果是？ </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">document.body.addEventListener('click', () => { </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">Promise.resolve().then(() => console.log(1)) </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console.log(2); </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">}, false); </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">document.body.addEventListener('click', () => { </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">Promise.resolve().then(() => console.log(3)) </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console.log(4); </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">}, false); </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">A. 2, 4, 1, 3 </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">B. 2, 1, 4, 3 </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">C. 1, 2, 3, 4 </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">D. 1, 3, 2, 4</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div><h4 id="答案与解析-5" tabindex="-1">答案与解析 <a class="header-anchor" href="#答案与解析-5" aria-label="Permalink to "答案与解析""></a></h4><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">1. D</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">2. B</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h4 id="css选择器优先级" tabindex="-1">CSS选择器优先级 <a class="header-anchor" href="#css选择器优先级" aria-label="Permalink to "CSS选择器优先级""></a></h4><p>内联样式 > <strong>ID选择器 > 类选择器 > 标签选择器</strong> > 通配符</p><p>不同选择器权重值不同，权重值更高的属性值会覆盖更低的值</p><ul><li><code>!important</code> 10000</li><li><code>内联样式</code> 1000</li><li><code>id选择器</code> 100</li><li><code>类选择器、属性选择器、伪类</code> 10</li><li><code>元素选择器、伪元素</code> 1</li><li><code>通配符</code> 0</li></ul><h4 id="事件循环" tabindex="-1">事件循环 <a class="header-anchor" href="#事件循环" aria-label="Permalink to "事件循环""></a></h4><p>需要了解浏览器的事件循环机制才能解出此题，以下是一些可能需要掌握的概念：</p><ul><li>JavaScript是单线程的</li><li>浏览器事件循环机制</li><li>主线程、宏任务队列、微任务队列、常见的宏任务与微任务</li><li>任务执行队列、函数执行栈</li></ul><h3 id="day-7" tabindex="-1">DAY 7 <a class="header-anchor" href="#day-7" aria-label="Permalink to "DAY 7""></a></h3><h4 id="题目描述-6" tabindex="-1">题目描述 <a class="header-anchor" href="#题目描述-6" aria-label="Permalink to "题目描述""></a></h4><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">选择题 1： </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">浮动会导致页面的非正常显示，以下几种清除浮动的方法，哪个是不推荐使用的？ </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">A. 在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div> </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">B. 通过设置父元素overflow值为hidden； </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">C. 给父元素添加clearfix类 </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">D. 父元素也设置浮动 </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">选择题 2： </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">以下代码的运行结果是？ </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">var f = function () { console.log('1'); } function f() { console.log('2'); } </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">f() </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">A. undefined </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">B. 报错 </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">C. 2 </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">D. 1</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h4 id="答案与解析-6" tabindex="-1">答案与解析 <a class="header-anchor" href="#答案与解析-6" aria-label="Permalink to "答案与解析""></a></h4><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">1. D</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">2. D</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h4 id="清除浮动的方法及原理" tabindex="-1">清除浮动的方法及原理 <a class="header-anchor" href="#清除浮动的方法及原理" aria-label="Permalink to "清除浮动的方法及原理""></a></h4><p>什么是清除浮动？</p><p>当容器的高度为<code>auto</code>，且容器的内容中有浮动元素时，容器的高度不能自动伸长以适应内容的高度，这个时候就需要清除浮动，让容器的高度自动伸长以适应浮动元素。</p><p>清除浮动常用方法</p><ul><li>使用带clear属性的空元素 <ul><li>在浮动元素后使用一个空元素如<code><div class="clear"></div></code></li><li>并在CSS中赋予<code>.clear{ clear: both; }</code>属性即可清理浮动</li></ul></li><li>使用CSS的overflow属性 <ul><li>给父元素赋予<code>overflow: visible;</code>，创建一个新的BFC <ul><li>浮动元素的父元素触发BFC，形成独立的块级格式化上下文</li><li>浮动元素的父元素的高度值为auto（height的默认值即为auto）</li></ul></li><li>BFC拥有自己的计算高度的方法与规则 <ul><li><strong>如果有浮动元素，那么会增加高度以包括这些浮动元素的下边缘</strong></li><li><a href="https://www.w3.org/TR/CSS2/visudet.html" target="_blank" rel="noreferrer">W3C 10.6.7 'Auto' heights for block formatting context roots</a></li></ul></li></ul></li><li>给浮动的元素的容器添加浮动 <ul><li>会导致父元素也跟着浮动 不常用 也不推荐</li></ul></li><li>使用邻接元素处理 <ul><li>给浮动元素后面的兄弟元素添加<code>clear</code>属性</li></ul></li><li>使用CSS的<code>::after</code>伪元素 <ul><li>给浮动元素的父元素末尾添加一个看不见的块元素（Block element）</li><li>给这个伪元素添加<code>clear</code>属性清理浮动</li></ul></li></ul><h4 id="变量提升" tabindex="-1">变量提升 <a class="header-anchor" href="#变量提升" aria-label="Permalink to "变量提升""></a></h4><p>题目涉及JavaScript的变量提升知识，详细解析见：</p><p><a href="https://developer.mozilla.org/zh-CN/docs/Glossary/Hoisting" target="_blank" rel="noreferrer">MDN 变量提升</a></p><p><a href="https://segmentfault.com/a/1190000039288278" target="_blank" rel="noreferrer">彻底解决JS变量提升的面试题</a></p><h3 id="day-8" tabindex="-1">DAY 8 <a class="header-anchor" href="#day-8" aria-label="Permalink to "DAY 8""></a></h3><h4 id="题目描述-7" tabindex="-1">题目描述 <a class="header-anchor" href="#题目描述-7" aria-label="Permalink to "题目描述""></a></h4><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">选择题 1： </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">下列说法正确的有哪些？ </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">A. visibility:hidden 表示所占据的空间位置仍然存在，仅为视觉上的完全透明 </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">B. display:none 不为被隐藏的对象保留其物理空间 </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">C. visibility:hidden 与display:none 两者没有本质上的区别 </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">D. visibility:hidden 回流与重绘 </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">选择题 2： </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">若主机甲与主机已已建立一条 TCP 链接，最大段长（MSS）为 1KB，往返时间（RTT）为 2 ms，则在不出现拥塞的前提下，拥塞窗口从 8KB 增长到 32KB 所需的最长时间是？ </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">A. 4ms </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">B. 8ms </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">C. 24ms </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">D. 48ms</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h4 id="答案与解析-7" tabindex="-1">答案与解析 <a class="header-anchor" href="#答案与解析-7" aria-label="Permalink to "答案与解析""></a></h4><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">1. AB(D)</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">2. D</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h4 id="回流与重绘" tabindex="-1">回流与重绘 <a class="header-anchor" href="#回流与重绘" aria-label="Permalink to "回流与重绘""></a></h4><ul><li>重绘不一定引起回流，而回流一定会引起重绘，所以回流是一件很消耗性能的事情</li><li>什么情况下会触发回流？ <ul><li>DOM 结构发生改变（添加新的节点或者移除节点）</li><li>改变了布局（修改了width height padding font-size等值）</li><li>窗口resize（修改了窗口的尺寸等）</li><li>调用getComputedStyle方法获取尺寸、位置信息</li></ul></li><li>什么情况会触发重绘？ <ul><li>修改背景色、文字颜色、边框颜色、样式等</li></ul></li></ul><p>元素的几种不同显示状态：</p><ul><li><code>display: none</code> 指的是元素完全不陈列出来，不占据空间，涉及到了DOM结构，故产生reflow与repaint</li><li><code>visibility: hidden</code> 指的是元素不可见但存在，保留空间，不影响结构，故只产生repaint，但不可触发绑定事件</li><li><code>opacity: 0</code> 指的是元素不可见但存在，保留空间，不影响结构，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的</li></ul><h4 id="拥塞窗口调整" tabindex="-1">拥塞窗口调整 <a class="header-anchor" href="#拥塞窗口调整" aria-label="Permalink to "拥塞窗口调整""></a></h4><p>拥塞窗口调整有两种模式，一种是以指数增长的慢启动模式，另一种是以线性增长的拥塞避免模式</p><p>开始传输时是以慢启动模式调整拥塞窗口，当窗口大小达到名为ssthresh的阈值时，改用拥塞避免模式调整。</p><p>问“最长时间”，应该就是指ssthresh非常小以至于一开始就是拥塞避免模式，使得窗口调整的速度较慢，每一个RTT会增加1个MSS（这里是1KB）</p><p>从8KB到32KB有24KB的调整空间，就需要<code>24个RTT x 每个RTT的2ms</code>，共计48ms</p><p><a href="https://zh.wikipedia.org/zh-tw/TCP%E6%8B%A5%E5%A1%9E%E6%8E%A7%E5%88%B6" target="_blank" rel="noreferrer">WikiPedia: TCP拥塞控制</a></p><h3 id="day-9" tabindex="-1">DAY 9 <a class="header-anchor" href="#day-9" aria-label="Permalink to "DAY 9""></a></h3><h4 id="题目描述-8" tabindex="-1">题目描述 <a class="header-anchor" href="#题目描述-8" aria-label="Permalink to "题目描述""></a></h4><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">选择题 1： </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">以下对HTML标签的使用，哪些是符合语义的？ </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">A. 使用 table 展示表格数据 </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">B. 使用 span 表示按钮 </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">C. 使用 article 展示文章内容 </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">D. 使用 p 标签展示文章标题 </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">选择题 2： </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">包过滤防火墙对数据包的过滤依据不包括哪些？ </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">A. 源IP地址 </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">B. 源端口号 </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">C. MAC 地址 </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">D. 目的 IP 地址</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h4 id="答案与解析-8" tabindex="-1">答案与解析 <a class="header-anchor" href="#答案与解析-8" aria-label="Permalink to "答案与解析""></a></h4><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">1. AC</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">2. C</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h4 id="html5语义化标签" tabindex="-1">HTML5语义化标签 <a class="header-anchor" href="#html5语义化标签" aria-label="Permalink to "HTML5语义化标签""></a></h4><p>解析略</p><h4 id="包过滤" tabindex="-1">包过滤 <a class="header-anchor" href="#包过滤" aria-label="Permalink to "包过滤""></a></h4><p>包过滤是在IP层实现的，包过滤根据数据包的源IP地址、目的IP地址、协议类型（TCP包、UDP包、ICMP包）、源端口、目的端口等包头信息及数据包传输方向等信息来判断是否允许数据包通过</p><h2 id="编程题" tabindex="-1">编程题 <a class="header-anchor" href="#编程题" aria-label="Permalink to "编程题""></a></h2><h3 id="题目-1" tabindex="-1">题目 1 <a class="header-anchor" href="#题目-1" aria-label="Permalink to "题目 1""></a></h3><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">**题目**</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">给定一个十进制整数字符串，判断它是否是 4 的幂。</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">**示例 1**</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">输入："16"，输出：true</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">**示例 2**</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">输入："101"，输出：false</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">**示例 3**</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">输入："70368744177664"，输出：true</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">**限定语言：** C、 C++、Java、Python、JavaScript V8</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><h4 id="题解" tabindex="-1">题解 <a class="header-anchor" href="#题解" aria-label="Permalink to "题解""></a></h4><p>TypeScript</p><div class="language-ts line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// LeetCode 342</span></span>
|
||||
<span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">isPowerOfFour</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">n</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#89DDFF;">):</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">boolean</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">n</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">></span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">0</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&&</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">n</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">n</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">-</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">1</span><span style="color:#F07178;">)) </span><span style="color:#89DDFF;">===</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">0</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&&</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">n</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">%</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">3</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">===</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">1</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="题目-2" tabindex="-1">题目 2 <a class="header-anchor" href="#题目-2" aria-label="Permalink to "题目 2""></a></h3><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">**题目**</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">给定一个字符串，验证它是否是回文串，只考虑字母和数字字符，可以忽略空格、字母的大小写。</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">**示例**</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">输入："A man, a plan, a canal: Panama"，输出：true</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">**限定语言：** C、 C++、Java、Python、JavaScript V8</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h4 id="题解-1" tabindex="-1">题解 <a class="header-anchor" href="#题解-1" aria-label="Permalink to "题解""></a></h4><p>TypeScript</p><div class="language-ts line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// LeetCode 125</span></span>
|
||||
<span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">isPalindrome</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">s</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">):</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">boolean</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">let</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">checkStr</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">''</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">let</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">revStr</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">''</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 遍历原字符串</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 1.将原串转为仅剩数字与小写字母 2.生成反转串</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">for</span><span style="color:#F07178;"> (</span><span style="color:#C792EA;">let</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">i</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">i</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">s</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">length</span><span style="color:#89DDFF;">;</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">i</span><span style="color:#89DDFF;">++</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#82AAFF;">isAlnum</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">s</span><span style="color:#F07178;">[</span><span style="color:#A6ACCD;">i</span><span style="color:#F07178;">])) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">checkStr</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">s</span><span style="color:#F07178;">[</span><span style="color:#A6ACCD;">i</span><span style="color:#F07178;">]</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toLocaleLowerCase</span><span style="color:#F07178;">()</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">revStr</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">s</span><span style="color:#F07178;">[</span><span style="color:#A6ACCD;">i</span><span style="color:#F07178;">]</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toLocaleLowerCase</span><span style="color:#F07178;">() </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">revStr</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">checkStr</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">===</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">revStr</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">/**</span></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;"> * 检查字符串是否仅由数字与小写字母组成</span></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;"> * </span><span style="color:#89DDFF;font-style:italic;">@</span><span style="color:#C792EA;font-style:italic;">param</span><span style="color:#676E95;font-style:italic;"> </span><span style="color:#A6ACCD;font-style:italic;">s</span><span style="color:#676E95;font-style:italic;"> 待检查字符串</span></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;"> */</span></span>
|
||||
<span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">isAlnum</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">s</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">):</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">boolean</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#C3E88D;"> </span><span style="color:#89DDFF;">/</span><span style="color:#89DDFF;font-style:italic;">^</span><span style="color:#89DDFF;">[</span><span style="color:#C3E88D;">a-z0-9</span><span style="color:#89DDFF;">]+</span><span style="color:#89DDFF;font-style:italic;">$</span><span style="color:#89DDFF;">/</span><span style="color:#F78C6C;">i</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">test</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">s</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><h3 id="题目-3" tabindex="-1">题目 3 <a class="header-anchor" href="#题目-3" aria-label="Permalink to "题目 3""></a></h3><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">**题目**</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">给定一个字符串，找出该字符串中最长回文子串的长度。</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">**示例 1**</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">输入："abc"，输出：0</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">**示例 2**</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">输入："abcbe"，输出：3</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">**示例 3**</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">输入："acdcecdcf"，输出：7</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">**限定语言：** C、 C++、Java、Python、JavaScript V8</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><h4 id="题解-2" tabindex="-1">题解 <a class="header-anchor" href="#题解-2" aria-label="Permalink to "题解""></a></h4><p>TypeScript</p><div class="language-ts line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// LeetCode 5</span></span>
|
||||
<span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">longestPalindrome</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">s</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">):</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">len</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">s</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">length</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">len</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">2</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">s</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">let</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">maxLength</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">1</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">let</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">begin</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">0</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">for</span><span style="color:#F07178;"> (</span><span style="color:#C792EA;">let</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">i</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">i</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">len</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">-</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">;</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">i</span><span style="color:#89DDFF;">++</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 头指针 从0遍历到len-1</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">for</span><span style="color:#F07178;"> (</span><span style="color:#C792EA;">let</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">j</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">i</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">;</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">j</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">len</span><span style="color:#89DDFF;">;</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">j</span><span style="color:#89DDFF;">++</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 尾指针 从1遍历到len</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">j</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">-</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">i</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">1</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">></span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">maxLength</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&&</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">validPalindrome</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">s</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">i</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">j</span><span style="color:#F07178;">)) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 子串更长 且为回文字符串</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">maxLength</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">j</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">-</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">i</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">1</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// 更新长度</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">begin</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">i</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// 更新头指针位置</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">s</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">substring</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">begin</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">begin</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">maxLength</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">function</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">validPalindrome</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">str</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;font-style:italic;">begin</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;font-style:italic;">end</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">while</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">begin</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">end</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">str</span><span style="color:#F07178;">[</span><span style="color:#A6ACCD;">begin</span><span style="color:#F07178;">] </span><span style="color:#89DDFF;">!==</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">str</span><span style="color:#F07178;">[</span><span style="color:#A6ACCD;">end</span><span style="color:#F07178;">]) </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">begin</span><span style="color:#89DDFF;">++</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">end</span><span style="color:#89DDFF;">--</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br></div></div>`,150),o=[e];function r(c,t,i,y,C,b){return n(),a("div",null,o)}const A=s(p,[["render",r]]);export{d as __pageData,A as default};
|
||||
@@ -1 +0,0 @@
|
||||
import{_ as s,o as n,c as a,S as l}from"./chunks/framework.04e6e156.js";const d=JSON.parse('{"title":"【2023】青训营 - 前端练习题汇总解析","description":"","frontmatter":{},"headers":[],"relativePath":"article/【2023】青训营 - 前端练习题汇总解析.md","filePath":"article/【2023】青训营 - 前端练习题汇总解析.md","lastUpdated":1697042822000}'),p={name:"article/【2023】青训营 - 前端练习题汇总解析.md"},e=l("",150),o=[e];function r(c,t,i,y,C,b){return n(),a("div",null,o)}const A=s(p,[["render",r]]);export{d as __pageData,A as default};
|
||||
523
assets/article_【2023】青训营 - 前端练习题汇总解析.md.aa190ddf.js
Normal file
523
assets/article_【2023】青训营 - 前端练习题汇总解析.md.aa190ddf.js
Normal file
@@ -0,0 +1,523 @@
|
||||
import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.4001cd3b.js";const u=JSON.parse('{"title":"【2023】青训营 - 前端练习题汇总解析","description":"","frontmatter":{},"headers":[],"relativePath":"article/【2023】青训营 - 前端练习题汇总解析.md","filePath":"article/【2023】青训营 - 前端练习题汇总解析.md","lastUpdated":1697384672000}'),p={name:"article/【2023】青训营 - 前端练习题汇总解析.md"},e=l(`<h1 id="【2023】青训营-前端练习题汇总解析" tabindex="-1">【2023】青训营 - 前端练习题汇总解析 <a class="header-anchor" href="#【2023】青训营-前端练习题汇总解析" aria-label="Permalink to "【2023】青训营 - 前端练习题汇总解析""></a></h1><p>汇总了青训营官方账号每天发布的练习题，并且给出了答案、做了简单解析与知识扩充，有不足之处欢迎一起交流学习。</p><p>每天的选择题不同，而编程题是一样的，直接去Leetcode刷题即可。</p><h2 id="选择题" tabindex="-1">选择题 <a class="header-anchor" href="#选择题" aria-label="Permalink to "选择题""></a></h2><h3 id="day-1" tabindex="-1">DAY 1 <a class="header-anchor" href="#day-1" aria-label="Permalink to "DAY 1""></a></h3><h4 id="题目描述" tabindex="-1">题目描述 <a class="header-anchor" href="#题目描述" aria-label="Permalink to "题目描述""></a></h4><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">选择题 1： </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">下列哪些是 HTML5 的新特性？ </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">A. 语义标签 </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">B. Canvas 绘图 </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">C. <audio>元素 </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">D. 增强型表单 </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">选择题 2： </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">下面可以继承的属性有哪些？ </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">A. font-size </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">B. background </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">C. color </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">D. cursor</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">选择题 1： </span></span>
|
||||
<span class="line"><span style="color:#24292e;">下列哪些是 HTML5 的新特性？ </span></span>
|
||||
<span class="line"><span style="color:#24292e;">A. 语义标签 </span></span>
|
||||
<span class="line"><span style="color:#24292e;">B. Canvas 绘图 </span></span>
|
||||
<span class="line"><span style="color:#24292e;">C. <audio>元素 </span></span>
|
||||
<span class="line"><span style="color:#24292e;">D. 增强型表单 </span></span>
|
||||
<span class="line"><span style="color:#24292e;"> </span></span>
|
||||
<span class="line"><span style="color:#24292e;">选择题 2： </span></span>
|
||||
<span class="line"><span style="color:#24292e;">下面可以继承的属性有哪些？ </span></span>
|
||||
<span class="line"><span style="color:#24292e;">A. font-size </span></span>
|
||||
<span class="line"><span style="color:#24292e;">B. background </span></span>
|
||||
<span class="line"><span style="color:#24292e;">C. color </span></span>
|
||||
<span class="line"><span style="color:#24292e;">D. cursor</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h4 id="答案与解析" tabindex="-1">答案与解析 <a class="header-anchor" href="#答案与解析" aria-label="Permalink to "答案与解析""></a></h4><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">1. ABCD</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">2. ACD</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">1. ABCD</span></span>
|
||||
<span class="line"><span style="color:#24292e;">2. ACD</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h4 id="html5新增内容" tabindex="-1">HTML5新增内容 <a class="header-anchor" href="#html5新增内容" aria-label="Permalink to "HTML5新增内容""></a></h4><ul><li>语义化标签 <ul><li><code>header</code> <code>nav</code> <code>section</code> <code>article</code> <code>aside</code> <code>footer</code></li><li>使用语义化标签有利于SEO与无障碍</li></ul></li><li><code><video></code>与<code><audio></code>标签 <ul><li>支持引入外部视频/音频资源</li><li>可以搭配<code><source></code>标签实现fallback</li></ul></li><li><code><canvas></code>画布</li><li><code><input> <form></code>元素属性扩展 <ul><li><code>type</code>属性支持了更多的值 内置了更多的样式</li></ul></li><li>全局新增属性<code>data-*</code><ul><li>在JavaScript中可以通过DOM元素引用的<code>.dataset</code>直接获取到元素上的<code>data-*</code>属性的值</li><li>Vue的<code>Scoped Style</code>，Github的贡献墙颜色都是基于<code>[data-*]</code>选择器</li></ul></li></ul><h4 id="css属性可继承性" tabindex="-1">CSS属性可继承性 <a class="header-anchor" href="#css属性可继承性" aria-label="Permalink to "CSS属性可继承性""></a></h4><p>常见的CSS属性都支持继承，不必特别记忆</p><ul><li>如果一个属性具备继承性，那么在该元素上设置后，它的后代元素都可以继承这个属性</li><li>如果后代元素自己设置有该属性，则会优先使用自己的属性</li><li>需要注意的是：子元素从父元素继承来的<code>font-size: 2em;</code>继承的是计算值，而不是原始值</li><li>如果父元素设置了<code>font-size: 2em;</code>，此时子元素再设置<code>font-size: 2em;</code>达到的效果实际上是在父元素的基础上的<code>2em</code>，实质上是<code>font-size: 4em;</code></li></ul><h4 id="强制继承" tabindex="-1">强制继承 <a class="header-anchor" href="#强制继承" aria-label="Permalink to "强制继承""></a></h4><p>如果某些属性不具备可继承性，我们希望子元素能够继承，则可以使用强制继承：</p><div class="language-css vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#B392F0;">.father</span><span style="color:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">border</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">2</span><span style="color:#F97583;">px</span><span style="color:#E1E4E8;"> soild </span><span style="color:#79B8FF;">red</span><span style="color:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">}</span></span>
|
||||
<span class="line"><span style="color:#B392F0;">.child</span><span style="color:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">border</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">inherit</span><span style="color:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">}</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#6F42C1;">.father</span><span style="color:#24292E;"> {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">border</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">2</span><span style="color:#D73A49;">px</span><span style="color:#24292E;"> soild </span><span style="color:#005CC5;">red</span><span style="color:#24292E;">;</span></span>
|
||||
<span class="line"><span style="color:#24292E;">}</span></span>
|
||||
<span class="line"><span style="color:#6F42C1;">.child</span><span style="color:#24292E;"> {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">border</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">inherit</span><span style="color:#24292E;">;</span></span>
|
||||
<span class="line"><span style="color:#24292E;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="day-2" tabindex="-1">DAY 2 <a class="header-anchor" href="#day-2" aria-label="Permalink to "DAY 2""></a></h3><h4 id="题目描述-1" tabindex="-1">题目描述 <a class="header-anchor" href="#题目描述-1" aria-label="Permalink to "题目描述""></a></h4><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">选择题 1： </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">对于一条100M的宽带，理论下载速度上限是多少？ </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">A. 12.5MB/s </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">B. 100MB/s </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">C. 10MB/s </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">D. 10Mb/s </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">选择题 2： </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">关于 for of 和 for in 的描述，正确的是？ </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">A. for in 可以循环普通对象 </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">B. for of 可以循环普通对象</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">C. 都不可以循环数组</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">D. 都可以循环数组</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">选择题 1： </span></span>
|
||||
<span class="line"><span style="color:#24292e;">对于一条100M的宽带，理论下载速度上限是多少？ </span></span>
|
||||
<span class="line"><span style="color:#24292e;">A. 12.5MB/s </span></span>
|
||||
<span class="line"><span style="color:#24292e;">B. 100MB/s </span></span>
|
||||
<span class="line"><span style="color:#24292e;">C. 10MB/s </span></span>
|
||||
<span class="line"><span style="color:#24292e;">D. 10Mb/s </span></span>
|
||||
<span class="line"><span style="color:#24292e;"> </span></span>
|
||||
<span class="line"><span style="color:#24292e;">选择题 2： </span></span>
|
||||
<span class="line"><span style="color:#24292e;">关于 for of 和 for in 的描述，正确的是？ </span></span>
|
||||
<span class="line"><span style="color:#24292e;">A. for in 可以循环普通对象 </span></span>
|
||||
<span class="line"><span style="color:#24292e;">B. for of 可以循环普通对象</span></span>
|
||||
<span class="line"><span style="color:#24292e;">C. 都不可以循环数组</span></span>
|
||||
<span class="line"><span style="color:#24292e;">D. 都可以循环数组</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h4 id="答案与解析-1" tabindex="-1">答案与解析 <a class="header-anchor" href="#答案与解析-1" aria-label="Permalink to "答案与解析""></a></h4><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">1. A</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">2. AD</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">1. A</span></span>
|
||||
<span class="line"><span style="color:#24292e;">2. AD</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h4 id="字节与比特" tabindex="-1">字节与比特 <a class="header-anchor" href="#字节与比特" aria-label="Permalink to "字节与比特""></a></h4><p>运营商的100M指的是100Mb，单位是<code>bit</code>，而日常使用中的网速单位是<code>Byte</code></p><p>换算公式是<code>1Byte = 8bit</code>，故<code>100 / 8 = 12.5MB/s</code></p><h4 id="for-in与for-of" tabindex="-1">for-in与for-of <a class="header-anchor" href="#for-in与for-of" aria-label="Permalink to "for-in与for-of""></a></h4><ul><li><code>for-in</code>可以遍历数组与对象 得到的是索引/key</li><li><code>for-of</code>可以遍历数组但不能遍历对象 遍历数组得到的是值</li></ul><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">arr</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> [</span><span style="color:#9ECBFF;">'abc'</span><span style="color:#E1E4E8;">, </span><span style="color:#9ECBFF;">'cba'</span><span style="color:#E1E4E8;">, </span><span style="color:#9ECBFF;">'nba'</span><span style="color:#E1E4E8;">]</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">obj</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> name: </span><span style="color:#9ECBFF;">'Ziu'</span><span style="color:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> age: </span><span style="color:#79B8FF;">18</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> }</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">// for-in可以遍历数组</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">for</span><span style="color:#E1E4E8;"> (</span><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">i</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">in</span><span style="color:#E1E4E8;"> arr) {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(i) </span><span style="color:#6A737D;">// 0 1 2</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> }</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">// for-of可以遍历数组</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">for</span><span style="color:#E1E4E8;"> (</span><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">i</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">of</span><span style="color:#E1E4E8;"> arr) {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(i) </span><span style="color:#6A737D;">// abc cba nba</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> }</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">// for-in可以遍历对象的key值</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">for</span><span style="color:#E1E4E8;"> (</span><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">i</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">in</span><span style="color:#E1E4E8;"> obj) {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(i) </span><span style="color:#6A737D;">// name age</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> }</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">// for-of不能遍历对象 会报错</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">for</span><span style="color:#E1E4E8;"> (</span><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">i</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">of</span><span style="color:#E1E4E8;"> obj) {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(i) </span><span style="color:#6A737D;">// Error</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> }</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">arr</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> [</span><span style="color:#032F62;">'abc'</span><span style="color:#24292E;">, </span><span style="color:#032F62;">'cba'</span><span style="color:#24292E;">, </span><span style="color:#032F62;">'nba'</span><span style="color:#24292E;">]</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">obj</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> name: </span><span style="color:#032F62;">'Ziu'</span><span style="color:#24292E;">,</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> age: </span><span style="color:#005CC5;">18</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> }</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6A737D;">// for-in可以遍历数组</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">for</span><span style="color:#24292E;"> (</span><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">i</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">in</span><span style="color:#24292E;"> arr) {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(i) </span><span style="color:#6A737D;">// 0 1 2</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> }</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6A737D;">// for-of可以遍历数组</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">for</span><span style="color:#24292E;"> (</span><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">i</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">of</span><span style="color:#24292E;"> arr) {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(i) </span><span style="color:#6A737D;">// abc cba nba</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> }</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6A737D;">// for-in可以遍历对象的key值</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">for</span><span style="color:#24292E;"> (</span><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">i</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">in</span><span style="color:#24292E;"> obj) {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(i) </span><span style="color:#6A737D;">// name age</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> }</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6A737D;">// for-of不能遍历对象 会报错</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">for</span><span style="color:#24292E;"> (</span><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">i</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">of</span><span style="color:#24292E;"> obj) {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(i) </span><span style="color:#6A737D;">// Error</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> }</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div><h3 id="day-3" tabindex="-1">DAY 3 <a class="header-anchor" href="#day-3" aria-label="Permalink to "DAY 3""></a></h3><h4 id="题目描述-2" tabindex="-1">题目描述 <a class="header-anchor" href="#题目描述-2" aria-label="Permalink to "题目描述""></a></h4><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">选择题 1： </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">关于事件冒泡描述正确的是？ </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">A. 从目标元素向 document 冒泡 </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">B. 从 document 向目标元素冒泡 </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">C. 从 document 向目标元素冒泡，再从目标元素向 document 冒泡 </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">D. 以上都不是 </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">选择题 2： </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">以下哪些 script 标签属性会使脚本有可能在 DOMContentLoaded 事件之后加载？ </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">A. <script async> </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">B. <script defer> </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">C. <script type="module"> </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">D. <script type="module" async></span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">选择题 1： </span></span>
|
||||
<span class="line"><span style="color:#24292e;">关于事件冒泡描述正确的是？ </span></span>
|
||||
<span class="line"><span style="color:#24292e;">A. 从目标元素向 document 冒泡 </span></span>
|
||||
<span class="line"><span style="color:#24292e;">B. 从 document 向目标元素冒泡 </span></span>
|
||||
<span class="line"><span style="color:#24292e;">C. 从 document 向目标元素冒泡，再从目标元素向 document 冒泡 </span></span>
|
||||
<span class="line"><span style="color:#24292e;">D. 以上都不是 </span></span>
|
||||
<span class="line"><span style="color:#24292e;"> </span></span>
|
||||
<span class="line"><span style="color:#24292e;">选择题 2： </span></span>
|
||||
<span class="line"><span style="color:#24292e;">以下哪些 script 标签属性会使脚本有可能在 DOMContentLoaded 事件之后加载？ </span></span>
|
||||
<span class="line"><span style="color:#24292e;">A. <script async> </span></span>
|
||||
<span class="line"><span style="color:#24292e;">B. <script defer> </span></span>
|
||||
<span class="line"><span style="color:#24292e;">C. <script type="module"> </span></span>
|
||||
<span class="line"><span style="color:#24292e;">D. <script type="module" async></span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h4 id="答案与解析-2" tabindex="-1">答案与解析 <a class="header-anchor" href="#答案与解析-2" aria-label="Permalink to "答案与解析""></a></h4><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">1. A</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">2. AD</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">1. A</span></span>
|
||||
<span class="line"><span style="color:#24292e;">2. AD</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h4 id="冒泡与捕获" tabindex="-1">冒泡与捕获 <a class="header-anchor" href="#冒泡与捕获" aria-label="Permalink to "冒泡与捕获""></a></h4><p>事件冒泡：浏览器从触发事件的目标元素开始向上检查其祖先元素是否注册了此事件的监听器，如果其祖先元素注册了此事件监听回调，则触发回调。此操作会层层向上，直到<code><html></code>元素</p><p><a href="https://juejin.cn/post/7093018681621512222" target="_blank" rel="noreferrer">一文读懂事件冒泡与事件捕获</a></p><h4 id="script的defer-async属性" tabindex="-1">script的defer async属性 <a class="header-anchor" href="#script的defer-async属性" aria-label="Permalink to "script的defer async属性""></a></h4><ul><li>defer 延迟加载 <ul><li>不会阻塞DOM Tree的构建过程</li><li>下载完成后 总会等待DOM Tree构建完成后执行</li><li>一定在<code>DOMContentLoaded</code>事件之前触发</li></ul></li><li>async 异步加载 <ul><li>不保证执行顺序 独立下载、独立运行</li><li>只要下载完成就立即执行 不保证在<code>DOMContentLoaded</code>之前或之后被执行</li></ul></li></ul><p>被标记为<code>type="module"</code>的<code><script></code>会被浏览器识别为ES6 Module，当浏览器解析到此<code><script></code>时将异步下载此脚本，不会造成堵塞浏览器，其本质上与<code>defer</code>是一致的：</p><div class="language-html vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">type</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"module"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">src</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"./foo.js"</span><span style="color:#E1E4E8;">></</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="color:#6A737D;"><!-- 等同于 --></span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">type</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"module"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">src</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"./foo.js"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">defer</span><span style="color:#E1E4E8;">></</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">type</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"module"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">src</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"./foo.js"</span><span style="color:#24292E;">></</span><span style="color:#22863A;">script</span><span style="color:#24292E;">></span></span>
|
||||
<span class="line"><span style="color:#6A737D;"><!-- 等同于 --></span></span>
|
||||
<span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">type</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"module"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">src</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"./foo.js"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">defer</span><span style="color:#24292E;">></</span><span style="color:#22863A;">script</span><span style="color:#24292E;">></span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>当然，如果额外添加了<code>async</code>标记，此脚本将在被下载完成后中断渲染，立即执行</p><p><a href="https://es6.ruanyifeng.com/#docs/module-loader" target="_blank" rel="noreferrer">Module 的加载实现</a></p><h3 id="day-4" tabindex="-1">DAY 4 <a class="header-anchor" href="#day-4" aria-label="Permalink to "DAY 4""></a></h3><h4 id="题目描述-3" tabindex="-1">题目描述 <a class="header-anchor" href="#题目描述-3" aria-label="Permalink to "题目描述""></a></h4><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">选择题 1： </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">以下哪些是 CSS 块级元素的特性？ </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">A. 宽度默认由其中的内容决定 </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">B. 高度默认由其中的内容决定 </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">C. 可以被分拆到多行 </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">D. 可以通过 height 属性指定高度 </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">选择题 2： </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">以下关于跨域说法错误的是？ </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">A. http://example.com和https://example.com是相同的域名，属于同源 </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">B. 跨域资源共享规范中规定了除了 GET 之外的 HTTP 请求，或者搭配某些 MINE 类型的 POST 请求，浏览器都需要先发一个 OPTIONS 请求。 </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">C. CSS 中通过 @font-face 使用字体也会有跨域问题 </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">D. Cookie，LocalStorage 和 IndexedDB 都会受到同源策略的限制</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">选择题 1： </span></span>
|
||||
<span class="line"><span style="color:#24292e;">以下哪些是 CSS 块级元素的特性？ </span></span>
|
||||
<span class="line"><span style="color:#24292e;">A. 宽度默认由其中的内容决定 </span></span>
|
||||
<span class="line"><span style="color:#24292e;">B. 高度默认由其中的内容决定 </span></span>
|
||||
<span class="line"><span style="color:#24292e;">C. 可以被分拆到多行 </span></span>
|
||||
<span class="line"><span style="color:#24292e;">D. 可以通过 height 属性指定高度 </span></span>
|
||||
<span class="line"><span style="color:#24292e;"> </span></span>
|
||||
<span class="line"><span style="color:#24292e;">选择题 2： </span></span>
|
||||
<span class="line"><span style="color:#24292e;">以下关于跨域说法错误的是？ </span></span>
|
||||
<span class="line"><span style="color:#24292e;">A. http://example.com和https://example.com是相同的域名，属于同源 </span></span>
|
||||
<span class="line"><span style="color:#24292e;">B. 跨域资源共享规范中规定了除了 GET 之外的 HTTP 请求，或者搭配某些 MINE 类型的 POST 请求，浏览器都需要先发一个 OPTIONS 请求。 </span></span>
|
||||
<span class="line"><span style="color:#24292e;">C. CSS 中通过 @font-face 使用字体也会有跨域问题 </span></span>
|
||||
<span class="line"><span style="color:#24292e;">D. Cookie，LocalStorage 和 IndexedDB 都会受到同源策略的限制</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h4 id="答案与解析-3" tabindex="-1">答案与解析 <a class="header-anchor" href="#答案与解析-3" aria-label="Permalink to "答案与解析""></a></h4><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">1. BD</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">2. A</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">1. BD</span></span>
|
||||
<span class="line"><span style="color:#24292e;">2. A</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h4 id="块级元素、行内级元素、行内块级元素" tabindex="-1">块级元素、行内级元素、行内块级元素 <a class="header-anchor" href="#块级元素、行内级元素、行内块级元素" aria-label="Permalink to "块级元素、行内级元素、行内块级元素""></a></h4><p>块级元素在BFC中布局，行内级元素在IFC中布局，二者具有不同的特性：</p><p>常见的块级(block)元素：<code>div</code> <code>h1</code> <code>p</code> 等</p><ul><li>每个块级元素都是独自占一行</li><li>元素的宽度如果不设置的话，默认为父元素的宽度（父元素宽度100%）</li><li>高度、行高、外边距（margin）以及内边距（padding）都可以控制</li><li>多个块状元素从上至下排列</li></ul><p>常见的行内级(inline-level)元素：<code>a</code> <code>span</code> 等</p><ul><li>不能设置宽高，默认宽度就是它本身内容的宽度，不独占一行</li><li>高度、行高、外边距以及内边距都可以控制</li><li>但是之间会有空白缝隙，设置它上一级的 <code>font-size: 0;</code> 才能消除间隙</li></ul><p>常见的行内块级(inline-block)元素：<code>img</code> <code>button</code> <code>input</code> 等</p><ul><li>同时具有块级与行内级元素的特性</li><li>可以设置宽高，其默认宽高由其内容决定</li></ul><h4 id="跨域资源共享-cors" tabindex="-1">跨域资源共享 CORS <a class="header-anchor" href="#跨域资源共享-cors" aria-label="Permalink to "跨域资源共享 CORS""></a></h4><p>CORS是常用的跨域解决办法之一，下面简单列出纲要，详细解析请见 <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS" target="_blank" rel="noreferrer">跨域资源共享（CORS）</a></p><ul><li>什么是CORS？可以解决哪些场景下的跨域问题？</li><li>满足哪些条件的请求可以被识别为<code>简单请求</code>？</li><li>什么是预检请求？</li><li>附带身份凭证的跨域请求需要注意什么？</li></ul><p>简单介绍一下跨域的内容：</p><ul><li>跨域的概念 <ul><li>域名由<code>协议://域名:端口号</code>组成</li><li>三个部分有任一不同即被浏览器视为跨域</li><li>是浏览器的安全行为，跨域请求会被真实发出和处理，但响应会被浏览器拦截</li></ul></li><li>跨域的影响 <ul><li>不同域之间的资源不能共享（<code>Cookie LocalStorage IndexedDB</code>等）</li><li>无法接触非同源网页的DOM和js对象</li><li>无法向非同源地址发送Ajax请求</li></ul></li><li>跨域的解决方案 <ul><li>JSONP</li><li>CORS</li><li>代理服务器</li></ul></li></ul><p><a href="https://segmentfault.com/a/1190000040485198" target="_blank" rel="noreferrer">什么是跨域？出现原因及解决方法</a></p><h3 id="day-5" tabindex="-1">DAY 5 <a class="header-anchor" href="#day-5" aria-label="Permalink to "DAY 5""></a></h3><h4 id="题目描述-4" tabindex="-1">题目描述 <a class="header-anchor" href="#题目描述-4" aria-label="Permalink to "题目描述""></a></h4><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">选择题 1： </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">下列哪些可以实现浏览器存储数据？ </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">A. cookie </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">B. localStorage </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">C. session </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">D. sessionStorage </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">选择题 2： </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">对以下代码说法正确的是？ </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">let arr = [1,2,3,4,5]; </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">let arr2 = [1, , 3]; </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">A. 执行 arr.length = 3，此时数组为 [1,2,3] </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">B. 执行 arr[10] = 11，此时 arr.length 为 6 </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">C. 执行 delete arr[2]，此时 arr.length 为 4，数组为 [1,2,4,5] </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">D. arr2.length 的长度为 2</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">选择题 1： </span></span>
|
||||
<span class="line"><span style="color:#24292e;">下列哪些可以实现浏览器存储数据？ </span></span>
|
||||
<span class="line"><span style="color:#24292e;">A. cookie </span></span>
|
||||
<span class="line"><span style="color:#24292e;">B. localStorage </span></span>
|
||||
<span class="line"><span style="color:#24292e;">C. session </span></span>
|
||||
<span class="line"><span style="color:#24292e;">D. sessionStorage </span></span>
|
||||
<span class="line"><span style="color:#24292e;"> </span></span>
|
||||
<span class="line"><span style="color:#24292e;">选择题 2： </span></span>
|
||||
<span class="line"><span style="color:#24292e;">对以下代码说法正确的是？ </span></span>
|
||||
<span class="line"><span style="color:#24292e;">let arr = [1,2,3,4,5]; </span></span>
|
||||
<span class="line"><span style="color:#24292e;">let arr2 = [1, , 3]; </span></span>
|
||||
<span class="line"><span style="color:#24292e;">A. 执行 arr.length = 3，此时数组为 [1,2,3] </span></span>
|
||||
<span class="line"><span style="color:#24292e;">B. 执行 arr[10] = 11，此时 arr.length 为 6 </span></span>
|
||||
<span class="line"><span style="color:#24292e;">C. 执行 delete arr[2]，此时 arr.length 为 4，数组为 [1,2,4,5] </span></span>
|
||||
<span class="line"><span style="color:#24292e;">D. arr2.length 的长度为 2</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h4 id="答案与解析-4" tabindex="-1">答案与解析 <a class="header-anchor" href="#答案与解析-4" aria-label="Permalink to "答案与解析""></a></h4><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">1. ABD</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">2. A</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">1. ABD</span></span>
|
||||
<span class="line"><span style="color:#24292e;">2. A</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h4 id="解析cookie-localstorage-sessionstorage异同" tabindex="-1">解析Cookie LocalStorage SessionStorage异同 <a class="header-anchor" href="#解析cookie-localstorage-sessionstorage异同" aria-label="Permalink to "解析Cookie LocalStorage SessionStorage异同""></a></h4><p><code>Cookie LocalStorage SessionStorage</code>都是保存在浏览器内部的数据</p><p>而<code>Session</code>一般是保存在服务器中，用来标识客户端会话信息。</p><table><thead><tr><th></th><th>Cookie</th><th>LocalStorage</th><th>SessionStorage</th></tr></thead><tbody><tr><td>大小</td><td>4Kb</td><td>5MB</td><td>5MB</td></tr><tr><td>兼容</td><td>H4/H5</td><td>H5</td><td>H5</td></tr><tr><td>访问</td><td>任何窗口</td><td>任何窗口</td><td>同一窗口</td></tr><tr><td>有效期</td><td>手动设置</td><td>无</td><td>窗口关闭</td></tr><tr><td>存储位置</td><td>浏览器和服务器</td><td>浏览器</td><td>浏览器</td></tr><tr><td>与请求一起发送</td><td>是</td><td>否</td><td>否</td></tr><tr><td>语法</td><td>复杂</td><td>简单</td><td>简单</td></tr></tbody></table><ul><li>Cookie是由<code>?key1=value1;key2=value2</code>组成的，可以通过<code>encodeURIComponent()</code>来保证它不包含任何逗号、分号或空格(cookie值中禁止使用这些值).</li><li>Cookie一般的字段有<code>path domain max-age expires secure</code></li><li>不同的host之间的localStorage、sessionStorage对象是隔离的</li></ul><h4 id="代码运行结果" tabindex="-1">代码运行结果 <a class="header-anchor" href="#代码运行结果" aria-label="Permalink to "代码运行结果""></a></h4><p>首先定义<code>arr</code>与<code>arr2</code>两个数组：</p><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">let</span><span style="color:#E1E4E8;"> arr </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> [</span><span style="color:#79B8FF;">1</span><span style="color:#E1E4E8;">, </span><span style="color:#79B8FF;">2</span><span style="color:#E1E4E8;">, </span><span style="color:#79B8FF;">3</span><span style="color:#E1E4E8;">, </span><span style="color:#79B8FF;">4</span><span style="color:#E1E4E8;">, </span><span style="color:#79B8FF;">5</span><span style="color:#E1E4E8;">]</span></span>
|
||||
<span class="line"><span style="color:#F97583;">let</span><span style="color:#E1E4E8;"> arr2 </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> [</span><span style="color:#79B8FF;">1</span><span style="color:#E1E4E8;">, , </span><span style="color:#79B8FF;">3</span><span style="color:#E1E4E8;">]</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">let</span><span style="color:#24292E;"> arr </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> [</span><span style="color:#005CC5;">1</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">2</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">3</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">4</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">5</span><span style="color:#24292E;">]</span></span>
|
||||
<span class="line"><span style="color:#D73A49;">let</span><span style="color:#24292E;"> arr2 </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> [</span><span style="color:#005CC5;">1</span><span style="color:#24292E;">, , </span><span style="color:#005CC5;">3</span><span style="color:#24292E;">]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>A选项：</p><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">arr.</span><span style="color:#79B8FF;">length</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">3</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(arr) </span><span style="color:#6A737D;">// [1, 2, 3]</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">arr.</span><span style="color:#005CC5;">length</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">3</span></span>
|
||||
<span class="line"><span style="color:#24292E;">console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(arr) </span><span style="color:#6A737D;">// [1, 2, 3]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>B选项：</p><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">arr[</span><span style="color:#79B8FF;">10</span><span style="color:#E1E4E8;">] </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">11</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(arr.</span><span style="color:#79B8FF;">length</span><span style="color:#E1E4E8;">) </span><span style="color:#6A737D;">// 11</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">arr[</span><span style="color:#005CC5;">10</span><span style="color:#24292E;">] </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">11</span></span>
|
||||
<span class="line"><span style="color:#24292E;">console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(arr.</span><span style="color:#005CC5;">length</span><span style="color:#24292E;">) </span><span style="color:#6A737D;">// 11</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>C选项：</p><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#6A737D;">// 当你删除一个数组元素时，数组的长度不受影响。即便你删除了数组的最后一个元素也是如此。</span></span>
|
||||
<span class="line"><span style="color:#F97583;">delete</span><span style="color:#E1E4E8;"> arr[</span><span style="color:#79B8FF;">2</span><span style="color:#E1E4E8;">]</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(arr[</span><span style="color:#79B8FF;">2</span><span style="color:#E1E4E8;">]) </span><span style="color:#6A737D;">// undefined</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(arr) </span><span style="color:#6A737D;">// [1, 2, <empty item>, 4, 5]</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(arr.</span><span style="color:#79B8FF;">length</span><span style="color:#E1E4E8;">) </span><span style="color:#6A737D;">// 5</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#6A737D;">// 当你删除一个数组元素时，数组的长度不受影响。即便你删除了数组的最后一个元素也是如此。</span></span>
|
||||
<span class="line"><span style="color:#D73A49;">delete</span><span style="color:#24292E;"> arr[</span><span style="color:#005CC5;">2</span><span style="color:#24292E;">]</span></span>
|
||||
<span class="line"><span style="color:#24292E;">console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(arr[</span><span style="color:#005CC5;">2</span><span style="color:#24292E;">]) </span><span style="color:#6A737D;">// undefined</span></span>
|
||||
<span class="line"><span style="color:#24292E;">console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(arr) </span><span style="color:#6A737D;">// [1, 2, <empty item>, 4, 5]</span></span>
|
||||
<span class="line"><span style="color:#24292E;">console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(arr.</span><span style="color:#005CC5;">length</span><span style="color:#24292E;">) </span><span style="color:#6A737D;">// 5</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>D选项：</p><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(arr2.</span><span style="color:#79B8FF;">length</span><span style="color:#E1E4E8;">) </span><span style="color:#6A737D;">// 3</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(arr2.</span><span style="color:#005CC5;">length</span><span style="color:#24292E;">) </span><span style="color:#6A737D;">// 3</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>delete 操作符用于删除对象的某个属性；如果没有指向这个属性的引用，那它最终会被释放。</p><p><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/delete" target="_blank" rel="noreferrer">MDN: delete操作符</a></p><h3 id="day-6" tabindex="-1">DAY 6 <a class="header-anchor" href="#day-6" aria-label="Permalink to "DAY 6""></a></h3><h4 id="题目描述-5" tabindex="-1">题目描述 <a class="header-anchor" href="#题目描述-5" aria-label="Permalink to "题目描述""></a></h4><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">选择题 1： </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">在 css 选择器当中，优先级排序正确的是？ </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">A. id选择器>标签选择器>类选择器 </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">B. 标签选择器>类选择器>id选择器 </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">C. 类选择器>标签选择器>id选择器 </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">D. id选择器>类选择器>标签选择器 </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">选择题 2： </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">如以下代码所示，给 body 绑定两个事件后，调用 document.body.click() 输出的结果是？ </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">document.body.addEventListener('click', () => { </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">Promise.resolve().then(() => console.log(1)) </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">console.log(2); </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">}, false); </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">document.body.addEventListener('click', () => { </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">Promise.resolve().then(() => console.log(3)) </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">console.log(4); </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">}, false); </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">A. 2, 4, 1, 3 </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">B. 2, 1, 4, 3 </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">C. 1, 2, 3, 4 </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">D. 1, 3, 2, 4</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">选择题 1： </span></span>
|
||||
<span class="line"><span style="color:#24292e;">在 css 选择器当中，优先级排序正确的是？ </span></span>
|
||||
<span class="line"><span style="color:#24292e;">A. id选择器>标签选择器>类选择器 </span></span>
|
||||
<span class="line"><span style="color:#24292e;">B. 标签选择器>类选择器>id选择器 </span></span>
|
||||
<span class="line"><span style="color:#24292e;">C. 类选择器>标签选择器>id选择器 </span></span>
|
||||
<span class="line"><span style="color:#24292e;">D. id选择器>类选择器>标签选择器 </span></span>
|
||||
<span class="line"><span style="color:#24292e;"> </span></span>
|
||||
<span class="line"><span style="color:#24292e;">选择题 2： </span></span>
|
||||
<span class="line"><span style="color:#24292e;">如以下代码所示，给 body 绑定两个事件后，调用 document.body.click() 输出的结果是？ </span></span>
|
||||
<span class="line"><span style="color:#24292e;">document.body.addEventListener('click', () => { </span></span>
|
||||
<span class="line"><span style="color:#24292e;">Promise.resolve().then(() => console.log(1)) </span></span>
|
||||
<span class="line"><span style="color:#24292e;">console.log(2); </span></span>
|
||||
<span class="line"><span style="color:#24292e;">}, false); </span></span>
|
||||
<span class="line"><span style="color:#24292e;">document.body.addEventListener('click', () => { </span></span>
|
||||
<span class="line"><span style="color:#24292e;">Promise.resolve().then(() => console.log(3)) </span></span>
|
||||
<span class="line"><span style="color:#24292e;">console.log(4); </span></span>
|
||||
<span class="line"><span style="color:#24292e;">}, false); </span></span>
|
||||
<span class="line"><span style="color:#24292e;">A. 2, 4, 1, 3 </span></span>
|
||||
<span class="line"><span style="color:#24292e;">B. 2, 1, 4, 3 </span></span>
|
||||
<span class="line"><span style="color:#24292e;">C. 1, 2, 3, 4 </span></span>
|
||||
<span class="line"><span style="color:#24292e;">D. 1, 3, 2, 4</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div><h4 id="答案与解析-5" tabindex="-1">答案与解析 <a class="header-anchor" href="#答案与解析-5" aria-label="Permalink to "答案与解析""></a></h4><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">1. D</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">2. B</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">1. D</span></span>
|
||||
<span class="line"><span style="color:#24292e;">2. B</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h4 id="css选择器优先级" tabindex="-1">CSS选择器优先级 <a class="header-anchor" href="#css选择器优先级" aria-label="Permalink to "CSS选择器优先级""></a></h4><p>内联样式 > <strong>ID选择器 > 类选择器 > 标签选择器</strong> > 通配符</p><p>不同选择器权重值不同，权重值更高的属性值会覆盖更低的值</p><ul><li><code>!important</code> 10000</li><li><code>内联样式</code> 1000</li><li><code>id选择器</code> 100</li><li><code>类选择器、属性选择器、伪类</code> 10</li><li><code>元素选择器、伪元素</code> 1</li><li><code>通配符</code> 0</li></ul><h4 id="事件循环" tabindex="-1">事件循环 <a class="header-anchor" href="#事件循环" aria-label="Permalink to "事件循环""></a></h4><p>需要了解浏览器的事件循环机制才能解出此题，以下是一些可能需要掌握的概念：</p><ul><li>JavaScript是单线程的</li><li>浏览器事件循环机制</li><li>主线程、宏任务队列、微任务队列、常见的宏任务与微任务</li><li>任务执行队列、函数执行栈</li></ul><h3 id="day-7" tabindex="-1">DAY 7 <a class="header-anchor" href="#day-7" aria-label="Permalink to "DAY 7""></a></h3><h4 id="题目描述-6" tabindex="-1">题目描述 <a class="header-anchor" href="#题目描述-6" aria-label="Permalink to "题目描述""></a></h4><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">选择题 1： </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">浮动会导致页面的非正常显示，以下几种清除浮动的方法，哪个是不推荐使用的？ </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">A. 在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div> </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">B. 通过设置父元素overflow值为hidden； </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">C. 给父元素添加clearfix类 </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">D. 父元素也设置浮动 </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">选择题 2： </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">以下代码的运行结果是？ </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">var f = function () { console.log('1'); } function f() { console.log('2'); } </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">f() </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">A. undefined </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">B. 报错 </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">C. 2 </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">D. 1</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">选择题 1： </span></span>
|
||||
<span class="line"><span style="color:#24292e;">浮动会导致页面的非正常显示，以下几种清除浮动的方法，哪个是不推荐使用的？ </span></span>
|
||||
<span class="line"><span style="color:#24292e;">A. 在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div> </span></span>
|
||||
<span class="line"><span style="color:#24292e;">B. 通过设置父元素overflow值为hidden； </span></span>
|
||||
<span class="line"><span style="color:#24292e;">C. 给父元素添加clearfix类 </span></span>
|
||||
<span class="line"><span style="color:#24292e;">D. 父元素也设置浮动 </span></span>
|
||||
<span class="line"><span style="color:#24292e;"> </span></span>
|
||||
<span class="line"><span style="color:#24292e;">选择题 2： </span></span>
|
||||
<span class="line"><span style="color:#24292e;">以下代码的运行结果是？ </span></span>
|
||||
<span class="line"><span style="color:#24292e;">var f = function () { console.log('1'); } function f() { console.log('2'); } </span></span>
|
||||
<span class="line"><span style="color:#24292e;">f() </span></span>
|
||||
<span class="line"><span style="color:#24292e;">A. undefined </span></span>
|
||||
<span class="line"><span style="color:#24292e;">B. 报错 </span></span>
|
||||
<span class="line"><span style="color:#24292e;">C. 2 </span></span>
|
||||
<span class="line"><span style="color:#24292e;">D. 1</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h4 id="答案与解析-6" tabindex="-1">答案与解析 <a class="header-anchor" href="#答案与解析-6" aria-label="Permalink to "答案与解析""></a></h4><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">1. D</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">2. D</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">1. D</span></span>
|
||||
<span class="line"><span style="color:#24292e;">2. D</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h4 id="清除浮动的方法及原理" tabindex="-1">清除浮动的方法及原理 <a class="header-anchor" href="#清除浮动的方法及原理" aria-label="Permalink to "清除浮动的方法及原理""></a></h4><p>什么是清除浮动？</p><p>当容器的高度为<code>auto</code>，且容器的内容中有浮动元素时，容器的高度不能自动伸长以适应内容的高度，这个时候就需要清除浮动，让容器的高度自动伸长以适应浮动元素。</p><p>清除浮动常用方法</p><ul><li>使用带clear属性的空元素 <ul><li>在浮动元素后使用一个空元素如<code><div class="clear"></div></code></li><li>并在CSS中赋予<code>.clear{ clear: both; }</code>属性即可清理浮动</li></ul></li><li>使用CSS的overflow属性 <ul><li>给父元素赋予<code>overflow: visible;</code>，创建一个新的BFC <ul><li>浮动元素的父元素触发BFC，形成独立的块级格式化上下文</li><li>浮动元素的父元素的高度值为auto（height的默认值即为auto）</li></ul></li><li>BFC拥有自己的计算高度的方法与规则 <ul><li><strong>如果有浮动元素，那么会增加高度以包括这些浮动元素的下边缘</strong></li><li><a href="https://www.w3.org/TR/CSS2/visudet.html" target="_blank" rel="noreferrer">W3C 10.6.7 'Auto' heights for block formatting context roots</a></li></ul></li></ul></li><li>给浮动的元素的容器添加浮动 <ul><li>会导致父元素也跟着浮动 不常用 也不推荐</li></ul></li><li>使用邻接元素处理 <ul><li>给浮动元素后面的兄弟元素添加<code>clear</code>属性</li></ul></li><li>使用CSS的<code>::after</code>伪元素 <ul><li>给浮动元素的父元素末尾添加一个看不见的块元素（Block element）</li><li>给这个伪元素添加<code>clear</code>属性清理浮动</li></ul></li></ul><h4 id="变量提升" tabindex="-1">变量提升 <a class="header-anchor" href="#变量提升" aria-label="Permalink to "变量提升""></a></h4><p>题目涉及JavaScript的变量提升知识，详细解析见：</p><p><a href="https://developer.mozilla.org/zh-CN/docs/Glossary/Hoisting" target="_blank" rel="noreferrer">MDN 变量提升</a></p><p><a href="https://segmentfault.com/a/1190000039288278" target="_blank" rel="noreferrer">彻底解决JS变量提升的面试题</a></p><h3 id="day-8" tabindex="-1">DAY 8 <a class="header-anchor" href="#day-8" aria-label="Permalink to "DAY 8""></a></h3><h4 id="题目描述-7" tabindex="-1">题目描述 <a class="header-anchor" href="#题目描述-7" aria-label="Permalink to "题目描述""></a></h4><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">选择题 1： </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">下列说法正确的有哪些？ </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">A. visibility:hidden 表示所占据的空间位置仍然存在，仅为视觉上的完全透明 </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">B. display:none 不为被隐藏的对象保留其物理空间 </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">C. visibility:hidden 与display:none 两者没有本质上的区别 </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">D. visibility:hidden 回流与重绘 </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">选择题 2： </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">若主机甲与主机已已建立一条 TCP 链接，最大段长（MSS）为 1KB，往返时间（RTT）为 2 ms，则在不出现拥塞的前提下，拥塞窗口从 8KB 增长到 32KB 所需的最长时间是？ </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">A. 4ms </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">B. 8ms </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">C. 24ms </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">D. 48ms</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">选择题 1： </span></span>
|
||||
<span class="line"><span style="color:#24292e;">下列说法正确的有哪些？ </span></span>
|
||||
<span class="line"><span style="color:#24292e;">A. visibility:hidden 表示所占据的空间位置仍然存在，仅为视觉上的完全透明 </span></span>
|
||||
<span class="line"><span style="color:#24292e;">B. display:none 不为被隐藏的对象保留其物理空间 </span></span>
|
||||
<span class="line"><span style="color:#24292e;">C. visibility:hidden 与display:none 两者没有本质上的区别 </span></span>
|
||||
<span class="line"><span style="color:#24292e;">D. visibility:hidden 回流与重绘 </span></span>
|
||||
<span class="line"><span style="color:#24292e;"> </span></span>
|
||||
<span class="line"><span style="color:#24292e;">选择题 2： </span></span>
|
||||
<span class="line"><span style="color:#24292e;">若主机甲与主机已已建立一条 TCP 链接，最大段长（MSS）为 1KB，往返时间（RTT）为 2 ms，则在不出现拥塞的前提下，拥塞窗口从 8KB 增长到 32KB 所需的最长时间是？ </span></span>
|
||||
<span class="line"><span style="color:#24292e;">A. 4ms </span></span>
|
||||
<span class="line"><span style="color:#24292e;">B. 8ms </span></span>
|
||||
<span class="line"><span style="color:#24292e;">C. 24ms </span></span>
|
||||
<span class="line"><span style="color:#24292e;">D. 48ms</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h4 id="答案与解析-7" tabindex="-1">答案与解析 <a class="header-anchor" href="#答案与解析-7" aria-label="Permalink to "答案与解析""></a></h4><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">1. AB(D)</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">2. D</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">1. AB(D)</span></span>
|
||||
<span class="line"><span style="color:#24292e;">2. D</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h4 id="回流与重绘" tabindex="-1">回流与重绘 <a class="header-anchor" href="#回流与重绘" aria-label="Permalink to "回流与重绘""></a></h4><ul><li>重绘不一定引起回流，而回流一定会引起重绘，所以回流是一件很消耗性能的事情</li><li>什么情况下会触发回流？ <ul><li>DOM 结构发生改变（添加新的节点或者移除节点）</li><li>改变了布局（修改了width height padding font-size等值）</li><li>窗口resize（修改了窗口的尺寸等）</li><li>调用getComputedStyle方法获取尺寸、位置信息</li></ul></li><li>什么情况会触发重绘？ <ul><li>修改背景色、文字颜色、边框颜色、样式等</li></ul></li></ul><p>元素的几种不同显示状态：</p><ul><li><code>display: none</code> 指的是元素完全不陈列出来，不占据空间，涉及到了DOM结构，故产生reflow与repaint</li><li><code>visibility: hidden</code> 指的是元素不可见但存在，保留空间，不影响结构，故只产生repaint，但不可触发绑定事件</li><li><code>opacity: 0</code> 指的是元素不可见但存在，保留空间，不影响结构，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的</li></ul><h4 id="拥塞窗口调整" tabindex="-1">拥塞窗口调整 <a class="header-anchor" href="#拥塞窗口调整" aria-label="Permalink to "拥塞窗口调整""></a></h4><p>拥塞窗口调整有两种模式，一种是以指数增长的慢启动模式，另一种是以线性增长的拥塞避免模式</p><p>开始传输时是以慢启动模式调整拥塞窗口，当窗口大小达到名为ssthresh的阈值时，改用拥塞避免模式调整。</p><p>问“最长时间”，应该就是指ssthresh非常小以至于一开始就是拥塞避免模式，使得窗口调整的速度较慢，每一个RTT会增加1个MSS（这里是1KB）</p><p>从8KB到32KB有24KB的调整空间，就需要<code>24个RTT x 每个RTT的2ms</code>，共计48ms</p><p><a href="https://zh.wikipedia.org/zh-tw/TCP%E6%8B%A5%E5%A1%9E%E6%8E%A7%E5%88%B6" target="_blank" rel="noreferrer">WikiPedia: TCP拥塞控制</a></p><h3 id="day-9" tabindex="-1">DAY 9 <a class="header-anchor" href="#day-9" aria-label="Permalink to "DAY 9""></a></h3><h4 id="题目描述-8" tabindex="-1">题目描述 <a class="header-anchor" href="#题目描述-8" aria-label="Permalink to "题目描述""></a></h4><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">选择题 1： </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">以下对HTML标签的使用，哪些是符合语义的？ </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">A. 使用 table 展示表格数据 </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">B. 使用 span 表示按钮 </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">C. 使用 article 展示文章内容 </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">D. 使用 p 标签展示文章标题 </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">选择题 2： </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">包过滤防火墙对数据包的过滤依据不包括哪些？ </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">A. 源IP地址 </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">B. 源端口号 </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">C. MAC 地址 </span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">D. 目的 IP 地址</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">选择题 1： </span></span>
|
||||
<span class="line"><span style="color:#24292e;">以下对HTML标签的使用，哪些是符合语义的？ </span></span>
|
||||
<span class="line"><span style="color:#24292e;">A. 使用 table 展示表格数据 </span></span>
|
||||
<span class="line"><span style="color:#24292e;">B. 使用 span 表示按钮 </span></span>
|
||||
<span class="line"><span style="color:#24292e;">C. 使用 article 展示文章内容 </span></span>
|
||||
<span class="line"><span style="color:#24292e;">D. 使用 p 标签展示文章标题 </span></span>
|
||||
<span class="line"><span style="color:#24292e;"> </span></span>
|
||||
<span class="line"><span style="color:#24292e;">选择题 2： </span></span>
|
||||
<span class="line"><span style="color:#24292e;">包过滤防火墙对数据包的过滤依据不包括哪些？ </span></span>
|
||||
<span class="line"><span style="color:#24292e;">A. 源IP地址 </span></span>
|
||||
<span class="line"><span style="color:#24292e;">B. 源端口号 </span></span>
|
||||
<span class="line"><span style="color:#24292e;">C. MAC 地址 </span></span>
|
||||
<span class="line"><span style="color:#24292e;">D. 目的 IP 地址</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h4 id="答案与解析-8" tabindex="-1">答案与解析 <a class="header-anchor" href="#答案与解析-8" aria-label="Permalink to "答案与解析""></a></h4><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">1. AC</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">2. C</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">1. AC</span></span>
|
||||
<span class="line"><span style="color:#24292e;">2. C</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h4 id="html5语义化标签" tabindex="-1">HTML5语义化标签 <a class="header-anchor" href="#html5语义化标签" aria-label="Permalink to "HTML5语义化标签""></a></h4><p>解析略</p><h4 id="包过滤" tabindex="-1">包过滤 <a class="header-anchor" href="#包过滤" aria-label="Permalink to "包过滤""></a></h4><p>包过滤是在IP层实现的，包过滤根据数据包的源IP地址、目的IP地址、协议类型（TCP包、UDP包、ICMP包）、源端口、目的端口等包头信息及数据包传输方向等信息来判断是否允许数据包通过</p><h2 id="编程题" tabindex="-1">编程题 <a class="header-anchor" href="#编程题" aria-label="Permalink to "编程题""></a></h2><h3 id="题目-1" tabindex="-1">题目 1 <a class="header-anchor" href="#题目-1" aria-label="Permalink to "题目 1""></a></h3><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">**题目**</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"></span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">给定一个十进制整数字符串，判断它是否是 4 的幂。</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"></span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">**示例 1**</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"></span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">输入："16"，输出：true</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"></span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">**示例 2**</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"></span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">输入："101"，输出：false</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"></span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">**示例 3**</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"></span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">输入："70368744177664"，输出：true</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"></span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">**限定语言：** C、 C++、Java、Python、JavaScript V8</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">**题目**</span></span>
|
||||
<span class="line"><span style="color:#24292e;"></span></span>
|
||||
<span class="line"><span style="color:#24292e;">给定一个十进制整数字符串，判断它是否是 4 的幂。</span></span>
|
||||
<span class="line"><span style="color:#24292e;"></span></span>
|
||||
<span class="line"><span style="color:#24292e;">**示例 1**</span></span>
|
||||
<span class="line"><span style="color:#24292e;"></span></span>
|
||||
<span class="line"><span style="color:#24292e;">输入："16"，输出：true</span></span>
|
||||
<span class="line"><span style="color:#24292e;"></span></span>
|
||||
<span class="line"><span style="color:#24292e;">**示例 2**</span></span>
|
||||
<span class="line"><span style="color:#24292e;"></span></span>
|
||||
<span class="line"><span style="color:#24292e;">输入："101"，输出：false</span></span>
|
||||
<span class="line"><span style="color:#24292e;"></span></span>
|
||||
<span class="line"><span style="color:#24292e;">**示例 3**</span></span>
|
||||
<span class="line"><span style="color:#24292e;"></span></span>
|
||||
<span class="line"><span style="color:#24292e;">输入："70368744177664"，输出：true</span></span>
|
||||
<span class="line"><span style="color:#24292e;"></span></span>
|
||||
<span class="line"><span style="color:#24292e;">**限定语言：** C、 C++、Java、Python、JavaScript V8</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><h4 id="题解" tabindex="-1">题解 <a class="header-anchor" href="#题解" aria-label="Permalink to "题解""></a></h4><p>TypeScript</p><div class="language-ts vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#6A737D;">// LeetCode 342</span></span>
|
||||
<span class="line"><span style="color:#F97583;">function</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">isPowerOfFour</span><span style="color:#E1E4E8;">(</span><span style="color:#FFAB70;">n</span><span style="color:#F97583;">:</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">number</span><span style="color:#E1E4E8;">)</span><span style="color:#F97583;">:</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">boolean</span><span style="color:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;"> n </span><span style="color:#F97583;">></span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">&&</span><span style="color:#E1E4E8;"> (n </span><span style="color:#F97583;">&</span><span style="color:#E1E4E8;"> (n </span><span style="color:#F97583;">-</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">1</span><span style="color:#E1E4E8;">)) </span><span style="color:#F97583;">===</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">&&</span><span style="color:#E1E4E8;"> n </span><span style="color:#F97583;">%</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">3</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">===</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">1</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">}</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#6A737D;">// LeetCode 342</span></span>
|
||||
<span class="line"><span style="color:#D73A49;">function</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">isPowerOfFour</span><span style="color:#24292E;">(</span><span style="color:#E36209;">n</span><span style="color:#D73A49;">:</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">number</span><span style="color:#24292E;">)</span><span style="color:#D73A49;">:</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">boolean</span><span style="color:#24292E;"> {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> n </span><span style="color:#D73A49;">></span><span style="color:#24292E;"> </span><span style="color:#005CC5;">0</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">&&</span><span style="color:#24292E;"> (n </span><span style="color:#D73A49;">&</span><span style="color:#24292E;"> (n </span><span style="color:#D73A49;">-</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">1</span><span style="color:#24292E;">)) </span><span style="color:#D73A49;">===</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">0</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">&&</span><span style="color:#24292E;"> n </span><span style="color:#D73A49;">%</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">3</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">===</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">1</span></span>
|
||||
<span class="line"><span style="color:#24292E;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="题目-2" tabindex="-1">题目 2 <a class="header-anchor" href="#题目-2" aria-label="Permalink to "题目 2""></a></h3><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">**题目**</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"></span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">给定一个字符串，验证它是否是回文串，只考虑字母和数字字符，可以忽略空格、字母的大小写。</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"></span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">**示例**</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"></span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">输入："A man, a plan, a canal: Panama"，输出：true</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"></span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">**限定语言：** C、 C++、Java、Python、JavaScript V8</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">**题目**</span></span>
|
||||
<span class="line"><span style="color:#24292e;"></span></span>
|
||||
<span class="line"><span style="color:#24292e;">给定一个字符串，验证它是否是回文串，只考虑字母和数字字符，可以忽略空格、字母的大小写。</span></span>
|
||||
<span class="line"><span style="color:#24292e;"></span></span>
|
||||
<span class="line"><span style="color:#24292e;">**示例**</span></span>
|
||||
<span class="line"><span style="color:#24292e;"></span></span>
|
||||
<span class="line"><span style="color:#24292e;">输入："A man, a plan, a canal: Panama"，输出：true</span></span>
|
||||
<span class="line"><span style="color:#24292e;"></span></span>
|
||||
<span class="line"><span style="color:#24292e;">**限定语言：** C、 C++、Java、Python、JavaScript V8</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h4 id="题解-1" tabindex="-1">题解 <a class="header-anchor" href="#题解-1" aria-label="Permalink to "题解""></a></h4><p>TypeScript</p><div class="language-ts vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#6A737D;">// LeetCode 125</span></span>
|
||||
<span class="line"><span style="color:#F97583;">function</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">isPalindrome</span><span style="color:#E1E4E8;">(</span><span style="color:#FFAB70;">s</span><span style="color:#F97583;">:</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">string</span><span style="color:#E1E4E8;">)</span><span style="color:#F97583;">:</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">boolean</span><span style="color:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">let</span><span style="color:#E1E4E8;"> checkStr </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">''</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">let</span><span style="color:#E1E4E8;"> revStr </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">''</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">// 遍历原字符串</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">// 1.将原串转为仅剩数字与小写字母 2.生成反转串</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">for</span><span style="color:#E1E4E8;"> (</span><span style="color:#F97583;">let</span><span style="color:#E1E4E8;"> i </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;">; i </span><span style="color:#F97583;"><</span><span style="color:#E1E4E8;"> s.</span><span style="color:#79B8FF;">length</span><span style="color:#E1E4E8;">; i</span><span style="color:#F97583;">++</span><span style="color:#E1E4E8;">) {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">if</span><span style="color:#E1E4E8;"> (</span><span style="color:#B392F0;">isAlnum</span><span style="color:#E1E4E8;">(s[i])) {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> checkStr </span><span style="color:#F97583;">+=</span><span style="color:#E1E4E8;"> s[i].</span><span style="color:#B392F0;">toLocaleLowerCase</span><span style="color:#E1E4E8;">()</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> revStr </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> s[i].</span><span style="color:#B392F0;">toLocaleLowerCase</span><span style="color:#E1E4E8;">() </span><span style="color:#F97583;">+</span><span style="color:#E1E4E8;"> revStr</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> }</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> }</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;"> checkStr </span><span style="color:#F97583;">===</span><span style="color:#E1E4E8;"> revStr</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#6A737D;">/**</span></span>
|
||||
<span class="line"><span style="color:#6A737D;"> * 检查字符串是否仅由数字与小写字母组成</span></span>
|
||||
<span class="line"><span style="color:#6A737D;"> * </span><span style="color:#F97583;">@param</span><span style="color:#6A737D;"> </span><span style="color:#E1E4E8;">s</span><span style="color:#6A737D;"> 待检查字符串</span></span>
|
||||
<span class="line"><span style="color:#6A737D;"> */</span></span>
|
||||
<span class="line"><span style="color:#F97583;">function</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">isAlnum</span><span style="color:#E1E4E8;">(</span><span style="color:#FFAB70;">s</span><span style="color:#F97583;">:</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">string</span><span style="color:#E1E4E8;">)</span><span style="color:#F97583;">:</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">boolean</span><span style="color:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">return</span><span style="color:#DBEDFF;"> </span><span style="color:#9ECBFF;">/</span><span style="color:#F97583;">^</span><span style="color:#79B8FF;">[a-z0-9]</span><span style="color:#F97583;">+$</span><span style="color:#9ECBFF;">/</span><span style="color:#F97583;">i</span><span style="color:#E1E4E8;">.</span><span style="color:#B392F0;">test</span><span style="color:#E1E4E8;">(s)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">}</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#6A737D;">// LeetCode 125</span></span>
|
||||
<span class="line"><span style="color:#D73A49;">function</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">isPalindrome</span><span style="color:#24292E;">(</span><span style="color:#E36209;">s</span><span style="color:#D73A49;">:</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">string</span><span style="color:#24292E;">)</span><span style="color:#D73A49;">:</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">boolean</span><span style="color:#24292E;"> {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">let</span><span style="color:#24292E;"> checkStr </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#032F62;">''</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">let</span><span style="color:#24292E;"> revStr </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#032F62;">''</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6A737D;">// 遍历原字符串</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6A737D;">// 1.将原串转为仅剩数字与小写字母 2.生成反转串</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">for</span><span style="color:#24292E;"> (</span><span style="color:#D73A49;">let</span><span style="color:#24292E;"> i </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">0</span><span style="color:#24292E;">; i </span><span style="color:#D73A49;"><</span><span style="color:#24292E;"> s.</span><span style="color:#005CC5;">length</span><span style="color:#24292E;">; i</span><span style="color:#D73A49;">++</span><span style="color:#24292E;">) {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">if</span><span style="color:#24292E;"> (</span><span style="color:#6F42C1;">isAlnum</span><span style="color:#24292E;">(s[i])) {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> checkStr </span><span style="color:#D73A49;">+=</span><span style="color:#24292E;"> s[i].</span><span style="color:#6F42C1;">toLocaleLowerCase</span><span style="color:#24292E;">()</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> revStr </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> s[i].</span><span style="color:#6F42C1;">toLocaleLowerCase</span><span style="color:#24292E;">() </span><span style="color:#D73A49;">+</span><span style="color:#24292E;"> revStr</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> }</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> }</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> checkStr </span><span style="color:#D73A49;">===</span><span style="color:#24292E;"> revStr</span></span>
|
||||
<span class="line"><span style="color:#24292E;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#6A737D;">/**</span></span>
|
||||
<span class="line"><span style="color:#6A737D;"> * 检查字符串是否仅由数字与小写字母组成</span></span>
|
||||
<span class="line"><span style="color:#6A737D;"> * </span><span style="color:#D73A49;">@param</span><span style="color:#6A737D;"> </span><span style="color:#24292E;">s</span><span style="color:#6A737D;"> 待检查字符串</span></span>
|
||||
<span class="line"><span style="color:#6A737D;"> */</span></span>
|
||||
<span class="line"><span style="color:#D73A49;">function</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">isAlnum</span><span style="color:#24292E;">(</span><span style="color:#E36209;">s</span><span style="color:#D73A49;">:</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">string</span><span style="color:#24292E;">)</span><span style="color:#D73A49;">:</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">boolean</span><span style="color:#24292E;"> {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">return</span><span style="color:#032F62;"> /</span><span style="color:#D73A49;">^</span><span style="color:#005CC5;">[a-z0-9]</span><span style="color:#D73A49;">+$</span><span style="color:#032F62;">/</span><span style="color:#D73A49;">i</span><span style="color:#24292E;">.</span><span style="color:#6F42C1;">test</span><span style="color:#24292E;">(s)</span></span>
|
||||
<span class="line"><span style="color:#24292E;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><h3 id="题目-3" tabindex="-1">题目 3 <a class="header-anchor" href="#题目-3" aria-label="Permalink to "题目 3""></a></h3><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">**题目**</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"></span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">给定一个字符串，找出该字符串中最长回文子串的长度。</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"></span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">**示例 1**</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"></span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">输入："abc"，输出：0</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"></span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">**示例 2**</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"></span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">输入："abcbe"，输出：3</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"></span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">**示例 3**</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"></span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">输入："acdcecdcf"，输出：7</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"></span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">**限定语言：** C、 C++、Java、Python、JavaScript V8</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">**题目**</span></span>
|
||||
<span class="line"><span style="color:#24292e;"></span></span>
|
||||
<span class="line"><span style="color:#24292e;">给定一个字符串，找出该字符串中最长回文子串的长度。</span></span>
|
||||
<span class="line"><span style="color:#24292e;"></span></span>
|
||||
<span class="line"><span style="color:#24292e;">**示例 1**</span></span>
|
||||
<span class="line"><span style="color:#24292e;"></span></span>
|
||||
<span class="line"><span style="color:#24292e;">输入："abc"，输出：0</span></span>
|
||||
<span class="line"><span style="color:#24292e;"></span></span>
|
||||
<span class="line"><span style="color:#24292e;">**示例 2**</span></span>
|
||||
<span class="line"><span style="color:#24292e;"></span></span>
|
||||
<span class="line"><span style="color:#24292e;">输入："abcbe"，输出：3</span></span>
|
||||
<span class="line"><span style="color:#24292e;"></span></span>
|
||||
<span class="line"><span style="color:#24292e;">**示例 3**</span></span>
|
||||
<span class="line"><span style="color:#24292e;"></span></span>
|
||||
<span class="line"><span style="color:#24292e;">输入："acdcecdcf"，输出：7</span></span>
|
||||
<span class="line"><span style="color:#24292e;"></span></span>
|
||||
<span class="line"><span style="color:#24292e;">**限定语言：** C、 C++、Java、Python、JavaScript V8</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><h4 id="题解-2" tabindex="-1">题解 <a class="header-anchor" href="#题解-2" aria-label="Permalink to "题解""></a></h4><p>TypeScript</p><div class="language-ts vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#6A737D;">// LeetCode 5</span></span>
|
||||
<span class="line"><span style="color:#F97583;">function</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">longestPalindrome</span><span style="color:#E1E4E8;">(</span><span style="color:#FFAB70;">s</span><span style="color:#F97583;">:</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">string</span><span style="color:#E1E4E8;">)</span><span style="color:#F97583;">:</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">string</span><span style="color:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">len</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> s.</span><span style="color:#79B8FF;">length</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">if</span><span style="color:#E1E4E8;"> (len </span><span style="color:#F97583;"><</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">2</span><span style="color:#E1E4E8;">) </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;"> s</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">let</span><span style="color:#E1E4E8;"> maxLength </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">1</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">let</span><span style="color:#E1E4E8;"> begin </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">0</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">for</span><span style="color:#E1E4E8;"> (</span><span style="color:#F97583;">let</span><span style="color:#E1E4E8;"> i </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;">; i </span><span style="color:#F97583;"><</span><span style="color:#E1E4E8;"> len </span><span style="color:#F97583;">-</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">1</span><span style="color:#E1E4E8;">; i</span><span style="color:#F97583;">++</span><span style="color:#E1E4E8;">) {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">// 头指针 从0遍历到len-1</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">for</span><span style="color:#E1E4E8;"> (</span><span style="color:#F97583;">let</span><span style="color:#E1E4E8;"> j </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> i </span><span style="color:#F97583;">+</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">1</span><span style="color:#E1E4E8;">; j </span><span style="color:#F97583;"><</span><span style="color:#E1E4E8;"> len; j</span><span style="color:#F97583;">++</span><span style="color:#E1E4E8;">) {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">// 尾指针 从1遍历到len</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">if</span><span style="color:#E1E4E8;"> (j </span><span style="color:#F97583;">-</span><span style="color:#E1E4E8;"> i </span><span style="color:#F97583;">+</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">1</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">></span><span style="color:#E1E4E8;"> maxLength </span><span style="color:#F97583;">&&</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">validPalindrome</span><span style="color:#E1E4E8;">(s, i, j)) {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">// 子串更长 且为回文字符串</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> maxLength </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> j </span><span style="color:#F97583;">-</span><span style="color:#E1E4E8;"> i </span><span style="color:#F97583;">+</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">1</span><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">// 更新长度</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> begin </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> i </span><span style="color:#6A737D;">// 更新头指针位置</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> }</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> }</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> }</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;"> s.</span><span style="color:#B392F0;">substring</span><span style="color:#E1E4E8;">(begin, begin </span><span style="color:#F97583;">+</span><span style="color:#E1E4E8;"> maxLength)</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">function</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">validPalindrome</span><span style="color:#E1E4E8;">(</span><span style="color:#FFAB70;">str</span><span style="color:#F97583;">:</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">string</span><span style="color:#E1E4E8;">, </span><span style="color:#FFAB70;">begin</span><span style="color:#F97583;">:</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">number</span><span style="color:#E1E4E8;">, </span><span style="color:#FFAB70;">end</span><span style="color:#F97583;">:</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">number</span><span style="color:#E1E4E8;">) {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">while</span><span style="color:#E1E4E8;"> (begin </span><span style="color:#F97583;"><</span><span style="color:#E1E4E8;"> end) {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">if</span><span style="color:#E1E4E8;"> (str[begin] </span><span style="color:#F97583;">!==</span><span style="color:#E1E4E8;"> str[end]) </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">false</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> begin</span><span style="color:#F97583;">++</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> end</span><span style="color:#F97583;">--</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> }</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">true</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> }</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">}</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#6A737D;">// LeetCode 5</span></span>
|
||||
<span class="line"><span style="color:#D73A49;">function</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">longestPalindrome</span><span style="color:#24292E;">(</span><span style="color:#E36209;">s</span><span style="color:#D73A49;">:</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">string</span><span style="color:#24292E;">)</span><span style="color:#D73A49;">:</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">string</span><span style="color:#24292E;"> {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">len</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> s.</span><span style="color:#005CC5;">length</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">if</span><span style="color:#24292E;"> (len </span><span style="color:#D73A49;"><</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">2</span><span style="color:#24292E;">) </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> s</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">let</span><span style="color:#24292E;"> maxLength </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">1</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">let</span><span style="color:#24292E;"> begin </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">0</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">for</span><span style="color:#24292E;"> (</span><span style="color:#D73A49;">let</span><span style="color:#24292E;"> i </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">0</span><span style="color:#24292E;">; i </span><span style="color:#D73A49;"><</span><span style="color:#24292E;"> len </span><span style="color:#D73A49;">-</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">1</span><span style="color:#24292E;">; i</span><span style="color:#D73A49;">++</span><span style="color:#24292E;">) {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6A737D;">// 头指针 从0遍历到len-1</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">for</span><span style="color:#24292E;"> (</span><span style="color:#D73A49;">let</span><span style="color:#24292E;"> j </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> i </span><span style="color:#D73A49;">+</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">1</span><span style="color:#24292E;">; j </span><span style="color:#D73A49;"><</span><span style="color:#24292E;"> len; j</span><span style="color:#D73A49;">++</span><span style="color:#24292E;">) {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6A737D;">// 尾指针 从1遍历到len</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">if</span><span style="color:#24292E;"> (j </span><span style="color:#D73A49;">-</span><span style="color:#24292E;"> i </span><span style="color:#D73A49;">+</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">1</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">></span><span style="color:#24292E;"> maxLength </span><span style="color:#D73A49;">&&</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">validPalindrome</span><span style="color:#24292E;">(s, i, j)) {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6A737D;">// 子串更长 且为回文字符串</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> maxLength </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> j </span><span style="color:#D73A49;">-</span><span style="color:#24292E;"> i </span><span style="color:#D73A49;">+</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">1</span><span style="color:#24292E;"> </span><span style="color:#6A737D;">// 更新长度</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> begin </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> i </span><span style="color:#6A737D;">// 更新头指针位置</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> }</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> }</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> }</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> s.</span><span style="color:#6F42C1;">substring</span><span style="color:#24292E;">(begin, begin </span><span style="color:#D73A49;">+</span><span style="color:#24292E;"> maxLength)</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">function</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">validPalindrome</span><span style="color:#24292E;">(</span><span style="color:#E36209;">str</span><span style="color:#D73A49;">:</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">string</span><span style="color:#24292E;">, </span><span style="color:#E36209;">begin</span><span style="color:#D73A49;">:</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">number</span><span style="color:#24292E;">, </span><span style="color:#E36209;">end</span><span style="color:#D73A49;">:</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">number</span><span style="color:#24292E;">) {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">while</span><span style="color:#24292E;"> (begin </span><span style="color:#D73A49;"><</span><span style="color:#24292E;"> end) {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">if</span><span style="color:#24292E;"> (str[begin] </span><span style="color:#D73A49;">!==</span><span style="color:#24292E;"> str[end]) </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">false</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> begin</span><span style="color:#D73A49;">++</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> end</span><span style="color:#D73A49;">--</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> }</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">true</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> }</span></span>
|
||||
<span class="line"><span style="color:#24292E;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br></div></div>`,150),o=[e];function c(r,t,i,y,d,E){return n(),a("div",null,o)}const h=s(p,[["render",c]]);export{u as __pageData,h as default};
|
||||
1
assets/article_【2023】青训营 - 前端练习题汇总解析.md.aa190ddf.lean.js
Normal file
1
assets/article_【2023】青训营 - 前端练习题汇总解析.md.aa190ddf.lean.js
Normal file
@@ -0,0 +1 @@
|
||||
import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.4001cd3b.js";const u=JSON.parse('{"title":"【2023】青训营 - 前端练习题汇总解析","description":"","frontmatter":{},"headers":[],"relativePath":"article/【2023】青训营 - 前端练习题汇总解析.md","filePath":"article/【2023】青训营 - 前端练习题汇总解析.md","lastUpdated":1697384672000}'),p={name:"article/【2023】青训营 - 前端练习题汇总解析.md"},e=l("",150),o=[e];function c(r,t,i,y,d,E){return n(),a("div",null,o)}const h=s(p,[["render",c]]);export{u as __pageData,h as default};
|
||||
55
assets/article_【字节跳动】前端面试题总结.md.42768ab4.js
Normal file
55
assets/article_【字节跳动】前端面试题总结.md.42768ab4.js
Normal file
@@ -0,0 +1,55 @@
|
||||
import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.4001cd3b.js";const u=JSON.parse('{"title":"【字节跳动】前端面试题总结","description":"","frontmatter":{},"headers":[],"relativePath":"article/【字节跳动】前端面试题总结.md","filePath":"article/【字节跳动】前端面试题总结.md","lastUpdated":1697384672000}'),p={name:"article/【字节跳动】前端面试题总结.md"},o=l(`<h1 id="【字节跳动】前端面试题总结" tabindex="-1">【字节跳动】前端面试题总结 <a class="header-anchor" href="#【字节跳动】前端面试题总结" aria-label="Permalink to "【字节跳动】前端面试题总结""></a></h1><h2 id="看代码说结果" tabindex="-1">看代码说结果 <a class="header-anchor" href="#看代码说结果" aria-label="Permalink to "看代码说结果""></a></h2><h3 id="代码输出结果1" tabindex="-1">代码输出结果1 <a class="header-anchor" href="#代码输出结果1" aria-label="Permalink to "代码输出结果1""></a></h3><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">([</span><span style="color:#9ECBFF;">'1'</span><span style="color:#E1E4E8;">, </span><span style="color:#9ECBFF;">'2'</span><span style="color:#E1E4E8;">, </span><span style="color:#9ECBFF;">'3'</span><span style="color:#E1E4E8;">].</span><span style="color:#B392F0;">map</span><span style="color:#E1E4E8;">(parseInt))</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">([</span><span style="color:#032F62;">'1'</span><span style="color:#24292E;">, </span><span style="color:#032F62;">'2'</span><span style="color:#24292E;">, </span><span style="color:#032F62;">'3'</span><span style="color:#24292E;">].</span><span style="color:#6F42C1;">map</span><span style="color:#24292E;">(parseInt))</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">[1, NaN, NaN]</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">[1, NaN, NaN]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="代码输出结果2" tabindex="-1">代码输出结果2 <a class="header-anchor" href="#代码输出结果2" aria-label="Permalink to "代码输出结果2""></a></h3><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">let</span><span style="color:#E1E4E8;"> [a </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">1</span><span style="color:#E1E4E8;">, b] </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> []</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(a, b)</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">let</span><span style="color:#24292E;"> [a </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">1</span><span style="color:#24292E;">, b] </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> []</span></span>
|
||||
<span class="line"><span style="color:#24292E;">console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(a, b)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">1 undefined</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">1 undefined</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="代码输出结果3" tabindex="-1">代码输出结果3 <a class="header-anchor" href="#代码输出结果3" aria-label="Permalink to "代码输出结果3""></a></h3><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#79B8FF;">Promise</span><span style="color:#E1E4E8;">.</span><span style="color:#B392F0;">resolve</span><span style="color:#E1E4E8;">()</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> .</span><span style="color:#B392F0;">then</span><span style="color:#E1E4E8;">(() </span><span style="color:#F97583;">=></span><span style="color:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">Promise</span><span style="color:#E1E4E8;">.</span><span style="color:#B392F0;">resolve</span><span style="color:#E1E4E8;">()</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> .</span><span style="color:#B392F0;">then</span><span style="color:#E1E4E8;">(() </span><span style="color:#F97583;">=></span><span style="color:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">1</span><span style="color:#E1E4E8;">)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> })</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> .</span><span style="color:#B392F0;">then</span><span style="color:#E1E4E8;">(() </span><span style="color:#F97583;">=></span><span style="color:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">2</span><span style="color:#E1E4E8;">)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> })</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> })</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> .</span><span style="color:#B392F0;">then</span><span style="color:#E1E4E8;">(() </span><span style="color:#F97583;">=></span><span style="color:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">3</span><span style="color:#E1E4E8;">)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> })</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#005CC5;">Promise</span><span style="color:#24292E;">.</span><span style="color:#6F42C1;">resolve</span><span style="color:#24292E;">()</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> .</span><span style="color:#6F42C1;">then</span><span style="color:#24292E;">(() </span><span style="color:#D73A49;">=></span><span style="color:#24292E;"> {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">Promise</span><span style="color:#24292E;">.</span><span style="color:#6F42C1;">resolve</span><span style="color:#24292E;">()</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> .</span><span style="color:#6F42C1;">then</span><span style="color:#24292E;">(() </span><span style="color:#D73A49;">=></span><span style="color:#24292E;"> {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">1</span><span style="color:#24292E;">)</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> })</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> .</span><span style="color:#6F42C1;">then</span><span style="color:#24292E;">(() </span><span style="color:#D73A49;">=></span><span style="color:#24292E;"> {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">2</span><span style="color:#24292E;">)</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> })</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> })</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> .</span><span style="color:#6F42C1;">then</span><span style="color:#24292E;">(() </span><span style="color:#D73A49;">=></span><span style="color:#24292E;"> {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">3</span><span style="color:#24292E;">)</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> })</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">1 3 2</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">1 3 2</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="代码输出结果4" tabindex="-1">代码输出结果4 <a class="header-anchor" href="#代码输出结果4" aria-label="Permalink to "代码输出结果4""></a></h3><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">obj</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> { </span><span style="color:#79B8FF;">3</span><span style="color:#E1E4E8;">: </span><span style="color:#9ECBFF;">'3'</span><span style="color:#E1E4E8;">, </span><span style="color:#79B8FF;">2</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">2</span><span style="color:#E1E4E8;">, </span><span style="color:#79B8FF;">1</span><span style="color:#E1E4E8;">: </span><span style="color:#9ECBFF;">'1'</span><span style="color:#E1E4E8;">, name: </span><span style="color:#9ECBFF;">'name'</span><span style="color:#E1E4E8;">, age: </span><span style="color:#9ECBFF;">'age'</span><span style="color:#E1E4E8;"> }</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(Object.</span><span style="color:#B392F0;">keys</span><span style="color:#E1E4E8;">(obj))</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">obj</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> { </span><span style="color:#005CC5;">3</span><span style="color:#24292E;">: </span><span style="color:#032F62;">'3'</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">2</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">2</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">1</span><span style="color:#24292E;">: </span><span style="color:#032F62;">'1'</span><span style="color:#24292E;">, name: </span><span style="color:#032F62;">'name'</span><span style="color:#24292E;">, age: </span><span style="color:#032F62;">'age'</span><span style="color:#24292E;"> }</span></span>
|
||||
<span class="line"><span style="color:#24292E;">console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(Object.</span><span style="color:#6F42C1;">keys</span><span style="color:#24292E;">(obj))</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">['1', '2', '3', 'name', 'age']</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">['1', '2', '3', 'name', 'age']</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="代码输出结果5" tabindex="-1">代码输出结果5 <a class="header-anchor" href="#代码输出结果5" aria-label="Permalink to "代码输出结果5""></a></h3><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">let</span><span style="color:#E1E4E8;"> myArray </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> {}</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">myArray[</span><span style="color:#9ECBFF;">'0'</span><span style="color:#E1E4E8;">] </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'a'</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">myArray[</span><span style="color:#9ECBFF;">'1'</span><span style="color:#E1E4E8;">] </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'b'</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">myArray.</span><span style="color:#79B8FF;">length</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">2</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#F97583;">...</span><span style="color:#E1E4E8;">myArray)</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">let</span><span style="color:#24292E;"> myArray </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> {}</span></span>
|
||||
<span class="line"><span style="color:#24292E;">myArray[</span><span style="color:#032F62;">'0'</span><span style="color:#24292E;">] </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'a'</span></span>
|
||||
<span class="line"><span style="color:#24292E;">myArray[</span><span style="color:#032F62;">'1'</span><span style="color:#24292E;">] </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'b'</span></span>
|
||||
<span class="line"><span style="color:#24292E;">myArray.</span><span style="color:#005CC5;">length</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">2</span></span>
|
||||
<span class="line"><span style="color:#24292E;">console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#D73A49;">...</span><span style="color:#24292E;">myArray)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;"></span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;"></span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="代码输出结果6" tabindex="-1">代码输出结果6 <a class="header-anchor" href="#代码输出结果6" aria-label="Permalink to "代码输出结果6""></a></h3><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">([</span><span style="color:#79B8FF;">1</span><span style="color:#E1E4E8;">, </span><span style="color:#79B8FF;">2</span><span style="color:#E1E4E8;">, </span><span style="color:#79B8FF;">3</span><span style="color:#E1E4E8;">, </span><span style="color:#79B8FF;">4</span><span style="color:#E1E4E8;">, </span><span style="color:#79B8FF;">5</span><span style="color:#E1E4E8;">].</span><span style="color:#B392F0;">splice</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">1</span><span style="color:#E1E4E8;">, </span><span style="color:#79B8FF;">2</span><span style="color:#E1E4E8;">, </span><span style="color:#79B8FF;">3</span><span style="color:#E1E4E8;">, </span><span style="color:#79B8FF;">4</span><span style="color:#E1E4E8;">, </span><span style="color:#79B8FF;">5</span><span style="color:#E1E4E8;">))</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">([</span><span style="color:#79B8FF;">1</span><span style="color:#E1E4E8;">, </span><span style="color:#79B8FF;">2</span><span style="color:#E1E4E8;">, </span><span style="color:#79B8FF;">3</span><span style="color:#E1E4E8;">, </span><span style="color:#79B8FF;">4</span><span style="color:#E1E4E8;">, </span><span style="color:#79B8FF;">5</span><span style="color:#E1E4E8;">].</span><span style="color:#B392F0;">slice</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">1</span><span style="color:#E1E4E8;">, </span><span style="color:#79B8FF;">2</span><span style="color:#E1E4E8;">, </span><span style="color:#79B8FF;">3</span><span style="color:#E1E4E8;">, </span><span style="color:#79B8FF;">4</span><span style="color:#E1E4E8;">, </span><span style="color:#79B8FF;">5</span><span style="color:#E1E4E8;">))</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">([</span><span style="color:#005CC5;">1</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">2</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">3</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">4</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">5</span><span style="color:#24292E;">].</span><span style="color:#6F42C1;">splice</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">1</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">2</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">3</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">4</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">5</span><span style="color:#24292E;">))</span></span>
|
||||
<span class="line"><span style="color:#24292E;">console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">([</span><span style="color:#005CC5;">1</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">2</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">3</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">4</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">5</span><span style="color:#24292E;">].</span><span style="color:#6F42C1;">slice</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">1</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">2</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">3</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">4</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">5</span><span style="color:#24292E;">))</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">[2, 3]</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">[2]</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">[2, 3]</span></span>
|
||||
<span class="line"><span style="color:#24292e;">[2]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="代码输出结果7" tabindex="-1">代码输出结果7 <a class="header-anchor" href="#代码输出结果7" aria-label="Permalink to "代码输出结果7""></a></h3><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">([].</span><span style="color:#79B8FF;">constructor</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">===</span><span style="color:#E1E4E8;"> Array)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#F97583;">typeof</span><span style="color:#E1E4E8;"> [] </span><span style="color:#F97583;">===</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'array'</span><span style="color:#E1E4E8;">)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#F97583;">typeof</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">null</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">===</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'object'</span><span style="color:#E1E4E8;">)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">''</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">instanceof</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">Object</span><span style="color:#E1E4E8;">)</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">([].</span><span style="color:#005CC5;">constructor</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">===</span><span style="color:#24292E;"> Array)</span></span>
|
||||
<span class="line"><span style="color:#24292E;">console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#D73A49;">typeof</span><span style="color:#24292E;"> [] </span><span style="color:#D73A49;">===</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'array'</span><span style="color:#24292E;">)</span></span>
|
||||
<span class="line"><span style="color:#24292E;">console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#D73A49;">typeof</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">null</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">===</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'object'</span><span style="color:#24292E;">)</span></span>
|
||||
<span class="line"><span style="color:#24292E;">console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#032F62;">''</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">instanceof</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">Object</span><span style="color:#24292E;">)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">true</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">false</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">true</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">false</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">true</span></span>
|
||||
<span class="line"><span style="color:#24292e;">false</span></span>
|
||||
<span class="line"><span style="color:#24292e;">true</span></span>
|
||||
<span class="line"><span style="color:#24292e;">false</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h2 id="问答题" tabindex="-1">问答题 <a class="header-anchor" href="#问答题" aria-label="Permalink to "问答题""></a></h2><h3 id="http缓存的请求头与响应头有哪些" tabindex="-1">HTTP缓存的请求头与响应头有哪些 <a class="header-anchor" href="#http缓存的请求头与响应头有哪些" aria-label="Permalink to "HTTP缓存的请求头与响应头有哪些""></a></h3><ul><li>强制缓存 <ul><li>响应头: Expires 与 Cache-Control</li><li>Expires 绝对时间</li><li>Cache-Control 相对时间</li></ul></li><li>协商缓存 <ul><li>响应头: Etag 请求头: If-Non-Match</li><li>响应头: Last-Modified 请求头: If-Modified-Since</li></ul></li></ul><h3 id="宏任务与微任务有哪些区别-简述他们的应用场景" tabindex="-1">宏任务与微任务有哪些区别？简述他们的应用场景 <a class="header-anchor" href="#宏任务与微任务有哪些区别-简述他们的应用场景" aria-label="Permalink to "宏任务与微任务有哪些区别？简述他们的应用场景""></a></h3><p>宏任务与微任务优先级不同</p><ul><li>先执行同步代码，后执行异步代码</li><li>主线程代码执行完毕后，检查微任务队列是否为空，非空则优先执行微任务</li><li>每次执行宏任务之前，都会检查微任务队列是否为空，非空则优先执行微任务</li></ul><p>常见的宏任务与微任务</p><ul><li>宏任务 <code>script</code> <code>setTimeout</code> <code>setInterval</code> <code>postMessage</code> <code>MessageChannel</code> <code>setImmediate (NodeJS)</code></li><li>微任务 <code>Promise.then</code> <code>Object.observe</code> <code>MutationObserver</code> <code>process.nextTick (NodeJS)</code></li></ul><h2 id="算法" tabindex="-1">算法 <a class="header-anchor" href="#算法" aria-label="Permalink to "算法""></a></h2><p>中文数字转为阿拉伯数字</p><p>给定一个字符串，返回该字符串的所有组合</p><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">输入 abc </span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">输出 [</span><span style="color:#9ECBFF;">'abc'</span><span style="color:#E1E4E8;">, </span><span style="color:#9ECBFF;">'acb'</span><span style="color:#E1E4E8;">, </span><span style="color:#9ECBFF;">'bac'</span><span style="color:#E1E4E8;">, </span><span style="color:#9ECBFF;">'bca'</span><span style="color:#E1E4E8;">, </span><span style="color:#9ECBFF;">'cab'</span><span style="color:#E1E4E8;">, </span><span style="color:#9ECBFF;">'cba'</span><span style="color:#E1E4E8;">]</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">输入 abc </span></span>
|
||||
<span class="line"><span style="color:#24292E;">输出 [</span><span style="color:#032F62;">'abc'</span><span style="color:#24292E;">, </span><span style="color:#032F62;">'acb'</span><span style="color:#24292E;">, </span><span style="color:#032F62;">'bac'</span><span style="color:#24292E;">, </span><span style="color:#032F62;">'bca'</span><span style="color:#24292E;">, </span><span style="color:#032F62;">'cab'</span><span style="color:#24292E;">, </span><span style="color:#032F62;">'cba'</span><span style="color:#24292E;">]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>回溯算法</p>`,36),e=[o];function c(r,t,y,E,i,d){return a(),n("div",null,e)}const h=s(p,[["render",c]]);export{u as __pageData,h as default};
|
||||
1
assets/article_【字节跳动】前端面试题总结.md.42768ab4.lean.js
Normal file
1
assets/article_【字节跳动】前端面试题总结.md.42768ab4.lean.js
Normal file
@@ -0,0 +1 @@
|
||||
import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.4001cd3b.js";const u=JSON.parse('{"title":"【字节跳动】前端面试题总结","description":"","frontmatter":{},"headers":[],"relativePath":"article/【字节跳动】前端面试题总结.md","filePath":"article/【字节跳动】前端面试题总结.md","lastUpdated":1697384672000}'),p={name:"article/【字节跳动】前端面试题总结.md"},o=l("",36),e=[o];function c(r,t,y,E,i,d){return a(),n("div",null,e)}const h=s(p,[["render",c]]);export{u as __pageData,h as default};
|
||||
@@ -1,28 +0,0 @@
|
||||
import{_ as s,o as a,c as n,S as l}from"./chunks/framework.04e6e156.js";const A=JSON.parse('{"title":"【字节跳动】前端面试题总结","description":"","frontmatter":{},"headers":[],"relativePath":"article/【字节跳动】前端面试题总结.md","filePath":"article/【字节跳动】前端面试题总结.md","lastUpdated":1697042822000}'),p={name:"article/【字节跳动】前端面试题总结.md"},o=l(`<h1 id="【字节跳动】前端面试题总结" tabindex="-1">【字节跳动】前端面试题总结 <a class="header-anchor" href="#【字节跳动】前端面试题总结" aria-label="Permalink to "【字节跳动】前端面试题总结""></a></h1><h2 id="看代码说结果" tabindex="-1">看代码说结果 <a class="header-anchor" href="#看代码说结果" aria-label="Permalink to "看代码说结果""></a></h2><h3 id="代码输出结果1" tabindex="-1">代码输出结果1 <a class="header-anchor" href="#代码输出结果1" aria-label="Permalink to "代码输出结果1""></a></h3><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">([</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">1</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">2</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">3</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">map</span><span style="color:#A6ACCD;">(parseInt))</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">[1, NaN, NaN]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="代码输出结果2" tabindex="-1">代码输出结果2 <a class="header-anchor" href="#代码输出结果2" aria-label="Permalink to "代码输出结果2""></a></h3><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">[</span><span style="color:#A6ACCD;">a </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> b</span><span style="color:#89DDFF;">]</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> []</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(a</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> b)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">1 undefined</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="代码输出结果3" tabindex="-1">代码输出结果3 <a class="header-anchor" href="#代码输出结果3" aria-label="Permalink to "代码输出结果3""></a></h3><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">Promise</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">resolve</span><span style="color:#A6ACCD;">()</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">then</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">Promise</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">resolve</span><span style="color:#F07178;">()</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">then</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">1</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">then</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">2</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">then</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">3</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">1 3 2</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="代码输出结果4" tabindex="-1">代码输出结果4 <a class="header-anchor" href="#代码输出结果4" aria-label="Permalink to "代码输出结果4""></a></h3><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> obj </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">3</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">3</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">1</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">name</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">age</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">age</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(Object</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">keys</span><span style="color:#A6ACCD;">(obj))</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">['1', '2', '3', 'name', 'age']</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="代码输出结果5" tabindex="-1">代码输出结果5 <a class="header-anchor" href="#代码输出结果5" aria-label="Permalink to "代码输出结果5""></a></h3><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> myArray </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{}</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">myArray[</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">0</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">] </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">a</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">myArray[</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">1</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">] </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">b</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">myArray</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">length </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">...</span><span style="color:#A6ACCD;">myArray)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;"></span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="代码输出结果6" tabindex="-1">代码输出结果6 <a class="header-anchor" href="#代码输出结果6" aria-label="Permalink to "代码输出结果6""></a></h3><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">([</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">3</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">4</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">5</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">splice</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">3</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">4</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">5</span><span style="color:#A6ACCD;">))</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">([</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">3</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">4</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">5</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">slice</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">3</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">4</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">5</span><span style="color:#A6ACCD;">))</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">[2, 3]</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">[2]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="代码输出结果7" tabindex="-1">代码输出结果7 <a class="header-anchor" href="#代码输出结果7" aria-label="Permalink to "代码输出结果7""></a></h3><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">([]</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">constructor </span><span style="color:#89DDFF;">===</span><span style="color:#A6ACCD;"> Array)</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">typeof</span><span style="color:#A6ACCD;"> [] </span><span style="color:#89DDFF;">===</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">array</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">)</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">typeof</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">null</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">===</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">object</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">)</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">''</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">instanceof</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Object</span><span style="color:#A6ACCD;">)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">true</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">false</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">true</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">false</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h2 id="问答题" tabindex="-1">问答题 <a class="header-anchor" href="#问答题" aria-label="Permalink to "问答题""></a></h2><h3 id="http缓存的请求头与响应头有哪些" tabindex="-1">HTTP缓存的请求头与响应头有哪些 <a class="header-anchor" href="#http缓存的请求头与响应头有哪些" aria-label="Permalink to "HTTP缓存的请求头与响应头有哪些""></a></h3><ul><li>强制缓存 <ul><li>响应头: Expires 与 Cache-Control</li><li>Expires 绝对时间</li><li>Cache-Control 相对时间</li></ul></li><li>协商缓存 <ul><li>响应头: Etag 请求头: If-Non-Match</li><li>响应头: Last-Modified 请求头: If-Modified-Since</li></ul></li></ul><h3 id="宏任务与微任务有哪些区别-简述他们的应用场景" tabindex="-1">宏任务与微任务有哪些区别？简述他们的应用场景 <a class="header-anchor" href="#宏任务与微任务有哪些区别-简述他们的应用场景" aria-label="Permalink to "宏任务与微任务有哪些区别？简述他们的应用场景""></a></h3><p>宏任务与微任务优先级不同</p><ul><li>先执行同步代码，后执行异步代码</li><li>主线程代码执行完毕后，检查微任务队列是否为空，非空则优先执行微任务</li><li>每次执行宏任务之前，都会检查微任务队列是否为空，非空则优先执行微任务</li></ul><p>常见的宏任务与微任务</p><ul><li>宏任务 <code>script</code> <code>setTimeout</code> <code>setInterval</code> <code>postMessage</code> <code>MessageChannel</code> <code>setImmediate (NodeJS)</code></li><li>微任务 <code>Promise.then</code> <code>Object.observe</code> <code>MutationObserver</code> <code>process.nextTick (NodeJS)</code></li></ul><h2 id="算法" tabindex="-1">算法 <a class="header-anchor" href="#算法" aria-label="Permalink to "算法""></a></h2><p>中文数字转为阿拉伯数字</p><p>给定一个字符串，返回该字符串的所有组合</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">输入 abc </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">输出 [</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">abc</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">acb</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">bac</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">bca</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">cab</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">cba</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>回溯算法</p>`,36),e=[o];function r(c,t,y,D,i,C){return a(),n("div",null,e)}const d=s(p,[["render",r]]);export{A as __pageData,d as default};
|
||||
@@ -1 +0,0 @@
|
||||
import{_ as s,o as a,c as n,S as l}from"./chunks/framework.04e6e156.js";const A=JSON.parse('{"title":"【字节跳动】前端面试题总结","description":"","frontmatter":{},"headers":[],"relativePath":"article/【字节跳动】前端面试题总结.md","filePath":"article/【字节跳动】前端面试题总结.md","lastUpdated":1697042822000}'),p={name:"article/【字节跳动】前端面试题总结.md"},o=l("",36),e=[o];function r(c,t,y,D,i,C){return a(),n("div",null,e)}const d=s(p,[["render",r]]);export{A as __pageData,d as default};
|
||||
File diff suppressed because one or more lines are too long
@@ -1 +0,0 @@
|
||||
import{_ as s,o as n,c as a,S as l}from"./chunks/framework.04e6e156.js";const A=JSON.parse('{"title":"【快手】深入理解前端面试题","description":"","frontmatter":{},"headers":[],"relativePath":"article/【快手】深入理解前端面试题.md","filePath":"article/【快手】深入理解前端面试题.md","lastUpdated":1697042822000}'),p={name:"article/【快手】深入理解前端面试题.md"},o=l("",87),e=[o];function r(t,c,y,F,i,D){return n(),a("div",null,e)}const d=s(p,[["render",r]]);export{A as __pageData,d as default};
|
||||
339
assets/article_【快手】深入理解前端面试题.md.cd45f043.js
Normal file
339
assets/article_【快手】深入理解前端面试题.md.cd45f043.js
Normal file
File diff suppressed because one or more lines are too long
1
assets/article_【快手】深入理解前端面试题.md.cd45f043.lean.js
Normal file
1
assets/article_【快手】深入理解前端面试题.md.cd45f043.lean.js
Normal file
@@ -0,0 +1 @@
|
||||
import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.4001cd3b.js";const b=JSON.parse('{"title":"【快手】深入理解前端面试题","description":"","frontmatter":{},"headers":[],"relativePath":"article/【快手】深入理解前端面试题.md","filePath":"article/【快手】深入理解前端面试题.md","lastUpdated":1697384672000}'),p={name:"article/【快手】深入理解前端面试题.md"},o=l("",87),e=[o];function c(r,t,E,y,i,d){return n(),a("div",null,e)}const F=s(p,[["render",c]]);export{b as __pageData,F as default};
|
||||
103
assets/article_【用友金融】前端面试题总结.md.7d18297e.js
Normal file
103
assets/article_【用友金融】前端面试题总结.md.7d18297e.js
Normal file
@@ -0,0 +1,103 @@
|
||||
import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.4001cd3b.js";const u=JSON.parse('{"title":"【用友金融】前端面试题总结","description":"","frontmatter":{},"headers":[],"relativePath":"article/【用友金融】前端面试题总结.md","filePath":"article/【用友金融】前端面试题总结.md","lastUpdated":1697384672000}'),p={name:"article/【用友金融】前端面试题总结.md"},e=l(`<h1 id="【用友金融】前端面试题总结" tabindex="-1">【用友金融】前端面试题总结 <a class="header-anchor" href="#【用友金融】前端面试题总结" aria-label="Permalink to "【用友金融】前端面试题总结""></a></h1><h2 id="回流与重绘" tabindex="-1">回流与重绘 <a class="header-anchor" href="#回流与重绘" aria-label="Permalink to "回流与重绘""></a></h2><p>下列关于回流和重绘的说法错误的是</p><ul><li><p>回流的性能开销大于重绘的性能开销</p></li><li><p>当页面结构、尺寸等改变时会发生回流</p></li><li><p>回流一定会引起重绘，重绘也一定会引起回流(x)</p></li><li><p>当页面结构不改变只是样式发生改变时会发生重绘，例如背景颜色改变时会发生重绘</p></li><li><p><code>display: none</code> 指的是元素完全不陈列出来，不占据空间，涉及到了DOM结构，故产生reflow与repaint</p></li><li><p><code>visibility: hidden</code> 指的是元素不可见但存在，保留空间，不影响结构，故只产生repaint，但不可触发绑定事件</p></li><li><p><code>opacity: 0</code> 指的是元素不可见但存在，保留空间，不影响结构，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的</p></li></ul><h2 id="css属性" tabindex="-1">CSS属性 <a class="header-anchor" href="#css属性" aria-label="Permalink to "CSS属性""></a></h2><p>下列选项中哪个描述对于visibility: hidden;与display: none;是正确的</p><ul><li>visibility属性不可继承</li><li>visibility: hidden; 不占据页面空间</li><li>display: none; 不占据页面空间(√)</li><li>都无法通过DOM交互</li></ul><h2 id="函数执行结果" tabindex="-1">函数执行结果 <a class="header-anchor" href="#函数执行结果" aria-label="Permalink to "函数执行结果""></a></h2><h3 id="题目1" tabindex="-1">题目1 <a class="header-anchor" href="#题目1" aria-label="Permalink to "题目1""></a></h3><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">(</span><span style="color:#F97583;">function</span><span style="color:#E1E4E8;"> () {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">var</span><span style="color:#E1E4E8;"> a </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> (b </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">5</span><span style="color:#E1E4E8;">);</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">})();</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(b);</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(a);</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">(</span><span style="color:#D73A49;">function</span><span style="color:#24292E;"> () {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">var</span><span style="color:#24292E;"> a </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> (b </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">5</span><span style="color:#24292E;">);</span></span>
|
||||
<span class="line"><span style="color:#24292E;">})();</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#24292E;">console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(b);</span></span>
|
||||
<span class="line"><span style="color:#24292E;">console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(a);</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>结果为：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">5</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">Error</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">5</span></span>
|
||||
<span class="line"><span style="color:#24292e;">Error</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="题目2" tabindex="-1">题目2 <a class="header-anchor" href="#题目2" aria-label="Permalink to "题目2""></a></h3><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">1</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">+</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'2'</span><span style="color:#E1E4E8;">)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">1</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">-</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'2'</span><span style="color:#E1E4E8;">)</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">1</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">+</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'2'</span><span style="color:#24292E;">)</span></span>
|
||||
<span class="line"><span style="color:#24292E;">console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">1</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">-</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'2'</span><span style="color:#24292E;">)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>结果为：</p><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#79B8FF;">12</span></span>
|
||||
<span class="line"><span style="color:#F97583;">-</span><span style="color:#79B8FF;">1</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#005CC5;">12</span></span>
|
||||
<span class="line"><span style="color:#D73A49;">-</span><span style="color:#005CC5;">1</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="题目3" tabindex="-1">题目3 <a class="header-anchor" href="#题目3" aria-label="Permalink to "题目3""></a></h3><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">var</span><span style="color:#E1E4E8;"> a </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">1</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#B392F0;">setTimeout</span><span style="color:#E1E4E8;">(</span><span style="color:#F97583;">function</span><span style="color:#E1E4E8;"> () {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> a </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">2</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(a)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">}, </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;">)</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F97583;">var</span><span style="color:#E1E4E8;"> a</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(a)</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">a </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">3</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(a)</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">var</span><span style="color:#24292E;"> a </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">1</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#6F42C1;">setTimeout</span><span style="color:#24292E;">(</span><span style="color:#D73A49;">function</span><span style="color:#24292E;"> () {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> a </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">2</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(a)</span></span>
|
||||
<span class="line"><span style="color:#24292E;">}, </span><span style="color:#005CC5;">0</span><span style="color:#24292E;">)</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#D73A49;">var</span><span style="color:#24292E;"> a</span></span>
|
||||
<span class="line"><span style="color:#24292E;">console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(a)</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#24292E;">a </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">3</span></span>
|
||||
<span class="line"><span style="color:#24292E;">console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(a)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><p>结果为：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">1</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">3</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">2</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">1</span></span>
|
||||
<span class="line"><span style="color:#24292e;">3</span></span>
|
||||
<span class="line"><span style="color:#24292e;">2</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="题目4" tabindex="-1">题目4 <a class="header-anchor" href="#题目4" aria-label="Permalink to "题目4""></a></h3><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">function</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">f</span><span style="color:#E1E4E8;">() {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;"> f</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#F97583;">new</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">f</span><span style="color:#E1E4E8;">() </span><span style="color:#F97583;">instanceof</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">f</span><span style="color:#E1E4E8;">)</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">function</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">f</span><span style="color:#24292E;">() {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> f</span></span>
|
||||
<span class="line"><span style="color:#24292E;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#24292E;">console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#D73A49;">new</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">f</span><span style="color:#24292E;">() </span><span style="color:#D73A49;">instanceof</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">f</span><span style="color:#24292E;">)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>结果为：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">false</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">false</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="题目5" tabindex="-1">题目5 <a class="header-anchor" href="#题目5" aria-label="Permalink to "题目5""></a></h3><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">var</span><span style="color:#E1E4E8;"> foo </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">bar</span><span style="color:#E1E4E8;">: </span><span style="color:#F97583;">function</span><span style="color:#E1E4E8;"> () {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">this</span><span style="color:#E1E4E8;">.baz</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> },</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> baz: </span><span style="color:#79B8FF;">1</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#F97583;">typeof</span><span style="color:#E1E4E8;"> (f </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> foo.bar)())</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">var</span><span style="color:#24292E;"> foo </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">bar</span><span style="color:#24292E;">: </span><span style="color:#D73A49;">function</span><span style="color:#24292E;"> () {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">this</span><span style="color:#24292E;">.baz</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> },</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> baz: </span><span style="color:#005CC5;">1</span></span>
|
||||
<span class="line"><span style="color:#24292E;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#24292E;">console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#D73A49;">typeof</span><span style="color:#24292E;"> (f </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> foo.bar)())</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>结果为：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">undefined</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">undefined</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="题目6" tabindex="-1">题目6 <a class="header-anchor" href="#题目6" aria-label="Permalink to "题目6""></a></h3><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">var</span><span style="color:#E1E4E8;"> a </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> (b </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">1</span><span style="color:#E1E4E8;">, c </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">2</span><span style="color:#E1E4E8;">)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(a, b, c)</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">var</span><span style="color:#24292E;"> a </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> (b </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">1</span><span style="color:#24292E;">, c </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">2</span><span style="color:#24292E;">)</span></span>
|
||||
<span class="line"><span style="color:#24292E;">console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(a, b, c)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>结果为：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">2 1 2</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">2 1 2</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="题目7" tabindex="-1">题目7 <a class="header-anchor" href="#题目7" aria-label="Permalink to "题目7""></a></h3><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">var</span><span style="color:#E1E4E8;"> company </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> address: </span><span style="color:#9ECBFF;">'beijing'</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F97583;">var</span><span style="color:#E1E4E8;"> jjworld </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> Object.</span><span style="color:#B392F0;">create</span><span style="color:#E1E4E8;">(company)</span></span>
|
||||
<span class="line"><span style="color:#F97583;">delete</span><span style="color:#E1E4E8;"> jjworld.address</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(jjworld.address)</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">var</span><span style="color:#24292E;"> company </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> address: </span><span style="color:#032F62;">'beijing'</span></span>
|
||||
<span class="line"><span style="color:#24292E;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#D73A49;">var</span><span style="color:#24292E;"> jjworld </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> Object.</span><span style="color:#6F42C1;">create</span><span style="color:#24292E;">(company)</span></span>
|
||||
<span class="line"><span style="color:#D73A49;">delete</span><span style="color:#24292E;"> jjworld.address</span></span>
|
||||
<span class="line"><span style="color:#24292E;">console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(jjworld.address)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>结果为：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">beijing</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">beijing</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="题目8" tabindex="-1">题目8 <a class="header-anchor" href="#题目8" aria-label="Permalink to "题目8""></a></h3><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">function</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">side</span><span style="color:#E1E4E8;">(</span><span style="color:#FFAB70;">arr</span><span style="color:#E1E4E8;">) {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> arr[</span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;">] </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> arr[</span><span style="color:#79B8FF;">2</span><span style="color:#E1E4E8;">]</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F97583;">function</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">a</span><span style="color:#E1E4E8;">(</span><span style="color:#FFAB70;">a</span><span style="color:#E1E4E8;">, </span><span style="color:#FFAB70;">b</span><span style="color:#E1E4E8;">, </span><span style="color:#FFAB70;">c</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">3</span><span style="color:#E1E4E8;">) {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> c </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">10</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">side</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">arguments</span><span style="color:#E1E4E8;">)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;"> a </span><span style="color:#F97583;">+</span><span style="color:#E1E4E8;"> b </span><span style="color:#F97583;">+</span><span style="color:#E1E4E8;"> c</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#B392F0;">a</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">1</span><span style="color:#E1E4E8;">, </span><span style="color:#79B8FF;">1</span><span style="color:#E1E4E8;">, </span><span style="color:#79B8FF;">1</span><span style="color:#E1E4E8;">))</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">function</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">side</span><span style="color:#24292E;">(</span><span style="color:#E36209;">arr</span><span style="color:#24292E;">) {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> arr[</span><span style="color:#005CC5;">0</span><span style="color:#24292E;">] </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> arr[</span><span style="color:#005CC5;">2</span><span style="color:#24292E;">]</span></span>
|
||||
<span class="line"><span style="color:#24292E;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#D73A49;">function</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">a</span><span style="color:#24292E;">(</span><span style="color:#E36209;">a</span><span style="color:#24292E;">, </span><span style="color:#E36209;">b</span><span style="color:#24292E;">, </span><span style="color:#E36209;">c</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">3</span><span style="color:#24292E;">) {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> c </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">10</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">side</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">arguments</span><span style="color:#24292E;">)</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> a </span><span style="color:#D73A49;">+</span><span style="color:#24292E;"> b </span><span style="color:#D73A49;">+</span><span style="color:#24292E;"> c</span></span>
|
||||
<span class="line"><span style="color:#24292E;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#24292E;">console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#6F42C1;">a</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">1</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">1</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">1</span><span style="color:#24292E;">))</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p>结果为：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">12</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">12</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h2 id="css权重的优先级" tabindex="-1">CSS权重的优先级 <a class="header-anchor" href="#css权重的优先级" aria-label="Permalink to "CSS权重的优先级""></a></h2><p>内联样式 > ID选择器 > 类选择器 > 标签选择器 > 通配符</p><h2 id="http状态码" tabindex="-1">HTTP状态码 <a class="header-anchor" href="#http状态码" aria-label="Permalink to "HTTP状态码""></a></h2><p>越多越好</p><ul><li>400 临时重定向</li><li>500 服务器内部错误</li><li>404 服务器无法找到对应资源</li><li>200 请求正常处理</li></ul><h2 id="bfc-块级格式上下文" tabindex="-1">BFC(块级格式上下文) <a class="header-anchor" href="#bfc-块级格式上下文" aria-label="Permalink to "BFC(块级格式上下文)""></a></h2><p>下列选项对产生BFC描述错误的是：</p><ul><li>overflow为visible(x)</li><li>position为absolute</li><li>display为table-cell</li><li>float属性不为none</li></ul><h2 id="元素浮动" tabindex="-1">元素浮动 <a class="header-anchor" href="#元素浮动" aria-label="Permalink to "元素浮动""></a></h2><p>设置元素浮动后，元素的display值哪个是正确的？</p><ul><li>inline-block</li><li>float</li><li>inline</li><li>block(√)</li></ul><h2 id="http请求方法" tabindex="-1">HTTP请求方法 <a class="header-anchor" href="#http请求方法" aria-label="Permalink to "HTTP请求方法""></a></h2><p>下面哪个选项不是HTTP的请求方法</p><ul><li>HEAD</li><li>PUT</li><li>OPTIONS</li><li>PUSH(x)</li></ul><p>HTTP请求方法有：</p><p><code>GET POST DELETE PUT OPTIONS</code><code>CONNECT HEAD PATCH TRACE</code></p><h2 id="跨域问题" tabindex="-1">跨域问题 <a class="header-anchor" href="#跨域问题" aria-label="Permalink to "跨域问题""></a></h2><p>通常有哪些方法解决跨域问题？</p><ul><li>利用JSONP</li><li>反向代理</li><li>服务器配置CORS</li></ul><h2 id="了解webpack的哪些配置项" tabindex="-1">了解Webpack的哪些配置项 <a class="header-anchor" href="#了解webpack的哪些配置项" aria-label="Permalink to "了解Webpack的哪些配置项""></a></h2><ul><li><code>resolve.alias</code> 为路径设置别名</li><li><code>resolve.extensionAlias</code> 后缀省略时 按此顺序指定的后缀名解析文件</li><li><code>module.rules</code> 包含<code>test</code> <code>loader</code> <code>option</code> 正则匹配后缀名 使用指定的loader解析文件</li></ul><h2 id="判断变量类型" tabindex="-1">判断变量类型 <a class="header-anchor" href="#判断变量类型" aria-label="Permalink to "判断变量类型""></a></h2><p>直接使用<code>typeof</code>无法判断引用类型变量的类型</p><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#F97583;">typeof</span><span style="color:#E1E4E8;"> []) </span><span style="color:#6A737D;">// object</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#F97583;">typeof</span><span style="color:#E1E4E8;"> {}) </span><span style="color:#6A737D;">// object</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#F97583;">typeof</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">null</span><span style="color:#E1E4E8;">) </span><span style="color:#6A737D;">// object</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#D73A49;">typeof</span><span style="color:#24292E;"> []) </span><span style="color:#6A737D;">// object</span></span>
|
||||
<span class="line"><span style="color:#24292E;">console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#D73A49;">typeof</span><span style="color:#24292E;"> {}) </span><span style="color:#6A737D;">// object</span></span>
|
||||
<span class="line"><span style="color:#24292E;">console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#D73A49;">typeof</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">null</span><span style="color:#24292E;">) </span><span style="color:#6A737D;">// object</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h2 id="js浮点数相加精度问题" tabindex="-1">JS浮点数相加精度问题 <a class="header-anchor" href="#js浮点数相加精度问题" aria-label="Permalink to "JS浮点数相加精度问题""></a></h2><h2 id="简单讲讲vue-router原理" tabindex="-1">简单讲讲Vue Router原理 <a class="header-anchor" href="#简单讲讲vue-router原理" aria-label="Permalink to "简单讲讲Vue Router原理""></a></h2><h2 id="es6熟悉吗" tabindex="-1">ES6熟悉吗 <a class="header-anchor" href="#es6熟悉吗" aria-label="Permalink to "ES6熟悉吗""></a></h2><p><a href="https://es6.ruanyifeng.com/" target="_blank" rel="noreferrer">ES6教程</a></p><ul><li><code>let</code> <code>const</code></li><li>解构赋值 扩展运算符 可选链</li><li><code>Promise</code> <code>Async</code></li><li><code>Class</code> <code>Set</code> <code>Map</code> <code>Symbol</code> <code>Proxy</code></li></ul><h2 id="css如何实现水平居中与垂直居中" tabindex="-1">CSS如何实现水平居中与垂直居中 <a class="header-anchor" href="#css如何实现水平居中与垂直居中" aria-label="Permalink to "CSS如何实现水平居中与垂直居中""></a></h2><p>参见<a href="./../note/CSS.html">CSS学习笔记</a></p>`,71),o=[e];function c(r,t,i,y,E,d){return a(),n("div",null,o)}const h=s(p,[["render",c]]);export{u as __pageData,h as default};
|
||||
1
assets/article_【用友金融】前端面试题总结.md.7d18297e.lean.js
Normal file
1
assets/article_【用友金融】前端面试题总结.md.7d18297e.lean.js
Normal file
@@ -0,0 +1 @@
|
||||
import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.4001cd3b.js";const u=JSON.parse('{"title":"【用友金融】前端面试题总结","description":"","frontmatter":{},"headers":[],"relativePath":"article/【用友金融】前端面试题总结.md","filePath":"article/【用友金融】前端面试题总结.md","lastUpdated":1697384672000}'),p={name:"article/【用友金融】前端面试题总结.md"},e=l("",71),o=[e];function c(r,t,i,y,E,d){return a(),n("div",null,o)}const h=s(p,[["render",c]]);export{u as __pageData,h as default};
|
||||
@@ -1,52 +0,0 @@
|
||||
import{_ as s,o as a,c as n,S as l}from"./chunks/framework.04e6e156.js";const A=JSON.parse('{"title":"【用友金融】前端面试题总结","description":"","frontmatter":{},"headers":[],"relativePath":"article/【用友金融】前端面试题总结.md","filePath":"article/【用友金融】前端面试题总结.md","lastUpdated":1697042822000}'),e={name:"article/【用友金融】前端面试题总结.md"},p=l(`<h1 id="【用友金融】前端面试题总结" tabindex="-1">【用友金融】前端面试题总结 <a class="header-anchor" href="#【用友金融】前端面试题总结" aria-label="Permalink to "【用友金融】前端面试题总结""></a></h1><h2 id="回流与重绘" tabindex="-1">回流与重绘 <a class="header-anchor" href="#回流与重绘" aria-label="Permalink to "回流与重绘""></a></h2><p>下列关于回流和重绘的说法错误的是</p><ul><li><p>回流的性能开销大于重绘的性能开销</p></li><li><p>当页面结构、尺寸等改变时会发生回流</p></li><li><p>回流一定会引起重绘，重绘也一定会引起回流(x)</p></li><li><p>当页面结构不改变只是样式发生改变时会发生重绘，例如背景颜色改变时会发生重绘</p></li><li><p><code>display: none</code> 指的是元素完全不陈列出来，不占据空间，涉及到了DOM结构，故产生reflow与repaint</p></li><li><p><code>visibility: hidden</code> 指的是元素不可见但存在，保留空间，不影响结构，故只产生repaint，但不可触发绑定事件</p></li><li><p><code>opacity: 0</code> 指的是元素不可见但存在，保留空间，不影响结构，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的</p></li></ul><h2 id="css属性" tabindex="-1">CSS属性 <a class="header-anchor" href="#css属性" aria-label="Permalink to "CSS属性""></a></h2><p>下列选项中哪个描述对于visibility: hidden;与display: none;是正确的</p><ul><li>visibility属性不可继承</li><li>visibility: hidden; 不占据页面空间</li><li>display: none; 不占据页面空间(√)</li><li>都无法通过DOM交互</li></ul><h2 id="函数执行结果" tabindex="-1">函数执行结果 <a class="header-anchor" href="#函数执行结果" aria-label="Permalink to "函数执行结果""></a></h2><h3 id="题目1" tabindex="-1">题目1 <a class="header-anchor" href="#题目1" aria-label="Permalink to "题目1""></a></h3><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">(</span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">var</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">a</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">b</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">5</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(b)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(a)</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>结果为：</p><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">5</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">Error</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="题目2" tabindex="-1">题目2 <a class="header-anchor" href="#题目2" aria-label="Permalink to "题目2""></a></h3><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">1</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">2</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">)</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">1</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">2</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>结果为：</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#F78C6C;">12</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">-</span><span style="color:#F78C6C;">1</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="题目3" tabindex="-1">题目3 <a class="header-anchor" href="#题目3" aria-label="Permalink to "题目3""></a></h3><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> a </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#82AAFF;">setTimeout</span><span style="color:#A6ACCD;">(</span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">a</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">2</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">a</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">},</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#A6ACCD;">)</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> a</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(a)</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">a </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">3</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(a)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><p>结果为：</p><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">1</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">3</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">2</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="题目4" tabindex="-1">题目4 <a class="header-anchor" href="#题目4" aria-label="Permalink to "题目4""></a></h3><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">f</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">f</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">f</span><span style="color:#A6ACCD;">() </span><span style="color:#89DDFF;">instanceof</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">f</span><span style="color:#A6ACCD;">)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>结果为：</p><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">false</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="题目5" tabindex="-1">题目5 <a class="header-anchor" href="#题目5" aria-label="Permalink to "题目5""></a></h3><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> foo </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">bar</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">baz</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">baz</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">typeof</span><span style="color:#A6ACCD;"> (f </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> foo</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">bar)())</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>结果为：</p><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">undefined</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="题目6" tabindex="-1">题目6 <a class="header-anchor" href="#题目6" aria-label="Permalink to "题目6""></a></h3><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> a </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> (b </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> c </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#A6ACCD;">)</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(a</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> b</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> c)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>结果为：</p><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">2 1 2</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="题目7" tabindex="-1">题目7 <a class="header-anchor" href="#题目7" aria-label="Permalink to "题目7""></a></h3><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> company </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">address</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">beijing</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> jjworld </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> Object</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">create</span><span style="color:#A6ACCD;">(company)</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">delete</span><span style="color:#A6ACCD;"> jjworld</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">address</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(jjworld</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">address)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>结果为：</p><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">beijing</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="题目8" tabindex="-1">题目8 <a class="header-anchor" href="#题目8" aria-label="Permalink to "题目8""></a></h3><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">side</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">arr</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">arr</span><span style="color:#F07178;">[</span><span style="color:#F78C6C;">0</span><span style="color:#F07178;">] </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">arr</span><span style="color:#F07178;">[</span><span style="color:#F78C6C;">2</span><span style="color:#F07178;">]</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">a</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">a</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">b</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">c</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">3</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">c</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">10</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">side</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">arguments</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">a</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">b</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">c</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#82AAFF;">a</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#A6ACCD;">))</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p>结果为：</p><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">12</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h2 id="css权重的优先级" tabindex="-1">CSS权重的优先级 <a class="header-anchor" href="#css权重的优先级" aria-label="Permalink to "CSS权重的优先级""></a></h2><p>内联样式 > ID选择器 > 类选择器 > 标签选择器 > 通配符</p><h2 id="http状态码" tabindex="-1">HTTP状态码 <a class="header-anchor" href="#http状态码" aria-label="Permalink to "HTTP状态码""></a></h2><p>越多越好</p><ul><li>400 临时重定向</li><li>500 服务器内部错误</li><li>404 服务器无法找到对应资源</li><li>200 请求正常处理</li></ul><h2 id="bfc-块级格式上下文" tabindex="-1">BFC(块级格式上下文) <a class="header-anchor" href="#bfc-块级格式上下文" aria-label="Permalink to "BFC(块级格式上下文)""></a></h2><p>下列选项对产生BFC描述错误的是：</p><ul><li>overflow为visible(x)</li><li>position为absolute</li><li>display为table-cell</li><li>float属性不为none</li></ul><h2 id="元素浮动" tabindex="-1">元素浮动 <a class="header-anchor" href="#元素浮动" aria-label="Permalink to "元素浮动""></a></h2><p>设置元素浮动后，元素的display值哪个是正确的？</p><ul><li>inline-block</li><li>float</li><li>inline</li><li>block(√)</li></ul><h2 id="http请求方法" tabindex="-1">HTTP请求方法 <a class="header-anchor" href="#http请求方法" aria-label="Permalink to "HTTP请求方法""></a></h2><p>下面哪个选项不是HTTP的请求方法</p><ul><li>HEAD</li><li>PUT</li><li>OPTIONS</li><li>PUSH(x)</li></ul><p>HTTP请求方法有：</p><p><code>GET POST DELETE PUT OPTIONS</code><code>CONNECT HEAD PATCH TRACE</code></p><h2 id="跨域问题" tabindex="-1">跨域问题 <a class="header-anchor" href="#跨域问题" aria-label="Permalink to "跨域问题""></a></h2><p>通常有哪些方法解决跨域问题？</p><ul><li>利用JSONP</li><li>反向代理</li><li>服务器配置CORS</li></ul><h2 id="了解webpack的哪些配置项" tabindex="-1">了解Webpack的哪些配置项 <a class="header-anchor" href="#了解webpack的哪些配置项" aria-label="Permalink to "了解Webpack的哪些配置项""></a></h2><ul><li><code>resolve.alias</code> 为路径设置别名</li><li><code>resolve.extensionAlias</code> 后缀省略时 按此顺序指定的后缀名解析文件</li><li><code>module.rules</code> 包含<code>test</code> <code>loader</code> <code>option</code> 正则匹配后缀名 使用指定的loader解析文件</li></ul><h2 id="判断变量类型" tabindex="-1">判断变量类型 <a class="header-anchor" href="#判断变量类型" aria-label="Permalink to "判断变量类型""></a></h2><p>直接使用<code>typeof</code>无法判断引用类型变量的类型</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">typeof</span><span style="color:#A6ACCD;"> []) </span><span style="color:#676E95;font-style:italic;">// object</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">typeof</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{}</span><span style="color:#A6ACCD;">) </span><span style="color:#676E95;font-style:italic;">// object</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">typeof</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">null</span><span style="color:#A6ACCD;">) </span><span style="color:#676E95;font-style:italic;">// object</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h2 id="js浮点数相加精度问题" tabindex="-1">JS浮点数相加精度问题 <a class="header-anchor" href="#js浮点数相加精度问题" aria-label="Permalink to "JS浮点数相加精度问题""></a></h2><h2 id="简单讲讲vue-router原理" tabindex="-1">简单讲讲Vue Router原理 <a class="header-anchor" href="#简单讲讲vue-router原理" aria-label="Permalink to "简单讲讲Vue Router原理""></a></h2><h2 id="es6熟悉吗" tabindex="-1">ES6熟悉吗 <a class="header-anchor" href="#es6熟悉吗" aria-label="Permalink to "ES6熟悉吗""></a></h2><p><a href="https://es6.ruanyifeng.com/" target="_blank" rel="noreferrer">ES6教程</a></p><ul><li><code>let</code> <code>const</code></li><li>解构赋值 扩展运算符 可选链</li><li><code>Promise</code> <code>Async</code></li><li><code>Class</code> <code>Set</code> <code>Map</code> <code>Symbol</code> <code>Proxy</code></li></ul><h2 id="css如何实现水平居中与垂直居中" tabindex="-1">CSS如何实现水平居中与垂直居中 <a class="header-anchor" href="#css如何实现水平居中与垂直居中" aria-label="Permalink to "CSS如何实现水平居中与垂直居中""></a></h2><p>参见<a href="./../note/CSS.html">CSS学习笔记</a></p>`,71),o=[p];function r(c,t,i,y,C,D){return a(),n("div",null,o)}const F=s(e,[["render",r]]);export{A as __pageData,F as default};
|
||||
@@ -1 +0,0 @@
|
||||
import{_ as s,o as a,c as n,S as l}from"./chunks/framework.04e6e156.js";const A=JSON.parse('{"title":"【用友金融】前端面试题总结","description":"","frontmatter":{},"headers":[],"relativePath":"article/【用友金融】前端面试题总结.md","filePath":"article/【用友金融】前端面试题总结.md","lastUpdated":1697042822000}'),e={name:"article/【用友金融】前端面试题总结.md"},p=l("",71),o=[p];function r(c,t,i,y,C,D){return a(),n("div",null,o)}const F=s(e,[["render",r]]);export{A as __pageData,F as default};
|
||||
71
assets/article_一文读懂事件冒泡与事件捕获.md.856738eb.js
Normal file
71
assets/article_一文读懂事件冒泡与事件捕获.md.856738eb.js
Normal file
@@ -0,0 +1,71 @@
|
||||
import{_ as s,o as a,c as n,Q as e}from"./chunks/framework.4001cd3b.js";const g=JSON.parse('{"title":"一文读懂事件冒泡与事件捕获","description":"","frontmatter":{},"headers":[],"relativePath":"article/一文读懂事件冒泡与事件捕获.md","filePath":"article/一文读懂事件冒泡与事件捕获.md","lastUpdated":1697384672000}'),l={name:"article/一文读懂事件冒泡与事件捕获.md"},p=e(`<h1 id="一文读懂事件冒泡与事件捕获" tabindex="-1">一文读懂事件冒泡与事件捕获 <a class="header-anchor" href="#一文读懂事件冒泡与事件捕获" aria-label="Permalink to "一文读懂事件冒泡与事件捕获""></a></h1><h2 id="💡-从例子入手" tabindex="-1">💡 从例子入手 <a class="header-anchor" href="#💡-从例子入手" aria-label="Permalink to "💡 从例子入手""></a></h2><p>这是一个<a href="https://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box.html" target="_blank" rel="noreferrer">简单的 Demo</a>，点击的 <code>Display video</code> 按钮后，将视频展示出来。</p><p>其中的视频 <code><video></code> 标签被 <code><div></code> 包裹，<code><div></code> 与 <code><video></code> 上都绑定了自己的 <code>click</code> 事件。</p><p><a href="https://code.juejin.cn/pen/7092947625791455262" target="_blank" rel="noreferrer">代码片段</a></p><p>我们的预期是：点击 <code><video></code> 时播放视频，点击 <code><div></code> 时隐藏视频，然而实际上你会发现，点击视频后，不仅视频虽然正常播放，但同时也被隐藏了。</p><p>点击子元素，父元素的事件也被触发，导致这种现象的原因正是：<strong>浏览器的事件冒泡机制</strong>。</p><h2 id="🤔-什么是事件冒泡机制-事件捕获又是什么" tabindex="-1">🤔 什么是事件冒泡机制？事件捕获又是什么？ <a class="header-anchor" href="#🤔-什么是事件冒泡机制-事件捕获又是什么" aria-label="Permalink to "🤔 什么是事件冒泡机制？事件捕获又是什么？""></a></h2><p>现代浏览器提供了两种事件处理阶段：<strong>捕获阶段与冒泡阶段</strong>，</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/712c504b08f946088fc51dd5f8959020~tplv-k3u1fbpfcp-zoom-1.image" alt="bubbling-capturing.png"></p><blockquote><p>在捕获阶段：</p><ul><li>浏览器检查元素的最外层祖先 <code><html></code> ，是否在捕获阶段中注册了一个 <code>onclick</code> 事件处理程序，如果是，则运行它。</li><li>然后，它移动到 <code><html></code> 中单击元素的下一个祖先元素，执行相同的操作，然后是单击元素再下一个祖先元素，依此类推，直到到达实际点击的元素。</li></ul></blockquote><blockquote><p>在冒泡阶段，与上述顺序相反：</p><ul><li>浏览器检查实际点击的元素是否在冒泡阶段中注册了一个 <code>onclick</code> 事件处理程序，如果是，则运行它</li><li>然后它移动到下一个直接的祖先元素，并做同样的事情，然后是下一个，等等，直到它到达 <code><html></code> 元素。</li></ul></blockquote><p>当一个事件被触发时，浏览器<strong>先运行捕获阶段，后运行冒泡阶段</strong>，并且在默认情况下，<strong>所有事件处理程序都在冒泡阶段进行注册</strong>。</p><p>针对上面提到的问题，我们可以知道：当 <code><video></code> 点击事件触发后，虽然我们没有主动触发 <code><div></code> 上绑定的点击事件，但由于冒泡机制，点击事件冒泡到了 <code><div></code> 上，并触发了绑定在其上的监听回调函数，将 <code><video></code> 标签隐藏。</p><h3 id="📌-用例子验证结论" tabindex="-1">📌 用例子验证结论 <a class="header-anchor" href="#📌-用例子验证结论" aria-label="Permalink to "📌 用例子验证结论""></a></h3><p>下面是一个用于验证上述结论的Demo：</p><p>页面中包括由外向内的三个类名不同的div标签： <code>div1</code> <code>div2</code> <code>div3</code>，并为他们在捕获阶段/冒泡阶段分别绑定了不同的事件函数 <code>click</code> 和 <code>dblclick</code>。</p><p><a href="https://code.juejin.cn/pen/7092975347720781861" target="_blank" rel="noreferrer">代码片段</a></p><p>当点击最内部的 <code>div3</code> 后，浏览器控制台输出：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">> 捕获 click div1</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">> 捕获 click div2</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">> 捕获 click div3</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">> 冒泡 click div3</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">> 冒泡 click div2</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">> 冒泡 click div1</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">> 捕获 click div1</span></span>
|
||||
<span class="line"><span style="color:#24292e;">> 捕获 click div2</span></span>
|
||||
<span class="line"><span style="color:#24292e;">> 捕获 click div3</span></span>
|
||||
<span class="line"><span style="color:#24292e;">> 冒泡 click div3</span></span>
|
||||
<span class="line"><span style="color:#24292e;">> 冒泡 click div2</span></span>
|
||||
<span class="line"><span style="color:#24292e;">> 冒泡 click div1</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>捕获阶段先执行，由外向内，冒泡阶段后执行，由内向外。 <code>dblclick</code> 事件并未被触发。</p><p>由此可知：</p><ul><li>事件触发 => 捕获阶段 => 冒泡阶段</li><li>默认情况下，所有事件都在冒泡阶段被注册</li><li>捕获阶段，浏览器<strong>由外层向内层</strong>逐个元素检查事件函数，如有则执行它。</li><li>冒泡阶段，浏览器<strong>由内层向外层</strong>逐个元素检查事件函数，如有则执行它。</li><li>子元素一个事件触发后，只有<strong>相同的事件会被捕获/冒泡检查</strong></li></ul><hr><p>在本例中，通过为 <code>addEventListener</code> 函数<strong>指定第三个参数，从而在捕获阶段监听事件</strong></p><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">target.</span><span style="color:#B392F0;">addEventListener</span><span style="color:#E1E4E8;">(type, listener, useCapture);</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">target.</span><span style="color:#6F42C1;">addEventListener</span><span style="color:#24292E;">(type, listener, useCapture);</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>当 <code>useCapture</code> 为 <code>true</code> 时，事件监听回调函数将在捕获阶段被触发。</p><h2 id="🧐-为什么有两个阶段-它们有什么用" tabindex="-1">🧐 为什么有两个阶段？它们有什么用？ <a class="header-anchor" href="#🧐-为什么有两个阶段-它们有什么用" aria-label="Permalink to "🧐 为什么有两个阶段？它们有什么用？""></a></h2><h3 id="📌-历史渊源" tabindex="-1">📌 历史渊源 <a class="header-anchor" href="#📌-历史渊源" aria-label="Permalink to "📌 历史渊源""></a></h3><blockquote><p>在过去，Netscape（网景）只使用事件捕获，而Internet Explorer只使用事件冒泡。当W3C决定尝试规范这些行为并达成共识时，他们最终得到了包括这两种情况（捕捉和冒泡）的系统，最终被应用在现代浏览器中。</p></blockquote><h3 id="📌-事件代理-event-delegation" tabindex="-1">📌 事件代理 (Event delegation) <a class="header-anchor" href="#📌-事件代理-event-delegation" aria-label="Permalink to "📌 事件代理 (Event delegation)""></a></h3><p>利用捕获/冒泡机制，我们可以实现事件代理，什么是事件代理？</p><p>试想一下，此时有一个包含大量列表项的无序列表，我们希望每一个 <code><li></code> 的点击事件都能被监听并且添加特定的处理函数，然而我们不可能为每一个 <code><li></code> 都添加一次事件监听函数，这样效率太低了。</p><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">ul</span><span style="color:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">li</span><span style="color:#E1E4E8;">>Li.</</span><span style="color:#85E89D;">li</span><span style="color:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">li</span><span style="color:#E1E4E8;">>Li.</</span><span style="color:#85E89D;">li</span><span style="color:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">li</span><span style="color:#E1E4E8;">>Li.</</span><span style="color:#85E89D;">li</span><span style="color:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">li</span><span style="color:#E1E4E8;">>Li.</</span><span style="color:#85E89D;">li</span><span style="color:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">li</span><span style="color:#E1E4E8;">>Li.</</span><span style="color:#85E89D;">li</span><span style="color:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">li</span><span style="color:#E1E4E8;">>Li.</</span><span style="color:#85E89D;">li</span><span style="color:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">li</span><span style="color:#E1E4E8;">>Li.</</span><span style="color:#85E89D;">li</span><span style="color:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">ul</span><span style="color:#E1E4E8;">></span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">ul</span><span style="color:#24292E;">></span></span>
|
||||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">li</span><span style="color:#24292E;">>Li.</</span><span style="color:#22863A;">li</span><span style="color:#24292E;">></span></span>
|
||||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">li</span><span style="color:#24292E;">>Li.</</span><span style="color:#22863A;">li</span><span style="color:#24292E;">></span></span>
|
||||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">li</span><span style="color:#24292E;">>Li.</</span><span style="color:#22863A;">li</span><span style="color:#24292E;">></span></span>
|
||||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">li</span><span style="color:#24292E;">>Li.</</span><span style="color:#22863A;">li</span><span style="color:#24292E;">></span></span>
|
||||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">li</span><span style="color:#24292E;">>Li.</</span><span style="color:#22863A;">li</span><span style="color:#24292E;">></span></span>
|
||||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">li</span><span style="color:#24292E;">>Li.</</span><span style="color:#22863A;">li</span><span style="color:#24292E;">></span></span>
|
||||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">li</span><span style="color:#24292E;">>Li.</</span><span style="color:#22863A;">li</span><span style="color:#24292E;">></span></span>
|
||||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">ul</span><span style="color:#24292E;">></span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>这时，我们可以为最外层的 <code><ul></code> 绑定一个 <code>click</code> 事件的监听函数，利用捕获/冒泡机制，就可以在事件对象的 <code>target</code> 属性中拿到对应的 <code><li></code>。</p><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">document.</span><span style="color:#B392F0;">querySelector</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">"ul"</span><span style="color:#E1E4E8;">).</span><span style="color:#B392F0;">addEventListener</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">"click"</span><span style="color:#E1E4E8;">, (</span><span style="color:#FFAB70;">e</span><span style="color:#E1E4E8;">) </span><span style="color:#F97583;">=></span><span style="color:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(e.target); </span><span style="color:#6A737D;">// > li (实际点击的元素)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(e.currentTarget); </span><span style="color:#6A737D;">// > ul (事件绑定的元素)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">});</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">document.</span><span style="color:#6F42C1;">querySelector</span><span style="color:#24292E;">(</span><span style="color:#032F62;">"ul"</span><span style="color:#24292E;">).</span><span style="color:#6F42C1;">addEventListener</span><span style="color:#24292E;">(</span><span style="color:#032F62;">"click"</span><span style="color:#24292E;">, (</span><span style="color:#E36209;">e</span><span style="color:#24292E;">) </span><span style="color:#D73A49;">=></span><span style="color:#24292E;"> {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(e.target); </span><span style="color:#6A737D;">// > li (实际点击的元素)</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(e.currentTarget); </span><span style="color:#6A737D;">// > ul (事件绑定的元素)</span></span>
|
||||
<span class="line"><span style="color:#24292E;">});</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="📌-事件对象中的target与currenttarget" tabindex="-1">📌 事件对象中的<code>target</code>与<code>currentTarget</code> <a class="header-anchor" href="#📌-事件对象中的target与currenttarget" aria-label="Permalink to "📌 事件对象中的\`target\`与\`currentTarget\`""></a></h3><p>在实际的使用中，你会发现事件对象中存在两个不同的属性：<code>target</code> <code>currentTarget</code>。</p><p>它们有什么区别？和回调函数中的 <code>this</code> 的关系是怎样的？</p><p>复用上面验证捕获与冒泡顺序结论的例子，下面的代码片段验证了 <code>target</code> 和 <code>currentTarget</code> 的关系。</p><p><a href="https://code.juejin.cn/pen/7092980795211513892" target="_blank" rel="noreferrer">代码片段</a></p><p>当点击最内部的 <code>div3</code> 后，浏览器控制台输出：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">> 捕获 target: div3 currentTarget: div1 this: div1</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">> 捕获 target: div3 currentTarget: div2 this: div2</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">> 捕获 target: div3 currentTarget: div3 this: div3</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">> 冒泡 target: div3 currentTarget: div3 this: div3</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">> 冒泡 target: div3 currentTarget: div2 this: div2</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">> 冒泡 target: div3 currentTarget: div1 this: div1</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">> 捕获 target: div3 currentTarget: div1 this: div1</span></span>
|
||||
<span class="line"><span style="color:#24292e;">> 捕获 target: div3 currentTarget: div2 this: div2</span></span>
|
||||
<span class="line"><span style="color:#24292e;">> 捕获 target: div3 currentTarget: div3 this: div3</span></span>
|
||||
<span class="line"><span style="color:#24292e;">> 冒泡 target: div3 currentTarget: div3 this: div3</span></span>
|
||||
<span class="line"><span style="color:#24292e;">> 冒泡 target: div3 currentTarget: div2 this: div2</span></span>
|
||||
<span class="line"><span style="color:#24292e;">> 冒泡 target: div3 currentTarget: div1 this: div1</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>由此可知，事件对象中的 <code>target</code> 属性为实际触发事件的DOM元素，<code>currentTarget</code> 指向注册事件监听时绑定的DOM元素。</p><p>需要注意的是，为了验证 <code>this</code> 指向，此处使用了 <code>function</code> 声明函数替代前例中的 <code>() => {}</code>，如果仍以箭头函数形式声明，则 <code>this</code> 始终指向 <code>Window</code> 对象。</p><h2 id="🥳-如何阻止事件冒泡" tabindex="-1">🥳 如何阻止事件冒泡？ <a class="header-anchor" href="#🥳-如何阻止事件冒泡" aria-label="Permalink to "🥳 如何阻止事件冒泡？""></a></h2><p>如你所见，大多数情况事件冒泡机制可以为我们带来便利，但是少数情况（如本文开头的例子）下，会影响预期的代码效果，我们应该如何阻止事件冒泡呢？</p><h3 id="📌-stoppropagation" tabindex="-1">📌 .stopPropagation() <a class="header-anchor" href="#📌-stoppropagation" aria-label="Permalink to "📌 .stopPropagation()""></a></h3><p>直接调用 <code>e.stopPropagation()</code> 阻止事件向上冒泡 触发其他回调</p><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">document.</span><span style="color:#B392F0;">querySelector</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">".div1"</span><span style="color:#E1E4E8;">)((</span><span style="color:#FFAB70;">e</span><span style="color:#E1E4E8;">) </span><span style="color:#F97583;">=></span><span style="color:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">let</span><span style="color:#E1E4E8;"> e </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> e </span><span style="color:#F97583;">||</span><span style="color:#E1E4E8;"> window.event;</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">// some code ...</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> e.</span><span style="color:#B392F0;">stopPropagation</span><span style="color:#E1E4E8;">();</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">});</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">document.</span><span style="color:#6F42C1;">querySelector</span><span style="color:#24292E;">(</span><span style="color:#032F62;">".div1"</span><span style="color:#24292E;">)((</span><span style="color:#E36209;">e</span><span style="color:#24292E;">) </span><span style="color:#D73A49;">=></span><span style="color:#24292E;"> {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">let</span><span style="color:#24292E;"> e </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> e </span><span style="color:#D73A49;">||</span><span style="color:#24292E;"> window.event;</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6A737D;">// some code ...</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> e.</span><span style="color:#6F42C1;">stopPropagation</span><span style="color:#24292E;">();</span></span>
|
||||
<span class="line"><span style="color:#24292E;">});</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="📌-e-target-e-currenttarget" tabindex="-1">📌 e.target == e.currentTarget <a class="header-anchor" href="#📌-e-target-e-currenttarget" aria-label="Permalink to "📌 e.target == e.currentTarget""></a></h3><p>当使用事件代理，给目标元素的父元素添加监听回调函数时添加判断</p><p>只有当<strong>实际触发元素与回调绑定的元素相同</strong>时，才触发相关逻辑</p><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">document.</span><span style="color:#B392F0;">querySelector</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">".div1"</span><span style="color:#E1E4E8;">)((</span><span style="color:#FFAB70;">e</span><span style="color:#E1E4E8;">) </span><span style="color:#F97583;">=></span><span style="color:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">if</span><span style="color:#E1E4E8;"> (e.target </span><span style="color:#F97583;">==</span><span style="color:#E1E4E8;"> e.currentTarget) {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">// some code ...</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> }</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">});</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">document.</span><span style="color:#6F42C1;">querySelector</span><span style="color:#24292E;">(</span><span style="color:#032F62;">".div1"</span><span style="color:#24292E;">)((</span><span style="color:#E36209;">e</span><span style="color:#24292E;">) </span><span style="color:#D73A49;">=></span><span style="color:#24292E;"> {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">if</span><span style="color:#24292E;"> (e.target </span><span style="color:#D73A49;">==</span><span style="color:#24292E;"> e.currentTarget) {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6A737D;">// some code ...</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> }</span></span>
|
||||
<span class="line"><span style="color:#24292E;">});</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="📌-return-false" tabindex="-1">📌 return false <a class="header-anchor" href="#📌-return-false" aria-label="Permalink to "📌 return false""></a></h3><p>当回调内逻辑执行完毕后，直接 <code>return false</code> 可以中止事件向上冒泡</p><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">document.</span><span style="color:#B392F0;">querySelector</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">".div1"</span><span style="color:#E1E4E8;">)((</span><span style="color:#FFAB70;">e</span><span style="color:#E1E4E8;">) </span><span style="color:#F97583;">=></span><span style="color:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">// some code ...</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">false</span><span style="color:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">});</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">document.</span><span style="color:#6F42C1;">querySelector</span><span style="color:#24292E;">(</span><span style="color:#032F62;">".div1"</span><span style="color:#24292E;">)((</span><span style="color:#E36209;">e</span><span style="color:#24292E;">) </span><span style="color:#D73A49;">=></span><span style="color:#24292E;"> {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6A737D;">// some code ...</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">false</span><span style="color:#24292E;">;</span></span>
|
||||
<span class="line"><span style="color:#24292E;">});</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>需要注意的是，<code>return false</code> 的方法不仅阻止了事件冒泡，而且阻止了默认事件。</p><blockquote><p><strong>默认事件</strong>：DOM元素的默认行为，选中复选框是点击复选框的默认行为。下面这个例子说明了怎样阻止默认行为的发生</p></blockquote><p>另一种阻止默认事件的方法是 <code>.preventDefault()</code></p><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">document.</span><span style="color:#B392F0;">querySelector</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">".div1"</span><span style="color:#E1E4E8;">)((</span><span style="color:#FFAB70;">e</span><span style="color:#E1E4E8;">) </span><span style="color:#F97583;">=></span><span style="color:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">// some code ...</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> e.</span><span style="color:#B392F0;">preventDefault</span><span style="color:#E1E4E8;">()</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">});</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">document.</span><span style="color:#6F42C1;">querySelector</span><span style="color:#24292E;">(</span><span style="color:#032F62;">".div1"</span><span style="color:#24292E;">)((</span><span style="color:#E36209;">e</span><span style="color:#24292E;">) </span><span style="color:#D73A49;">=></span><span style="color:#24292E;"> {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6A737D;">// some code ...</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> e.</span><span style="color:#6F42C1;">preventDefault</span><span style="color:#24292E;">()</span></span>
|
||||
<span class="line"><span style="color:#24292E;">});</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h2 id="相关链接" tabindex="-1">相关链接 <a class="header-anchor" href="#相关链接" aria-label="Permalink to "相关链接""></a></h2><p><a href="https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Building_blocks/Events#%E4%BA%8B%E4%BB%B6%E5%86%92%E6%B3%A1%E5%8F%8A%E6%8D%95%E8%8E%B7" target="_blank" rel="noreferrer"><code>事件冒泡及捕获</code></a></p>`,63),o=[p];function t(c,r,i,d,E,y){return a(),n("div",null,o)}const b=s(l,[["render",t]]);export{g as __pageData,b as default};
|
||||
1
assets/article_一文读懂事件冒泡与事件捕获.md.856738eb.lean.js
Normal file
1
assets/article_一文读懂事件冒泡与事件捕获.md.856738eb.lean.js
Normal file
@@ -0,0 +1 @@
|
||||
import{_ as s,o as a,c as n,Q as e}from"./chunks/framework.4001cd3b.js";const g=JSON.parse('{"title":"一文读懂事件冒泡与事件捕获","description":"","frontmatter":{},"headers":[],"relativePath":"article/一文读懂事件冒泡与事件捕获.md","filePath":"article/一文读懂事件冒泡与事件捕获.md","lastUpdated":1697384672000}'),l={name:"article/一文读懂事件冒泡与事件捕获.md"},p=e("",63),o=[p];function t(c,r,i,d,E,y){return a(),n("div",null,o)}const b=s(l,[["render",t]]);export{g as __pageData,b as default};
|
||||
@@ -1,36 +0,0 @@
|
||||
import{_ as s,o as a,c as n,S as l}from"./chunks/framework.04e6e156.js";const u=JSON.parse('{"title":"一文读懂事件冒泡与事件捕获","description":"","frontmatter":{},"headers":[],"relativePath":"article/一文读懂事件冒泡与事件捕获.md","filePath":"article/一文读懂事件冒泡与事件捕获.md","lastUpdated":1697042822000}'),e={name:"article/一文读懂事件冒泡与事件捕获.md"},o=l(`<h1 id="一文读懂事件冒泡与事件捕获" tabindex="-1">一文读懂事件冒泡与事件捕获 <a class="header-anchor" href="#一文读懂事件冒泡与事件捕获" aria-label="Permalink to "一文读懂事件冒泡与事件捕获""></a></h1><h2 id="💡-从例子入手" tabindex="-1">💡 从例子入手 <a class="header-anchor" href="#💡-从例子入手" aria-label="Permalink to "💡 从例子入手""></a></h2><p>这是一个<a href="https://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box.html" target="_blank" rel="noreferrer">简单的 Demo</a>，点击的 <code>Display video</code> 按钮后，将视频展示出来。</p><p>其中的视频 <code><video></code> 标签被 <code><div></code> 包裹，<code><div></code> 与 <code><video></code> 上都绑定了自己的 <code>click</code> 事件。</p><p><a href="https://code.juejin.cn/pen/7092947625791455262" target="_blank" rel="noreferrer">代码片段</a></p><p>我们的预期是：点击 <code><video></code> 时播放视频，点击 <code><div></code> 时隐藏视频，然而实际上你会发现，点击视频后，不仅视频虽然正常播放，但同时也被隐藏了。</p><p>点击子元素，父元素的事件也被触发，导致这种现象的原因正是：<strong>浏览器的事件冒泡机制</strong>。</p><h2 id="🤔-什么是事件冒泡机制-事件捕获又是什么" tabindex="-1">🤔 什么是事件冒泡机制？事件捕获又是什么？ <a class="header-anchor" href="#🤔-什么是事件冒泡机制-事件捕获又是什么" aria-label="Permalink to "🤔 什么是事件冒泡机制？事件捕获又是什么？""></a></h2><p>现代浏览器提供了两种事件处理阶段：<strong>捕获阶段与冒泡阶段</strong>，</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/712c504b08f946088fc51dd5f8959020~tplv-k3u1fbpfcp-zoom-1.image" alt="bubbling-capturing.png"></p><blockquote><p>在捕获阶段：</p><ul><li>浏览器检查元素的最外层祖先 <code><html></code> ，是否在捕获阶段中注册了一个 <code>onclick</code> 事件处理程序，如果是，则运行它。</li><li>然后，它移动到 <code><html></code> 中单击元素的下一个祖先元素，执行相同的操作，然后是单击元素再下一个祖先元素，依此类推，直到到达实际点击的元素。</li></ul></blockquote><blockquote><p>在冒泡阶段，与上述顺序相反：</p><ul><li>浏览器检查实际点击的元素是否在冒泡阶段中注册了一个 <code>onclick</code> 事件处理程序，如果是，则运行它</li><li>然后它移动到下一个直接的祖先元素，并做同样的事情，然后是下一个，等等，直到它到达 <code><html></code> 元素。</li></ul></blockquote><p>当一个事件被触发时，浏览器<strong>先运行捕获阶段，后运行冒泡阶段</strong>，并且在默认情况下，<strong>所有事件处理程序都在冒泡阶段进行注册</strong>。</p><p>针对上面提到的问题，我们可以知道：当 <code><video></code> 点击事件触发后，虽然我们没有主动触发 <code><div></code> 上绑定的点击事件，但由于冒泡机制，点击事件冒泡到了 <code><div></code> 上，并触发了绑定在其上的监听回调函数，将 <code><video></code> 标签隐藏。</p><h3 id="📌-用例子验证结论" tabindex="-1">📌 用例子验证结论 <a class="header-anchor" href="#📌-用例子验证结论" aria-label="Permalink to "📌 用例子验证结论""></a></h3><p>下面是一个用于验证上述结论的Demo：</p><p>页面中包括由外向内的三个类名不同的div标签： <code>div1</code> <code>div2</code> <code>div3</code>，并为他们在捕获阶段/冒泡阶段分别绑定了不同的事件函数 <code>click</code> 和 <code>dblclick</code>。</p><p><a href="https://code.juejin.cn/pen/7092975347720781861" target="_blank" rel="noreferrer">代码片段</a></p><p>当点击最内部的 <code>div3</code> 后，浏览器控制台输出：</p><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">> 捕获 click div1</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">> 捕获 click div2</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">> 捕获 click div3</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">> 冒泡 click div3</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">> 冒泡 click div2</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">> 冒泡 click div1</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>捕获阶段先执行，由外向内，冒泡阶段后执行，由内向外。 <code>dblclick</code> 事件并未被触发。</p><p>由此可知：</p><ul><li>事件触发 => 捕获阶段 => 冒泡阶段</li><li>默认情况下，所有事件都在冒泡阶段被注册</li><li>捕获阶段，浏览器<strong>由外层向内层</strong>逐个元素检查事件函数，如有则执行它。</li><li>冒泡阶段，浏览器<strong>由内层向外层</strong>逐个元素检查事件函数，如有则执行它。</li><li>子元素一个事件触发后，只有<strong>相同的事件会被捕获/冒泡检查</strong></li></ul><hr><p>在本例中，通过为 <code>addEventListener</code> 函数<strong>指定第三个参数，从而在捕获阶段监听事件</strong></p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">target</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">addEventListener</span><span style="color:#A6ACCD;">(type</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> listener</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> useCapture)</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>当 <code>useCapture</code> 为 <code>true</code> 时，事件监听回调函数将在捕获阶段被触发。</p><h2 id="🧐-为什么有两个阶段-它们有什么用" tabindex="-1">🧐 为什么有两个阶段？它们有什么用？ <a class="header-anchor" href="#🧐-为什么有两个阶段-它们有什么用" aria-label="Permalink to "🧐 为什么有两个阶段？它们有什么用？""></a></h2><h3 id="📌-历史渊源" tabindex="-1">📌 历史渊源 <a class="header-anchor" href="#📌-历史渊源" aria-label="Permalink to "📌 历史渊源""></a></h3><blockquote><p>在过去，Netscape（网景）只使用事件捕获，而Internet Explorer只使用事件冒泡。当W3C决定尝试规范这些行为并达成共识时，他们最终得到了包括这两种情况（捕捉和冒泡）的系统，最终被应用在现代浏览器中。</p></blockquote><h3 id="📌-事件代理-event-delegation" tabindex="-1">📌 事件代理 (Event delegation) <a class="header-anchor" href="#📌-事件代理-event-delegation" aria-label="Permalink to "📌 事件代理 (Event delegation)""></a></h3><p>利用捕获/冒泡机制，我们可以实现事件代理，什么是事件代理？</p><p>试想一下，此时有一个包含大量列表项的无序列表，我们希望每一个 <code><li></code> 的点击事件都能被监听并且添加特定的处理函数，然而我们不可能为每一个 <code><li></code> 都添加一次事件监听函数，这样效率太低了。</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">ul</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;">Li.</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;">Li.</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;">Li.</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;">Li.</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;">Li.</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;">Li.</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;">Li.</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">ul</span><span style="color:#89DDFF;">></span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>这时，我们可以为最外层的 <code><ul></code> 绑定一个 <code>click</code> 事件的监听函数，利用捕获/冒泡机制，就可以在事件对象的 <code>target</code> 属性中拿到对应的 <code><li></code>。</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">ul</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">addEventListener</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">click</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">e</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">e</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">target</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// > li (实际点击的元素)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">e</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">currentTarget</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// > ul (事件绑定的元素)</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="📌-事件对象中的target与currenttarget" tabindex="-1">📌 事件对象中的<code>target</code>与<code>currentTarget</code> <a class="header-anchor" href="#📌-事件对象中的target与currenttarget" aria-label="Permalink to "📌 事件对象中的\`target\`与\`currentTarget\`""></a></h3><p>在实际的使用中，你会发现事件对象中存在两个不同的属性：<code>target</code> <code>currentTarget</code>。</p><p>它们有什么区别？和回调函数中的 <code>this</code> 的关系是怎样的？</p><p>复用上面验证捕获与冒泡顺序结论的例子，下面的代码片段验证了 <code>target</code> 和 <code>currentTarget</code> 的关系。</p><p><a href="https://code.juejin.cn/pen/7092980795211513892" target="_blank" rel="noreferrer">代码片段</a></p><p>当点击最内部的 <code>div3</code> 后，浏览器控制台输出：</p><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">> 捕获 target: div3 currentTarget: div1 this: div1</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">> 捕获 target: div3 currentTarget: div2 this: div2</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">> 捕获 target: div3 currentTarget: div3 this: div3</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">> 冒泡 target: div3 currentTarget: div3 this: div3</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">> 冒泡 target: div3 currentTarget: div2 this: div2</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">> 冒泡 target: div3 currentTarget: div1 this: div1</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>由此可知，事件对象中的 <code>target</code> 属性为实际触发事件的DOM元素，<code>currentTarget</code> 指向注册事件监听时绑定的DOM元素。</p><p>需要注意的是，为了验证 <code>this</code> 指向，此处使用了 <code>function</code> 声明函数替代前例中的 <code>() => {}</code>，如果仍以箭头函数形式声明，则 <code>this</code> 始终指向 <code>Window</code> 对象。</p><h2 id="🥳-如何阻止事件冒泡" tabindex="-1">🥳 如何阻止事件冒泡？ <a class="header-anchor" href="#🥳-如何阻止事件冒泡" aria-label="Permalink to "🥳 如何阻止事件冒泡？""></a></h2><p>如你所见，大多数情况事件冒泡机制可以为我们带来便利，但是少数情况（如本文开头的例子）下，会影响预期的代码效果，我们应该如何阻止事件冒泡呢？</p><h3 id="📌-stoppropagation" tabindex="-1">📌 .stopPropagation() <a class="header-anchor" href="#📌-stoppropagation" aria-label="Permalink to "📌 .stopPropagation()""></a></h3><p>直接调用 <code>e.stopPropagation()</code> 阻止事件向上冒泡 触发其他回调</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">.div1</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">)(</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">e</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">let</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">e</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">e</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">||</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">window</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">event</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// some code ...</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">e</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">stopPropagation</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="📌-e-target-e-currenttarget" tabindex="-1">📌 e.target == e.currentTarget <a class="header-anchor" href="#📌-e-target-e-currenttarget" aria-label="Permalink to "📌 e.target == e.currentTarget""></a></h3><p>当使用事件代理，给目标元素的父元素添加监听回调函数时添加判断</p><p>只有当<strong>实际触发元素与回调绑定的元素相同</strong>时，才触发相关逻辑</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">.div1</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">)(</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">e</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">e</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">target</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">==</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">e</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">currentTarget</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// some code ...</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="📌-return-false" tabindex="-1">📌 return false <a class="header-anchor" href="#📌-return-false" aria-label="Permalink to "📌 return false""></a></h3><p>当回调内逻辑执行完毕后，直接 <code>return false</code> 可以中止事件向上冒泡</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">.div1</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">)(</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">e</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// some code ...</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>需要注意的是，<code>return false</code> 的方法不仅阻止了事件冒泡，而且阻止了默认事件。</p><blockquote><p><strong>默认事件</strong>：DOM元素的默认行为，选中复选框是点击复选框的默认行为。下面这个例子说明了怎样阻止默认行为的发生</p></blockquote><p>另一种阻止默认事件的方法是 <code>.preventDefault()</code></p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">.div1</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">)(</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">e</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// some code ...</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">e</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">preventDefault</span><span style="color:#F07178;">()</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h2 id="相关链接" tabindex="-1">相关链接 <a class="header-anchor" href="#相关链接" aria-label="Permalink to "相关链接""></a></h2><p><a href="https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Building_blocks/Events#%E4%BA%8B%E4%BB%B6%E5%86%92%E6%B3%A1%E5%8F%8A%E6%8D%95%E8%8E%B7" target="_blank" rel="noreferrer"><code>事件冒泡及捕获</code></a></p>`,63),p=[o];function t(r,c,i,d,D,y){return a(),n("div",null,p)}const C=s(e,[["render",t]]);export{u as __pageData,C as default};
|
||||
@@ -1 +0,0 @@
|
||||
import{_ as s,o as a,c as n,S as l}from"./chunks/framework.04e6e156.js";const u=JSON.parse('{"title":"一文读懂事件冒泡与事件捕获","description":"","frontmatter":{},"headers":[],"relativePath":"article/一文读懂事件冒泡与事件捕获.md","filePath":"article/一文读懂事件冒泡与事件捕获.md","lastUpdated":1697042822000}'),e={name:"article/一文读懂事件冒泡与事件捕获.md"},o=l("",63),p=[o];function t(r,c,i,d,D,y){return a(),n("div",null,p)}const C=s(e,[["render",t]]);export{u as __pageData,C as default};
|
||||
@@ -1,58 +0,0 @@
|
||||
import{_ as s,o as a,c as n,S as l}from"./chunks/framework.04e6e156.js";const d=JSON.parse('{"title":"一文读懂伪类与伪元素","description":"","frontmatter":{},"headers":[],"relativePath":"article/一文读懂伪类与伪元素.md","filePath":"article/一文读懂伪类与伪元素.md","lastUpdated":1697042822000}'),p={name:"article/一文读懂伪类与伪元素.md"},e=l(`<h1 id="一文读懂伪类与伪元素" tabindex="-1">一文读懂伪类与伪元素 <a class="header-anchor" href="#一文读懂伪类与伪元素" aria-label="Permalink to "一文读懂伪类与伪元素""></a></h1><h2 id="🔰-什么是伪类" tabindex="-1">🔰 什么是伪类？ <a class="header-anchor" href="#🔰-什么是伪类" aria-label="Permalink to "🔰 什么是伪类？""></a></h2><p>伪类是添加到选择器的 <strong>关键字</strong> ，指定要选择的元素的特殊状态。</p><h3 id="典型的伪类关键字" tabindex="-1">典型的伪类关键字 <a class="header-anchor" href="#典型的伪类关键字" aria-label="Permalink to "典型的伪类关键字""></a></h3><p>在大多数情况下，<strong>伪类都与基础选择器搭配使用</strong>，下述是伪类在一些典型场景下的应用。</p><h4 id="hover" tabindex="-1"><code>:hover</code> <a class="header-anchor" href="#hover" aria-label="Permalink to "\`:hover\`""></a></h4><p>指针在 <code><button></code> 上悬停，但没有激活它时，按钮颜色变为蓝色</p><div class="language-css line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">button</span><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">hover</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> blue</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><blockquote><p><strong>注意</strong>: 在触摸屏上 <code>:hover</code> 基本不可用。不同的浏览器上<code>:hover</code> 伪类表现不同。网页开发人员不要让任何内容只能通过悬停才能展示出来，不然这些内容对于触摸屏使用者来说是很难或者说不可能看到。</p></blockquote><h4 id="not" tabindex="-1"><code>:not</code> <a class="header-anchor" href="#not" aria-label="Permalink to "\`:not\`""></a></h4><p><strong><code>:not()</code></strong> 用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为<em>反选伪类</em>（<em>negation pseudo-class</em>）。</p><p>将所有不是<code><p></code>的元素颜色改为蓝色：</p><div class="language-css line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">body</span><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">not</span><span style="color:#89DDFF;">(</span><span style="color:#FFCB6B;">p</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> blue</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">/* 实测下述代码没有效果 */</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">not</span><span style="color:#89DDFF;">(</span><span style="color:#FFCB6B;">p</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> blue</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><blockquote><p><strong>注意</strong>: 在触摸屏上 <code>:hover</code> 基本不可用。不同的浏览器上<code>:hover</code> 伪类表现不同。网页开发人员不要让任何内容只能通过悬停才能展示出来，不然这些内容对于触摸屏使用者来说是很难或者说不可能看到。</p></blockquote><h4 id="first-child" tabindex="-1"><code>:first-child</code> <a class="header-anchor" href="#first-child" aria-label="Permalink to "\`:first-child\`""></a></h4><p>给所有 <code><ul></code> 下的第一个 <code><li></code> 应用不同的样式</p><div class="language-css line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">ul</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">li</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> blue</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">ul</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">li</span><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">first-child</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> red</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">font-weight</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> bold</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h4 id="active" tabindex="-1"><code>:active</code> <a class="header-anchor" href="#active" aria-label="Permalink to "\`:active\`""></a></h4><p><code>:active</code> 表示的是鼠标从按下到松开的时间，下述代码表示 <code><a></code> 在不同状态下的样式。</p><div class="language-css line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">a</span><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">link</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> blue</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">/* 未访问链接 */</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">a</span><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">visited</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> purple</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">/* 已访问链接 */</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">a</span><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">hover</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">background</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> yellow</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">/* 用户鼠标悬停 */</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">a</span><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">active</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> red</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">/* 激活链接 */</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><blockquote><p><strong>注意</strong>: <code>:active</code> 赋予的样式可能会被后声明的其他链接相关的伪类覆盖。为保证样式生效，需要把 <code>:active</code> 的样式放在所有链接相关的样式之后。</p></blockquote><p>这种链接伪类先后顺序被称为 <em>LVHA 顺序</em>：<code>:link</code> > <code>:visited</code> > <code>:hover</code> > <code>:active</code>。</p><h3 id="单独使用的伪类关键字" tabindex="-1">单独使用的伪类关键字 <a class="header-anchor" href="#单独使用的伪类关键字" aria-label="Permalink to "单独使用的伪类关键字""></a></h3><p>我们常见的伪类关键字的特征是以单个冒号<code>:</code>开头，跟随在基础选择器后面。</p><p><strong>但是单独使用的伪类关键字也可以对页面产生效果，</strong> 例如：</p><p>通过 <code>:focus</code> 伪类，可以让任何元素获得焦点后的颜色变为红色。</p><div class="language-css line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">focus</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> red</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>更多伪类，见 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes#%E6%A0%87%E5%87%86%E4%BC%AA%E7%B1%BB%E7%B4%A2%E5%BC%95" target="_blank" rel="noreferrer">MDN - 标准伪类索引</a></p><p><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d77fd1d23840415ca645e9429237b6dc~tplv-k3u1fbpfcp-watermark.image?" alt="image.png"></p><h2 id="🔰-什么是伪元素" tabindex="-1">🔰 什么是伪元素？ <a class="header-anchor" href="#🔰-什么是伪元素" aria-label="Permalink to "🔰 什么是伪元素？""></a></h2><p>伪元素是一个<strong>附加至选择器末的关键词</strong>，允许你对被选择元素的特定部分修改样式。</p><p>与伪类相同，一个选择器中只能使用一个伪元素。但是，<strong>伪元素必须紧跟在语句中的基础选择器之后</strong>。</p><p>例如，下述代码可以给页面中每个 <code><a></code> 标签前添加一个😃表情。</p><div class="language-css line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">a</span><span style="color:#89DDFF;">::</span><span style="color:#C792EA;">before</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">content</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">😃</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>相比于伪类，伪元素的使用方式更加固定，其基本语法：</p><div class="language-css line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">selector::</span><span style="color:#FFCB6B;">pseudo-element</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">property</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> value</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><blockquote><p><strong>注意</strong>: 在书写伪元素时，你会见到单冒号 <code>:</code> 的写法，但此为CSS2过时语法，仅用于支持IE8，大多情况请书写双冒号 <code>::</code> 来表示伪元素。</p></blockquote><p>更多伪元素见 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements#%E6%A0%87%E5%87%86%E4%BC%AA%E5%85%83%E7%B4%A0%E7%B4%A2%E5%BC%95" target="_blank" rel="noreferrer">MDN - 标准伪元素索引</a></p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/17049cd3157f4a368c98d4fcd905c064~tplv-k3u1fbpfcp-watermark.image?" alt="image.png"></p><h2 id="📌-伪类与伪元素共同使用" tabindex="-1">📌 伪类与伪元素共同使用 <a class="header-anchor" href="#📌-伪类与伪元素共同使用" aria-label="Permalink to "📌 伪类与伪元素共同使用""></a></h2><p>下面一个案例中，同时用到了伪类和伪元素：</p><blockquote><p>用CSS实现一个开关样式，hover时触发，滑块为正方形，具体大小可随意，如下图</p></blockquote><p><img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a6e4b09bb9e64989b0561d48d10a2734~tplv-k3u1fbpfcp-watermark.image?" alt="image.png"></p><blockquote><p>尽量实现如下要求，可实现一部分：</p><ol><li>开关动作均有动画过度（滑块移位、背景色）</li><li>只用一个dom元素实现</li><li>开关的高度是固定的，但宽度不固定，即宽度为未知父元素的100%，宽度始终大于高度</li></ol></blockquote><h3 id="题目解读" tabindex="-1">题目解读 <a class="header-anchor" href="#题目解读" aria-label="Permalink to "题目解读""></a></h3><p>由于只能使用一个 <code>DOM</code> 元素，而要区分滑块和背景的不同状态，故使用伪元素 <code>::before</code> 在 <code>.box</code> 内部添加一个滑块，滑块采用 <code>inline-block</code> 方式展示，并且由 <code>transition</code> 属性指定过渡动画。</p><p>对于背景也采用了 <code>transition</code> 来指定过渡动画，并且二者都通过 <code>:hover</code> 触发。</p><p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1ac690e718be445083bc67b7bbcccb7e~tplv-k3u1fbpfcp-watermark.image?" alt="image.png"></p><h3 id="实现代码" tabindex="-1">实现代码 <a class="header-anchor" href="#实现代码" aria-label="Permalink to "实现代码""></a></h3><p><code>HTML</code></p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">father</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">box</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><code>CSS</code></p><div class="language-css line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">box</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">50px</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">100%</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">background-color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">c2d3e4</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">transition</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> background-color </span><span style="color:#F78C6C;">0.25s</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">box</span><span style="color:#89DDFF;">::</span><span style="color:#C792EA;">before</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">content</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">b</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> white</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">display</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> inline-block</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">background-color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> white</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> relative</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">top</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">5px</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">left</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">5%</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">40px</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">35%</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">transition</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> left </span><span style="color:#F78C6C;">0.25s</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">box</span><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">hover</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">background-color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">348fe4</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">box</span><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">hover</span><span style="color:#89DDFF;">::</span><span style="color:#C792EA;">before</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">left</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">60%</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">/* 父元素宽度任意 */</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">father</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">100px</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br></div></div><h3 id="相关链接" tabindex="-1">相关链接 <a class="header-anchor" href="#相关链接" aria-label="Permalink to "相关链接""></a></h3><p><a href="https://code.juejin.cn/pen/7088328950488760334" target="_blank" rel="noreferrer">代码片段</a></p><p><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors" target="_blank" rel="noreferrer"><code>CSS选择器</code></a></p>`,56),o=[e];function c(r,t,i,D,y,C){return a(),n("div",null,o)}const b=s(p,[["render",c]]);export{d as __pageData,b as default};
|
||||
@@ -1 +0,0 @@
|
||||
import{_ as s,o as a,c as n,S as l}from"./chunks/framework.04e6e156.js";const d=JSON.parse('{"title":"一文读懂伪类与伪元素","description":"","frontmatter":{},"headers":[],"relativePath":"article/一文读懂伪类与伪元素.md","filePath":"article/一文读懂伪类与伪元素.md","lastUpdated":1697042822000}'),p={name:"article/一文读懂伪类与伪元素.md"},e=l("",56),o=[e];function c(r,t,i,D,y,C){return a(),n("div",null,o)}const b=s(p,[["render",c]]);export{d as __pageData,b as default};
|
||||
115
assets/article_一文读懂伪类与伪元素.md.dbc07ad4.js
Normal file
115
assets/article_一文读懂伪类与伪元素.md.dbc07ad4.js
Normal file
@@ -0,0 +1,115 @@
|
||||
import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.4001cd3b.js";const u=JSON.parse('{"title":"一文读懂伪类与伪元素","description":"","frontmatter":{},"headers":[],"relativePath":"article/一文读懂伪类与伪元素.md","filePath":"article/一文读懂伪类与伪元素.md","lastUpdated":1697384672000}'),p={name:"article/一文读懂伪类与伪元素.md"},o=l(`<h1 id="一文读懂伪类与伪元素" tabindex="-1">一文读懂伪类与伪元素 <a class="header-anchor" href="#一文读懂伪类与伪元素" aria-label="Permalink to "一文读懂伪类与伪元素""></a></h1><h2 id="🔰-什么是伪类" tabindex="-1">🔰 什么是伪类？ <a class="header-anchor" href="#🔰-什么是伪类" aria-label="Permalink to "🔰 什么是伪类？""></a></h2><p>伪类是添加到选择器的 <strong>关键字</strong> ，指定要选择的元素的特殊状态。</p><h3 id="典型的伪类关键字" tabindex="-1">典型的伪类关键字 <a class="header-anchor" href="#典型的伪类关键字" aria-label="Permalink to "典型的伪类关键字""></a></h3><p>在大多数情况下，<strong>伪类都与基础选择器搭配使用</strong>，下述是伪类在一些典型场景下的应用。</p><h4 id="hover" tabindex="-1"><code>:hover</code> <a class="header-anchor" href="#hover" aria-label="Permalink to "\`:hover\`""></a></h4><p>指针在 <code><button></code> 上悬停，但没有激活它时，按钮颜色变为蓝色</p><div class="language-css vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#85E89D;">button</span><span style="color:#B392F0;">:hover</span><span style="color:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">color</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">blue</span><span style="color:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">}</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#22863A;">button</span><span style="color:#6F42C1;">:hover</span><span style="color:#24292E;"> {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">color</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">blue</span><span style="color:#24292E;">;</span></span>
|
||||
<span class="line"><span style="color:#24292E;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><blockquote><p><strong>注意</strong>: 在触摸屏上 <code>:hover</code> 基本不可用。不同的浏览器上<code>:hover</code> 伪类表现不同。网页开发人员不要让任何内容只能通过悬停才能展示出来，不然这些内容对于触摸屏使用者来说是很难或者说不可能看到。</p></blockquote><h4 id="not" tabindex="-1"><code>:not</code> <a class="header-anchor" href="#not" aria-label="Permalink to "\`:not\`""></a></h4><p><strong><code>:not()</code></strong> 用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为<em>反选伪类</em>（<em>negation pseudo-class</em>）。</p><p>将所有不是<code><p></code>的元素颜色改为蓝色：</p><div class="language-css vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#85E89D;">body</span><span style="color:#B392F0;">:not</span><span style="color:#E1E4E8;">(</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">) {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">color</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">blue</span><span style="color:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#6A737D;">/* 实测下述代码没有效果 */</span></span>
|
||||
<span class="line"><span style="color:#B392F0;">:not</span><span style="color:#E1E4E8;">(</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">) {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">color</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">blue</span><span style="color:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">}</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#22863A;">body</span><span style="color:#6F42C1;">:not</span><span style="color:#24292E;">(</span><span style="color:#22863A;">p</span><span style="color:#24292E;">) {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">color</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">blue</span><span style="color:#24292E;">;</span></span>
|
||||
<span class="line"><span style="color:#24292E;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#6A737D;">/* 实测下述代码没有效果 */</span></span>
|
||||
<span class="line"><span style="color:#6F42C1;">:not</span><span style="color:#24292E;">(</span><span style="color:#22863A;">p</span><span style="color:#24292E;">) {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">color</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">blue</span><span style="color:#24292E;">;</span></span>
|
||||
<span class="line"><span style="color:#24292E;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><blockquote><p><strong>注意</strong>: 在触摸屏上 <code>:hover</code> 基本不可用。不同的浏览器上<code>:hover</code> 伪类表现不同。网页开发人员不要让任何内容只能通过悬停才能展示出来，不然这些内容对于触摸屏使用者来说是很难或者说不可能看到。</p></blockquote><h4 id="first-child" tabindex="-1"><code>:first-child</code> <a class="header-anchor" href="#first-child" aria-label="Permalink to "\`:first-child\`""></a></h4><p>给所有 <code><ul></code> 下的第一个 <code><li></code> 应用不同的样式</p><div class="language-css vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#85E89D;">ul</span><span style="color:#E1E4E8;"> </span><span style="color:#85E89D;">li</span><span style="color:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">color</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">blue</span><span style="color:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">}</span></span>
|
||||
<span class="line"><span style="color:#85E89D;">ul</span><span style="color:#E1E4E8;"> </span><span style="color:#85E89D;">li</span><span style="color:#B392F0;">:first-child</span><span style="color:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">color</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">red</span><span style="color:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">font-weight</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">bold</span><span style="color:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">}</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#22863A;">ul</span><span style="color:#24292E;"> </span><span style="color:#22863A;">li</span><span style="color:#24292E;"> {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">color</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">blue</span><span style="color:#24292E;">;</span></span>
|
||||
<span class="line"><span style="color:#24292E;">}</span></span>
|
||||
<span class="line"><span style="color:#22863A;">ul</span><span style="color:#24292E;"> </span><span style="color:#22863A;">li</span><span style="color:#6F42C1;">:first-child</span><span style="color:#24292E;"> {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">color</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">red</span><span style="color:#24292E;">;</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">font-weight</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">bold</span><span style="color:#24292E;">;</span></span>
|
||||
<span class="line"><span style="color:#24292E;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h4 id="active" tabindex="-1"><code>:active</code> <a class="header-anchor" href="#active" aria-label="Permalink to "\`:active\`""></a></h4><p><code>:active</code> 表示的是鼠标从按下到松开的时间，下述代码表示 <code><a></code> 在不同状态下的样式。</p><div class="language-css vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#85E89D;">a</span><span style="color:#B392F0;">:link</span><span style="color:#E1E4E8;"> { </span><span style="color:#79B8FF;">color</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">blue</span><span style="color:#E1E4E8;">; } </span><span style="color:#6A737D;">/* 未访问链接 */</span></span>
|
||||
<span class="line"><span style="color:#85E89D;">a</span><span style="color:#B392F0;">:visited</span><span style="color:#E1E4E8;"> { </span><span style="color:#79B8FF;">color</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">purple</span><span style="color:#E1E4E8;">; } </span><span style="color:#6A737D;">/* 已访问链接 */</span></span>
|
||||
<span class="line"><span style="color:#85E89D;">a</span><span style="color:#B392F0;">:hover</span><span style="color:#E1E4E8;"> { </span><span style="color:#79B8FF;">background</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">yellow</span><span style="color:#E1E4E8;">; } </span><span style="color:#6A737D;">/* 用户鼠标悬停 */</span></span>
|
||||
<span class="line"><span style="color:#85E89D;">a</span><span style="color:#B392F0;">:active</span><span style="color:#E1E4E8;"> { </span><span style="color:#79B8FF;">color</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">red</span><span style="color:#E1E4E8;">; } </span><span style="color:#6A737D;">/* 激活链接 */</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#22863A;">a</span><span style="color:#6F42C1;">:link</span><span style="color:#24292E;"> { </span><span style="color:#005CC5;">color</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">blue</span><span style="color:#24292E;">; } </span><span style="color:#6A737D;">/* 未访问链接 */</span></span>
|
||||
<span class="line"><span style="color:#22863A;">a</span><span style="color:#6F42C1;">:visited</span><span style="color:#24292E;"> { </span><span style="color:#005CC5;">color</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">purple</span><span style="color:#24292E;">; } </span><span style="color:#6A737D;">/* 已访问链接 */</span></span>
|
||||
<span class="line"><span style="color:#22863A;">a</span><span style="color:#6F42C1;">:hover</span><span style="color:#24292E;"> { </span><span style="color:#005CC5;">background</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">yellow</span><span style="color:#24292E;">; } </span><span style="color:#6A737D;">/* 用户鼠标悬停 */</span></span>
|
||||
<span class="line"><span style="color:#22863A;">a</span><span style="color:#6F42C1;">:active</span><span style="color:#24292E;"> { </span><span style="color:#005CC5;">color</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">red</span><span style="color:#24292E;">; } </span><span style="color:#6A737D;">/* 激活链接 */</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><blockquote><p><strong>注意</strong>: <code>:active</code> 赋予的样式可能会被后声明的其他链接相关的伪类覆盖。为保证样式生效，需要把 <code>:active</code> 的样式放在所有链接相关的样式之后。</p></blockquote><p>这种链接伪类先后顺序被称为 <em>LVHA 顺序</em>：<code>:link</code> > <code>:visited</code> > <code>:hover</code> > <code>:active</code>。</p><h3 id="单独使用的伪类关键字" tabindex="-1">单独使用的伪类关键字 <a class="header-anchor" href="#单独使用的伪类关键字" aria-label="Permalink to "单独使用的伪类关键字""></a></h3><p>我们常见的伪类关键字的特征是以单个冒号<code>:</code>开头，跟随在基础选择器后面。</p><p><strong>但是单独使用的伪类关键字也可以对页面产生效果，</strong> 例如：</p><p>通过 <code>:focus</code> 伪类，可以让任何元素获得焦点后的颜色变为红色。</p><div class="language-css vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#B392F0;">:focus</span><span style="color:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">color</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">red</span><span style="color:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">}</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#6F42C1;">:focus</span><span style="color:#24292E;"> {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">color</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">red</span><span style="color:#24292E;">;</span></span>
|
||||
<span class="line"><span style="color:#24292E;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>更多伪类，见 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes#%E6%A0%87%E5%87%86%E4%BC%AA%E7%B1%BB%E7%B4%A2%E5%BC%95" target="_blank" rel="noreferrer">MDN - 标准伪类索引</a></p><p><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d77fd1d23840415ca645e9429237b6dc~tplv-k3u1fbpfcp-watermark.image?" alt="image.png"></p><h2 id="🔰-什么是伪元素" tabindex="-1">🔰 什么是伪元素？ <a class="header-anchor" href="#🔰-什么是伪元素" aria-label="Permalink to "🔰 什么是伪元素？""></a></h2><p>伪元素是一个<strong>附加至选择器末的关键词</strong>，允许你对被选择元素的特定部分修改样式。</p><p>与伪类相同，一个选择器中只能使用一个伪元素。但是，<strong>伪元素必须紧跟在语句中的基础选择器之后</strong>。</p><p>例如，下述代码可以给页面中每个 <code><a></code> 标签前添加一个😃表情。</p><div class="language-css vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#85E89D;">a</span><span style="color:#B392F0;">::before</span><span style="color:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">content</span><span style="color:#E1E4E8;">: </span><span style="color:#9ECBFF;">"😃"</span><span style="color:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">}</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#22863A;">a</span><span style="color:#6F42C1;">::before</span><span style="color:#24292E;"> {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">content</span><span style="color:#24292E;">: </span><span style="color:#032F62;">"😃"</span><span style="color:#24292E;">;</span></span>
|
||||
<span class="line"><span style="color:#24292E;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>相比于伪类，伪元素的使用方式更加固定，其基本语法：</p><div class="language-css vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">selector::</span><span style="color:#85E89D;">pseudo-element</span><span style="color:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">property</span><span style="color:#E1E4E8;">: value;</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">}</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">selector::</span><span style="color:#22863A;">pseudo-element</span><span style="color:#24292E;"> {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">property</span><span style="color:#24292E;">: value;</span></span>
|
||||
<span class="line"><span style="color:#24292E;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><blockquote><p><strong>注意</strong>: 在书写伪元素时，你会见到单冒号 <code>:</code> 的写法，但此为CSS2过时语法，仅用于支持IE8，大多情况请书写双冒号 <code>::</code> 来表示伪元素。</p></blockquote><p>更多伪元素见 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements#%E6%A0%87%E5%87%86%E4%BC%AA%E5%85%83%E7%B4%A0%E7%B4%A2%E5%BC%95" target="_blank" rel="noreferrer">MDN - 标准伪元素索引</a></p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/17049cd3157f4a368c98d4fcd905c064~tplv-k3u1fbpfcp-watermark.image?" alt="image.png"></p><h2 id="📌-伪类与伪元素共同使用" tabindex="-1">📌 伪类与伪元素共同使用 <a class="header-anchor" href="#📌-伪类与伪元素共同使用" aria-label="Permalink to "📌 伪类与伪元素共同使用""></a></h2><p>下面一个案例中，同时用到了伪类和伪元素：</p><blockquote><p>用CSS实现一个开关样式，hover时触发，滑块为正方形，具体大小可随意，如下图</p></blockquote><p><img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a6e4b09bb9e64989b0561d48d10a2734~tplv-k3u1fbpfcp-watermark.image?" alt="image.png"></p><blockquote><p>尽量实现如下要求，可实现一部分：</p><ol><li>开关动作均有动画过度（滑块移位、背景色）</li><li>只用一个dom元素实现</li><li>开关的高度是固定的，但宽度不固定，即宽度为未知父元素的100%，宽度始终大于高度</li></ol></blockquote><h3 id="题目解读" tabindex="-1">题目解读 <a class="header-anchor" href="#题目解读" aria-label="Permalink to "题目解读""></a></h3><p>由于只能使用一个 <code>DOM</code> 元素，而要区分滑块和背景的不同状态，故使用伪元素 <code>::before</code> 在 <code>.box</code> 内部添加一个滑块，滑块采用 <code>inline-block</code> 方式展示，并且由 <code>transition</code> 属性指定过渡动画。</p><p>对于背景也采用了 <code>transition</code> 来指定过渡动画，并且二者都通过 <code>:hover</code> 触发。</p><p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1ac690e718be445083bc67b7bbcccb7e~tplv-k3u1fbpfcp-watermark.image?" alt="image.png"></p><h3 id="实现代码" tabindex="-1">实现代码 <a class="header-anchor" href="#实现代码" aria-label="Permalink to "实现代码""></a></h3><p><code>HTML</code></p><div class="language-html vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"father"</span><span style="color:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"box"</span><span style="color:#E1E4E8;">></</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">></span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">div</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"father"</span><span style="color:#24292E;">></span></span>
|
||||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">div</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"box"</span><span style="color:#24292E;">></</span><span style="color:#22863A;">div</span><span style="color:#24292E;">></span></span>
|
||||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">div</span><span style="color:#24292E;">></span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><code>CSS</code></p><div class="language-css vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#B392F0;">.box</span><span style="color:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">height</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">50</span><span style="color:#F97583;">px</span><span style="color:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">width</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">100</span><span style="color:#F97583;">%</span><span style="color:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">background-color</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">#c2d3e4</span><span style="color:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">transition</span><span style="color:#E1E4E8;">: background-color </span><span style="color:#79B8FF;">0.25</span><span style="color:#F97583;">s</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#B392F0;">.box::before</span><span style="color:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">content</span><span style="color:#E1E4E8;">: </span><span style="color:#9ECBFF;">"b"</span><span style="color:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">color</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">white</span><span style="color:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">display</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">inline-block</span><span style="color:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">background-color</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">white</span><span style="color:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">position</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">relative</span><span style="color:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">top</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">5</span><span style="color:#F97583;">px</span><span style="color:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">left</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">5</span><span style="color:#F97583;">%</span><span style="color:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">height</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">40</span><span style="color:#F97583;">px</span><span style="color:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">width</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">35</span><span style="color:#F97583;">%</span><span style="color:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">transition</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">left</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">0.25</span><span style="color:#F97583;">s</span><span style="color:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#B392F0;">.box:hover</span><span style="color:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">background-color</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">#348fe4</span><span style="color:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#B392F0;">.box:hover::before</span><span style="color:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">left</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">60</span><span style="color:#F97583;">%</span><span style="color:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#6A737D;">/* 父元素宽度任意 */</span></span>
|
||||
<span class="line"><span style="color:#B392F0;">.father</span><span style="color:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">width</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">100</span><span style="color:#F97583;">px</span><span style="color:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">}</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#6F42C1;">.box</span><span style="color:#24292E;"> {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">height</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">50</span><span style="color:#D73A49;">px</span><span style="color:#24292E;">;</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">width</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">100</span><span style="color:#D73A49;">%</span><span style="color:#24292E;">;</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">background-color</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">#c2d3e4</span><span style="color:#24292E;">;</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">transition</span><span style="color:#24292E;">: background-color </span><span style="color:#005CC5;">0.25</span><span style="color:#D73A49;">s</span></span>
|
||||
<span class="line"><span style="color:#24292E;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#6F42C1;">.box::before</span><span style="color:#24292E;"> {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">content</span><span style="color:#24292E;">: </span><span style="color:#032F62;">"b"</span><span style="color:#24292E;">;</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">color</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">white</span><span style="color:#24292E;">;</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">display</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">inline-block</span><span style="color:#24292E;">;</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">background-color</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">white</span><span style="color:#24292E;">;</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">position</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">relative</span><span style="color:#24292E;">;</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">top</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">5</span><span style="color:#D73A49;">px</span><span style="color:#24292E;">;</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">left</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">5</span><span style="color:#D73A49;">%</span><span style="color:#24292E;">;</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">height</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">40</span><span style="color:#D73A49;">px</span><span style="color:#24292E;">;</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">width</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">35</span><span style="color:#D73A49;">%</span><span style="color:#24292E;">;</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">transition</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">left</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">0.25</span><span style="color:#D73A49;">s</span><span style="color:#24292E;">;</span></span>
|
||||
<span class="line"><span style="color:#24292E;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#6F42C1;">.box:hover</span><span style="color:#24292E;"> {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">background-color</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">#348fe4</span><span style="color:#24292E;">;</span></span>
|
||||
<span class="line"><span style="color:#24292E;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#6F42C1;">.box:hover::before</span><span style="color:#24292E;"> {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">left</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">60</span><span style="color:#D73A49;">%</span><span style="color:#24292E;">;</span></span>
|
||||
<span class="line"><span style="color:#24292E;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#6A737D;">/* 父元素宽度任意 */</span></span>
|
||||
<span class="line"><span style="color:#6F42C1;">.father</span><span style="color:#24292E;"> {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">width</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">100</span><span style="color:#D73A49;">px</span><span style="color:#24292E;">;</span></span>
|
||||
<span class="line"><span style="color:#24292E;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br></div></div><h3 id="相关链接" tabindex="-1">相关链接 <a class="header-anchor" href="#相关链接" aria-label="Permalink to "相关链接""></a></h3><p><a href="https://code.juejin.cn/pen/7088328950488760334" target="_blank" rel="noreferrer">代码片段</a></p><p><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors" target="_blank" rel="noreferrer"><code>CSS选择器</code></a></p>`,56),e=[o];function c(r,t,E,i,y,d){return n(),a("div",null,e)}const h=s(p,[["render",c]]);export{u as __pageData,h as default};
|
||||
1
assets/article_一文读懂伪类与伪元素.md.dbc07ad4.lean.js
Normal file
1
assets/article_一文读懂伪类与伪元素.md.dbc07ad4.lean.js
Normal file
@@ -0,0 +1 @@
|
||||
import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.4001cd3b.js";const u=JSON.parse('{"title":"一文读懂伪类与伪元素","description":"","frontmatter":{},"headers":[],"relativePath":"article/一文读懂伪类与伪元素.md","filePath":"article/一文读懂伪类与伪元素.md","lastUpdated":1697384672000}'),p={name:"article/一文读懂伪类与伪元素.md"},o=l("",56),e=[o];function c(r,t,E,i,y,d){return n(),a("div",null,e)}const h=s(p,[["render",c]]);export{u as __pageData,h as default};
|
||||
279
assets/article_一文读懂函数中this指向问题.md.12bfc833.js
Normal file
279
assets/article_一文读懂函数中this指向问题.md.12bfc833.js
Normal file
@@ -0,0 +1,279 @@
|
||||
import{_ as s,o as n,c as a,Q as e}from"./chunks/framework.4001cd3b.js";const h=JSON.parse('{"title":"一文读懂函数中this指向问题","description":"","frontmatter":{},"headers":[],"relativePath":"article/一文读懂函数中this指向问题.md","filePath":"article/一文读懂函数中this指向问题.md","lastUpdated":1697384672000}'),l={name:"article/一文读懂函数中this指向问题.md"},p=e(`<h1 id="一文读懂函数中this指向问题" tabindex="-1">一文读懂函数中this指向问题 <a class="header-anchor" href="#一文读懂函数中this指向问题" aria-label="Permalink to "一文读懂函数中this指向问题""></a></h1><h2 id="函数中this指向" tabindex="-1">函数中this指向 <a class="header-anchor" href="#函数中this指向" aria-label="Permalink to "函数中this指向""></a></h2><p>函数在调用时, Javascript会默认为this绑定一个值</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">// 定义一个函数</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">function foo() {</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> console.log(this)</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">}</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"></span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">// 1. 直接调用</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">foo() // Window</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"></span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">// 2. 绑定对象调用</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">const obj = { name: 'ziu', aaa: foo }</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">obj.aaa() // obj</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"></span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">// 3. 通过call/apply调用</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">foo.call('Ziu') // String {'Ziu'}</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">// 定义一个函数</span></span>
|
||||
<span class="line"><span style="color:#24292e;">function foo() {</span></span>
|
||||
<span class="line"><span style="color:#24292e;"> console.log(this)</span></span>
|
||||
<span class="line"><span style="color:#24292e;">}</span></span>
|
||||
<span class="line"><span style="color:#24292e;"></span></span>
|
||||
<span class="line"><span style="color:#24292e;">// 1. 直接调用</span></span>
|
||||
<span class="line"><span style="color:#24292e;">foo() // Window</span></span>
|
||||
<span class="line"><span style="color:#24292e;"></span></span>
|
||||
<span class="line"><span style="color:#24292e;">// 2. 绑定对象调用</span></span>
|
||||
<span class="line"><span style="color:#24292e;">const obj = { name: 'ziu', aaa: foo }</span></span>
|
||||
<span class="line"><span style="color:#24292e;">obj.aaa() // obj</span></span>
|
||||
<span class="line"><span style="color:#24292e;"></span></span>
|
||||
<span class="line"><span style="color:#24292e;">// 3. 通过call/apply调用</span></span>
|
||||
<span class="line"><span style="color:#24292e;">foo.call('Ziu') // String {'Ziu'}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><p>this的绑定:</p><ul><li>和定义的位置没有关系</li><li>和调用方式/调用位置有关系</li><li>是在运行时被绑定的</li></ul><p><strong>this始终指向最后调用它的对象</strong></p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">function foo() {</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> console.log(this)</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">}</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">foo() // Window</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"></span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">const obj = {</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> name: 'ziu',</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> bar: function () {</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> console.log(this)</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> }</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">}</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">obj.bar() // obj</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"></span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">const baz = obj.bar</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">baz() // Window</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">function foo() {</span></span>
|
||||
<span class="line"><span style="color:#24292e;"> console.log(this)</span></span>
|
||||
<span class="line"><span style="color:#24292e;">}</span></span>
|
||||
<span class="line"><span style="color:#24292e;">foo() // Window</span></span>
|
||||
<span class="line"><span style="color:#24292e;"></span></span>
|
||||
<span class="line"><span style="color:#24292e;">const obj = {</span></span>
|
||||
<span class="line"><span style="color:#24292e;"> name: 'ziu',</span></span>
|
||||
<span class="line"><span style="color:#24292e;"> bar: function () {</span></span>
|
||||
<span class="line"><span style="color:#24292e;"> console.log(this)</span></span>
|
||||
<span class="line"><span style="color:#24292e;"> }</span></span>
|
||||
<span class="line"><span style="color:#24292e;">}</span></span>
|
||||
<span class="line"><span style="color:#24292e;">obj.bar() // obj</span></span>
|
||||
<span class="line"><span style="color:#24292e;"></span></span>
|
||||
<span class="line"><span style="color:#24292e;">const baz = obj.bar</span></span>
|
||||
<span class="line"><span style="color:#24292e;">baz() // Window</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h2 id="如何改变this的指向" tabindex="-1">如何改变this的指向 <a class="header-anchor" href="#如何改变this的指向" aria-label="Permalink to "如何改变this的指向""></a></h2><h3 id="new-实例化一个函数" tabindex="-1">new 实例化一个函数 <a class="header-anchor" href="#new-实例化一个函数" aria-label="Permalink to "new 实例化一个函数""></a></h3><blockquote><p>new一个对象时发生了什么:</p><ol start="0"><li>创建一个空对象</li><li>这个空对象会被执行prototype连接</li><li>将this指向这个空对象</li><li>执行函数体中的代码</li><li>没有显式返回这个对象时 会默认返回这个对象</li></ol></blockquote><p>函数可以作为一个构造函数, 作为一个类, 可以通过new关键字将其实例化</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">function foo() {</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> console.log(this)</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> this.name = 'Ziu'</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">}</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">foo() // 直接调用的话 this为Window</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"></span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">new foo() // 通过new关键字调用 则this指向空对象</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">function foo() {</span></span>
|
||||
<span class="line"><span style="color:#24292e;"> console.log(this)</span></span>
|
||||
<span class="line"><span style="color:#24292e;"> this.name = 'Ziu'</span></span>
|
||||
<span class="line"><span style="color:#24292e;">}</span></span>
|
||||
<span class="line"><span style="color:#24292e;">foo() // 直接调用的话 this为Window</span></span>
|
||||
<span class="line"><span style="color:#24292e;"></span></span>
|
||||
<span class="line"><span style="color:#24292e;">new foo() // 通过new关键字调用 则this指向空对象</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="使用-call-apply-bind" tabindex="-1">使用 call apply bind <a class="header-anchor" href="#使用-call-apply-bind" aria-label="Permalink to "使用 call apply bind""></a></h3><p>在 JavaScript 中, 函数是对象。</p><p>JavaScript 函数有它的属性和方法。call() 和 apply() 是预定义的函数方法。</p><p>两个方法可用于调用函数，两个方法的第一个参数必须是对象本身</p><hr><p>要将<code>foo</code>函数中的<code>this</code>指向<code>obj</code>，可以通过赋值的方式：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">obj.foo = foo // 绑定</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">obj.foo() // 调用</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">obj.foo = foo // 绑定</span></span>
|
||||
<span class="line"><span style="color:#24292e;">obj.foo() // 调用</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>但是也可以通过对函数调用call / apply实现</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">var obj = {</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> name: 'Ziu'</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">}</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"></span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">function foo() {</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> console.log(this)</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">}</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"></span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">foo.call(obj) // 将foo执行时的this显式绑定到了obj上 并调用foo</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">foo.call(123) // foo的this被绑定到了 Number { 123 } 上</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">foo.call("ziu") // 绑定到了 String { "ziu" } 上</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">var obj = {</span></span>
|
||||
<span class="line"><span style="color:#24292e;"> name: 'Ziu'</span></span>
|
||||
<span class="line"><span style="color:#24292e;">}</span></span>
|
||||
<span class="line"><span style="color:#24292e;"></span></span>
|
||||
<span class="line"><span style="color:#24292e;">function foo() {</span></span>
|
||||
<span class="line"><span style="color:#24292e;"> console.log(this)</span></span>
|
||||
<span class="line"><span style="color:#24292e;">}</span></span>
|
||||
<span class="line"><span style="color:#24292e;"></span></span>
|
||||
<span class="line"><span style="color:#24292e;">foo.call(obj) // 将foo执行时的this显式绑定到了obj上 并调用foo</span></span>
|
||||
<span class="line"><span style="color:#24292e;">foo.call(123) // foo的this被绑定到了 Number { 123 } 上</span></span>
|
||||
<span class="line"><span style="color:#24292e;">foo.call("ziu") // 绑定到了 String { "ziu" } 上</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h4 id="包装类对象" tabindex="-1">包装类对象 <a class="header-anchor" href="#包装类对象" aria-label="Permalink to "包装类对象""></a></h4><p>当我们直接使用类似：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">"ZiuChen".length // String.length</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">"ZiuChen".length // String.length</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>的语句时，<code>JS</code>会为字符串 <code>ZiuChen</code> 包装一个对象，随后在这个对象上调用 <code>.length</code> 属性</p><h4 id="call和apply的区别" tabindex="-1">call和apply的区别 <a class="header-anchor" href="#call和apply的区别" aria-label="Permalink to "call和apply的区别""></a></h4><ul><li><p>相同点：第一个参数都是相同的，要求传入一个对象</p><ul><li>在函数调用时，会将this绑定到这个传入的对象上</li></ul></li><li><p>不同点：后面的参数</p><ul><li>apply 传入的是一个数组</li><li>call 传入的是参数列表</li></ul></li></ul><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">function foo(name, age, height) {</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> console.log(this)</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">}</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"></span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">foo('Ziu', 18, 1.88)</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"></span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">foo.apply('targetThis', 'Ziu', 18, 1.88)</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"></span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">foo.call('targetThis', ['Ziu', 18, 1.88])</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">function foo(name, age, height) {</span></span>
|
||||
<span class="line"><span style="color:#24292e;"> console.log(this)</span></span>
|
||||
<span class="line"><span style="color:#24292e;">}</span></span>
|
||||
<span class="line"><span style="color:#24292e;"></span></span>
|
||||
<span class="line"><span style="color:#24292e;">foo('Ziu', 18, 1.88)</span></span>
|
||||
<span class="line"><span style="color:#24292e;"></span></span>
|
||||
<span class="line"><span style="color:#24292e;">foo.apply('targetThis', 'Ziu', 18, 1.88)</span></span>
|
||||
<span class="line"><span style="color:#24292e;"></span></span>
|
||||
<span class="line"><span style="color:#24292e;">foo.call('targetThis', ['Ziu', 18, 1.88])</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>当我们需要给一个带参数的函数通过call/apply的方式绑定this时，就需要使用到call/apply的第二个入参了。</p><h4 id="参数列表" tabindex="-1">参数列表 <a class="header-anchor" href="#参数列表" aria-label="Permalink to "参数列表""></a></h4><p>当传入函数的参数有多个时，可以通过<code>...args</code>将参数合并到一个数组中去</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">function foo(...args) {</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> console.log(args)</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">}</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"></span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">foo("Ziu", 18, 1.88) // ["Ziu", 18, 1.88]</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">function foo(...args) {</span></span>
|
||||
<span class="line"><span style="color:#24292e;"> console.log(args)</span></span>
|
||||
<span class="line"><span style="color:#24292e;">}</span></span>
|
||||
<span class="line"><span style="color:#24292e;"></span></span>
|
||||
<span class="line"><span style="color:#24292e;">foo("Ziu", 18, 1.88) // ["Ziu", 18, 1.88]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h4 id="bind绑定" tabindex="-1">bind绑定 <a class="header-anchor" href="#bind绑定" aria-label="Permalink to "bind绑定""></a></h4><p>如果我们希望：在每次调用<code>foo</code>时，都能将<code>obj</code>绑定到<code>foo</code>的<code>this</code>上，那么就需要用到<code>bind</code></p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">// 将obj绑定到foo上</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">const fun = foo.bind(obj)</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">// 在后续每次调用foo时, foo内的this都将指向obj</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">fun() // obj</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">fun() // obj</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">// 将obj绑定到foo上</span></span>
|
||||
<span class="line"><span style="color:#24292e;">const fun = foo.bind(obj)</span></span>
|
||||
<span class="line"><span style="color:#24292e;">// 在后续每次调用foo时, foo内的this都将指向obj</span></span>
|
||||
<span class="line"><span style="color:#24292e;">fun() // obj</span></span>
|
||||
<span class="line"><span style="color:#24292e;">fun() // obj</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p><code>bind()</code>方法将创建一个新的函数，当被调用时，将其<code>this</code>关键字</p><h2 id="箭头函数" tabindex="-1">箭头函数 <a class="header-anchor" href="#箭头函数" aria-label="Permalink to "箭头函数""></a></h2><p>箭头函数是<code>ES6</code>新增的编写函数的方式，更简洁。</p><ul><li>箭头函数不会绑定<code>this</code>、<code>argument</code>属性</li><li>箭头函数不能作为构造函数来使用（不能与<code>new</code>同用，会报错）</li></ul><h3 id="箭头函数中的this" tabindex="-1">箭头函数中的this <a class="header-anchor" href="#箭头函数中的this" aria-label="Permalink to "箭头函数中的this""></a></h3><p>在箭头函数中是没有<code>this</code>的：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">const foo = () => {</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> console.log(this)</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">}</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">foo() // window</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">console.log(this) // window</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">const foo = () => {</span></span>
|
||||
<span class="line"><span style="color:#24292e;"> console.log(this)</span></span>
|
||||
<span class="line"><span style="color:#24292e;">}</span></span>
|
||||
<span class="line"><span style="color:#24292e;">foo() // window</span></span>
|
||||
<span class="line"><span style="color:#24292e;">console.log(this) // window</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>之所以找到了<code>Window</code>对象，是因为在调用<code>foo()</code>时，函数内部作用域并没有找到<code>this</code>，转而向上层作用域找<code>this</code></p><p>因此找到了顶层的全局<code>this</code>，也即<code>Window</code>对象</p><h3 id="箭头函数中this的查找规则" tabindex="-1">箭头函数中this的查找规则 <a class="header-anchor" href="#箭头函数中this的查找规则" aria-label="Permalink to "箭头函数中this的查找规则""></a></h3><p>检查以下代码：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">const obj = {</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> name: "obj",</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> foo: function () {</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> const bar = () => {</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> console.log(this)</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> }</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> return bar</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> }</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">}</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">const fn = obj.foo()</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">fn() // obj</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">const obj = {</span></span>
|
||||
<span class="line"><span style="color:#24292e;"> name: "obj",</span></span>
|
||||
<span class="line"><span style="color:#24292e;"> foo: function () {</span></span>
|
||||
<span class="line"><span style="color:#24292e;"> const bar = () => {</span></span>
|
||||
<span class="line"><span style="color:#24292e;"> console.log(this)</span></span>
|
||||
<span class="line"><span style="color:#24292e;"> }</span></span>
|
||||
<span class="line"><span style="color:#24292e;"> return bar</span></span>
|
||||
<span class="line"><span style="color:#24292e;"> }</span></span>
|
||||
<span class="line"><span style="color:#24292e;">}</span></span>
|
||||
<span class="line"><span style="color:#24292e;">const fn = obj.foo()</span></span>
|
||||
<span class="line"><span style="color:#24292e;">fn() // obj</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p>代码执行完毕，控制台输出<code>this</code>值为<code>obj</code>对象，这是为什么？</p><p>箭头函数中没有<code>this</code>，故会向上层作用域寻找<code>this</code>，<code>bar</code>的上层作用域为函数<code>foo</code>，而函数<code>foo</code>的<code>this</code>由其调用决定</p><p>调用<code>foo</code>函数的为<code>obj</code>对象，故内部箭头函数中的<code>this</code>指向的是<code>obj</code></p><p>检查以下代码：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">const obj = {</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> name: "obj",</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> foo: () => {</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> const bar = () => {</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> console.log(this)</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> }</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> return bar</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> }</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">}</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">const fn = obj.foo()</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">fn() // Window</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">const obj = {</span></span>
|
||||
<span class="line"><span style="color:#24292e;"> name: "obj",</span></span>
|
||||
<span class="line"><span style="color:#24292e;"> foo: () => {</span></span>
|
||||
<span class="line"><span style="color:#24292e;"> const bar = () => {</span></span>
|
||||
<span class="line"><span style="color:#24292e;"> console.log(this)</span></span>
|
||||
<span class="line"><span style="color:#24292e;"> }</span></span>
|
||||
<span class="line"><span style="color:#24292e;"> return bar</span></span>
|
||||
<span class="line"><span style="color:#24292e;"> }</span></span>
|
||||
<span class="line"><span style="color:#24292e;">}</span></span>
|
||||
<span class="line"><span style="color:#24292e;">const fn = obj.foo()</span></span>
|
||||
<span class="line"><span style="color:#24292e;">fn() // Window</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p>和上面的代码不同之处在于：<code>foo</code>也是由箭头函数定义的，<code>bar</code>向上找不到<code>foo</code>的<code>this</code>，故而继续向上，找到了全局<code>this</code>，也即<code>Window</code>对象</p><h3 id="严格模式" tabindex="-1">严格模式 <a class="header-anchor" href="#严格模式" aria-label="Permalink to "严格模式""></a></h3><ul><li>在严格模式下，全局的<code>this</code>不是<code>Window</code>对象，而是<code>undefined</code>。</li><li>在 JavaScript 严格模式(strict mode)下, 在调用函数时第一个参数会成为 this 的值， 即使该参数不是一个对象。</li><li>在 JavaScript 非严格模式(non-strict mode)下, 如果第一个参数的值是 null 或 undefined, 它将使用全局对象替代。</li></ul><h2 id="this面试题" tabindex="-1">this面试题 <a class="header-anchor" href="#this面试题" aria-label="Permalink to "this面试题""></a></h2><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">var name = 'window'</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"></span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">var person = {</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> name: 'person',</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> sayName: function () {</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> console.log(this.name)</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> }</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">}</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"></span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">function sayName() {</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> var sss = person.sayName</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"></span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> sss() // 默认绑定: window</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"></span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> person.sayName(); // 隐式绑定: person</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"></span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> (person.sayName)() // 隐式绑定: person, 本质与上一行代码相同</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"></span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> ;(person.sayName = person.sayName)() // 间接调用: window</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">}</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"></span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">sayName()</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">var name = 'window'</span></span>
|
||||
<span class="line"><span style="color:#24292e;"></span></span>
|
||||
<span class="line"><span style="color:#24292e;">var person = {</span></span>
|
||||
<span class="line"><span style="color:#24292e;"> name: 'person',</span></span>
|
||||
<span class="line"><span style="color:#24292e;"> sayName: function () {</span></span>
|
||||
<span class="line"><span style="color:#24292e;"> console.log(this.name)</span></span>
|
||||
<span class="line"><span style="color:#24292e;"> }</span></span>
|
||||
<span class="line"><span style="color:#24292e;">}</span></span>
|
||||
<span class="line"><span style="color:#24292e;"></span></span>
|
||||
<span class="line"><span style="color:#24292e;">function sayName() {</span></span>
|
||||
<span class="line"><span style="color:#24292e;"> var sss = person.sayName</span></span>
|
||||
<span class="line"><span style="color:#24292e;"></span></span>
|
||||
<span class="line"><span style="color:#24292e;"> sss() // 默认绑定: window</span></span>
|
||||
<span class="line"><span style="color:#24292e;"></span></span>
|
||||
<span class="line"><span style="color:#24292e;"> person.sayName(); // 隐式绑定: person</span></span>
|
||||
<span class="line"><span style="color:#24292e;"></span></span>
|
||||
<span class="line"><span style="color:#24292e;"> (person.sayName)() // 隐式绑定: person, 本质与上一行代码相同</span></span>
|
||||
<span class="line"><span style="color:#24292e;"></span></span>
|
||||
<span class="line"><span style="color:#24292e;"> ;(person.sayName = person.sayName)() // 间接调用: window</span></span>
|
||||
<span class="line"><span style="color:#24292e;">}</span></span>
|
||||
<span class="line"><span style="color:#24292e;"></span></span>
|
||||
<span class="line"><span style="color:#24292e;">sayName()</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">var name = 'window'</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"></span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">var person1 = {</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> name: 'person1',</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> foo1: function () {</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> console.log(this.name)</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> },</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> foo2: () => console.log(this.name),</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> foo3: function () {</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> return function () {</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> console.log(this.name)</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> }</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> },</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> foo4: function () {</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> return () => console.log(this.name)</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> }</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">}</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"></span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">var person2 = {</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"> name: 'person2'</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">}</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"></span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">person1.foo1() // 隐式绑定: person1</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">person1.foo1.call(person2) // 显式绑定: person2</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"></span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">person1.foo2() // 上层作用域: window</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">person1.foo2.call(person2) // 上层作用域: window</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"></span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">person1.foo3()() // 默认绑定: window</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">person1.foo3.call(person2)() // 默认绑定: window</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">person1.foo3().call(person2) // 显式绑定: person2</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;"></span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">person1.foo4()() // 隐式绑定: person1</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">person1.foo4.call(person2)() // 显式绑定: person2</span></span>
|
||||
<span class="line"><span style="color:#e1e4e8;">person1.foo4().call(person2) // 隐式绑定: person1</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">var name = 'window'</span></span>
|
||||
<span class="line"><span style="color:#24292e;"></span></span>
|
||||
<span class="line"><span style="color:#24292e;">var person1 = {</span></span>
|
||||
<span class="line"><span style="color:#24292e;"> name: 'person1',</span></span>
|
||||
<span class="line"><span style="color:#24292e;"> foo1: function () {</span></span>
|
||||
<span class="line"><span style="color:#24292e;"> console.log(this.name)</span></span>
|
||||
<span class="line"><span style="color:#24292e;"> },</span></span>
|
||||
<span class="line"><span style="color:#24292e;"> foo2: () => console.log(this.name),</span></span>
|
||||
<span class="line"><span style="color:#24292e;"> foo3: function () {</span></span>
|
||||
<span class="line"><span style="color:#24292e;"> return function () {</span></span>
|
||||
<span class="line"><span style="color:#24292e;"> console.log(this.name)</span></span>
|
||||
<span class="line"><span style="color:#24292e;"> }</span></span>
|
||||
<span class="line"><span style="color:#24292e;"> },</span></span>
|
||||
<span class="line"><span style="color:#24292e;"> foo4: function () {</span></span>
|
||||
<span class="line"><span style="color:#24292e;"> return () => console.log(this.name)</span></span>
|
||||
<span class="line"><span style="color:#24292e;"> }</span></span>
|
||||
<span class="line"><span style="color:#24292e;">}</span></span>
|
||||
<span class="line"><span style="color:#24292e;"></span></span>
|
||||
<span class="line"><span style="color:#24292e;">var person2 = {</span></span>
|
||||
<span class="line"><span style="color:#24292e;"> name: 'person2'</span></span>
|
||||
<span class="line"><span style="color:#24292e;">}</span></span>
|
||||
<span class="line"><span style="color:#24292e;"></span></span>
|
||||
<span class="line"><span style="color:#24292e;">person1.foo1() // 隐式绑定: person1</span></span>
|
||||
<span class="line"><span style="color:#24292e;">person1.foo1.call(person2) // 显式绑定: person2</span></span>
|
||||
<span class="line"><span style="color:#24292e;"></span></span>
|
||||
<span class="line"><span style="color:#24292e;">person1.foo2() // 上层作用域: window</span></span>
|
||||
<span class="line"><span style="color:#24292e;">person1.foo2.call(person2) // 上层作用域: window</span></span>
|
||||
<span class="line"><span style="color:#24292e;"></span></span>
|
||||
<span class="line"><span style="color:#24292e;">person1.foo3()() // 默认绑定: window</span></span>
|
||||
<span class="line"><span style="color:#24292e;">person1.foo3.call(person2)() // 默认绑定: window</span></span>
|
||||
<span class="line"><span style="color:#24292e;">person1.foo3().call(person2) // 显式绑定: person2</span></span>
|
||||
<span class="line"><span style="color:#24292e;"></span></span>
|
||||
<span class="line"><span style="color:#24292e;">person1.foo4()() // 隐式绑定: person1</span></span>
|
||||
<span class="line"><span style="color:#24292e;">person1.foo4.call(person2)() // 显式绑定: person2</span></span>
|
||||
<span class="line"><span style="color:#24292e;">person1.foo4().call(person2) // 隐式绑定: person1</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br></div></div>`,59),o=[p];function c(i,r,t,b,d,u){return n(),a("div",null,o)}const m=s(l,[["render",c]]);export{h as __pageData,m as default};
|
||||
1
assets/article_一文读懂函数中this指向问题.md.12bfc833.lean.js
Normal file
1
assets/article_一文读懂函数中this指向问题.md.12bfc833.lean.js
Normal file
@@ -0,0 +1 @@
|
||||
import{_ as s,o as n,c as a,Q as e}from"./chunks/framework.4001cd3b.js";const h=JSON.parse('{"title":"一文读懂函数中this指向问题","description":"","frontmatter":{},"headers":[],"relativePath":"article/一文读懂函数中this指向问题.md","filePath":"article/一文读懂函数中this指向问题.md","lastUpdated":1697384672000}'),l={name:"article/一文读懂函数中this指向问题.md"},p=e("",59),o=[p];function c(i,r,t,b,d,u){return n(),a("div",null,o)}const m=s(l,[["render",c]]);export{h as __pageData,m as default};
|
||||
@@ -1,140 +0,0 @@
|
||||
import{_ as s,o as n,c as a,S as l}from"./chunks/framework.04e6e156.js";const A=JSON.parse('{"title":"一文读懂函数中this指向问题","description":"","frontmatter":{},"headers":[],"relativePath":"article/一文读懂函数中this指向问题.md","filePath":"article/一文读懂函数中this指向问题.md","lastUpdated":1697042822000}'),e={name:"article/一文读懂函数中this指向问题.md"},p=l(`<h1 id="一文读懂函数中this指向问题" tabindex="-1">一文读懂函数中this指向问题 <a class="header-anchor" href="#一文读懂函数中this指向问题" aria-label="Permalink to "一文读懂函数中this指向问题""></a></h1><h2 id="函数中this指向" tabindex="-1">函数中this指向 <a class="header-anchor" href="#函数中this指向" aria-label="Permalink to "函数中this指向""></a></h2><p>函数在调用时, Javascript会默认为this绑定一个值</p><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">// 定义一个函数</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">function foo() {</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> console.log(this)</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">}</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">// 1. 直接调用</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">foo() // Window</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">// 2. 绑定对象调用</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">const obj = { name: 'ziu', aaa: foo }</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">obj.aaa() // obj</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">// 3. 通过call/apply调用</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">foo.call('Ziu') // String {'Ziu'}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><p>this的绑定:</p><ul><li>和定义的位置没有关系</li><li>和调用方式/调用位置有关系</li><li>是在运行时被绑定的</li></ul><p><strong>this始终指向最后调用它的对象</strong></p><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">function foo() {</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> console.log(this)</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">}</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">foo() // Window</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">const obj = {</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> name: 'ziu',</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> bar: function () {</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> console.log(this)</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> }</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">}</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">obj.bar() // obj</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">const baz = obj.bar</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">baz() // Window</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h2 id="如何改变this的指向" tabindex="-1">如何改变this的指向 <a class="header-anchor" href="#如何改变this的指向" aria-label="Permalink to "如何改变this的指向""></a></h2><h3 id="new-实例化一个函数" tabindex="-1">new 实例化一个函数 <a class="header-anchor" href="#new-实例化一个函数" aria-label="Permalink to "new 实例化一个函数""></a></h3><blockquote><p>new一个对象时发生了什么:</p><ol start="0"><li>创建一个空对象</li><li>这个空对象会被执行prototype连接</li><li>将this指向这个空对象</li><li>执行函数体中的代码</li><li>没有显式返回这个对象时 会默认返回这个对象</li></ol></blockquote><p>函数可以作为一个构造函数, 作为一个类, 可以通过new关键字将其实例化</p><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">function foo() {</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> console.log(this)</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> this.name = 'Ziu'</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">}</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">foo() // 直接调用的话 this为Window</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">new foo() // 通过new关键字调用 则this指向空对象</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="使用-call-apply-bind" tabindex="-1">使用 call apply bind <a class="header-anchor" href="#使用-call-apply-bind" aria-label="Permalink to "使用 call apply bind""></a></h3><p>在 JavaScript 中, 函数是对象。</p><p>JavaScript 函数有它的属性和方法。call() 和 apply() 是预定义的函数方法。</p><p>两个方法可用于调用函数，两个方法的第一个参数必须是对象本身</p><hr><p>要将<code>foo</code>函数中的<code>this</code>指向<code>obj</code>，可以通过赋值的方式：</p><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">obj.foo = foo // 绑定</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">obj.foo() // 调用</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>但是也可以通过对函数调用call / apply实现</p><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">var obj = {</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> name: 'Ziu'</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">}</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">function foo() {</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> console.log(this)</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">}</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">foo.call(obj) // 将foo执行时的this显式绑定到了obj上 并调用foo</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">foo.call(123) // foo的this被绑定到了 Number { 123 } 上</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">foo.call("ziu") // 绑定到了 String { "ziu" } 上</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h4 id="包装类对象" tabindex="-1">包装类对象 <a class="header-anchor" href="#包装类对象" aria-label="Permalink to "包装类对象""></a></h4><p>当我们直接使用类似：</p><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">"ZiuChen".length // String.length</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>的语句时，<code>JS</code>会为字符串 <code>ZiuChen</code> 包装一个对象，随后在这个对象上调用 <code>.length</code> 属性</p><h4 id="call和apply的区别" tabindex="-1">call和apply的区别 <a class="header-anchor" href="#call和apply的区别" aria-label="Permalink to "call和apply的区别""></a></h4><ul><li><p>相同点：第一个参数都是相同的，要求传入一个对象</p><ul><li>在函数调用时，会将this绑定到这个传入的对象上</li></ul></li><li><p>不同点：后面的参数</p><ul><li>apply 传入的是一个数组</li><li>call 传入的是参数列表</li></ul></li></ul><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">function foo(name, age, height) {</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> console.log(this)</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">}</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">foo('Ziu', 18, 1.88)</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">foo.apply('targetThis', 'Ziu', 18, 1.88)</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">foo.call('targetThis', ['Ziu', 18, 1.88])</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>当我们需要给一个带参数的函数通过call/apply的方式绑定this时，就需要使用到call/apply的第二个入参了。</p><h4 id="参数列表" tabindex="-1">参数列表 <a class="header-anchor" href="#参数列表" aria-label="Permalink to "参数列表""></a></h4><p>当传入函数的参数有多个时，可以通过<code>...args</code>将参数合并到一个数组中去</p><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">function foo(...args) {</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> console.log(args)</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">}</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">foo("Ziu", 18, 1.88) // ["Ziu", 18, 1.88]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h4 id="bind绑定" tabindex="-1">bind绑定 <a class="header-anchor" href="#bind绑定" aria-label="Permalink to "bind绑定""></a></h4><p>如果我们希望：在每次调用<code>foo</code>时，都能将<code>obj</code>绑定到<code>foo</code>的<code>this</code>上，那么就需要用到<code>bind</code></p><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">// 将obj绑定到foo上</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">const fun = foo.bind(obj)</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">// 在后续每次调用foo时, foo内的this都将指向obj</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">fun() // obj</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">fun() // obj</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p><code>bind()</code>方法将创建一个新的函数，当被调用时，将其<code>this</code>关键字</p><h2 id="箭头函数" tabindex="-1">箭头函数 <a class="header-anchor" href="#箭头函数" aria-label="Permalink to "箭头函数""></a></h2><p>箭头函数是<code>ES6</code>新增的编写函数的方式，更简洁。</p><ul><li>箭头函数不会绑定<code>this</code>、<code>argument</code>属性</li><li>箭头函数不能作为构造函数来使用（不能与<code>new</code>同用，会报错）</li></ul><h3 id="箭头函数中的this" tabindex="-1">箭头函数中的this <a class="header-anchor" href="#箭头函数中的this" aria-label="Permalink to "箭头函数中的this""></a></h3><p>在箭头函数中是没有<code>this</code>的：</p><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">const foo = () => {</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> console.log(this)</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">}</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">foo() // window</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console.log(this) // window</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>之所以找到了<code>Window</code>对象，是因为在调用<code>foo()</code>时，函数内部作用域并没有找到<code>this</code>，转而向上层作用域找<code>this</code></p><p>因此找到了顶层的全局<code>this</code>，也即<code>Window</code>对象</p><h3 id="箭头函数中this的查找规则" tabindex="-1">箭头函数中this的查找规则 <a class="header-anchor" href="#箭头函数中this的查找规则" aria-label="Permalink to "箭头函数中this的查找规则""></a></h3><p>检查以下代码：</p><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">const obj = {</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> name: "obj",</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> foo: function () {</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> const bar = () => {</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> console.log(this)</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> }</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> return bar</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> }</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">}</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">const fn = obj.foo()</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">fn() // obj</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p>代码执行完毕，控制台输出<code>this</code>值为<code>obj</code>对象，这是为什么？</p><p>箭头函数中没有<code>this</code>，故会向上层作用域寻找<code>this</code>，<code>bar</code>的上层作用域为函数<code>foo</code>，而函数<code>foo</code>的<code>this</code>由其调用决定</p><p>调用<code>foo</code>函数的为<code>obj</code>对象，故内部箭头函数中的<code>this</code>指向的是<code>obj</code></p><p>检查以下代码：</p><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">const obj = {</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> name: "obj",</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> foo: () => {</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> const bar = () => {</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> console.log(this)</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> }</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> return bar</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> }</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">}</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">const fn = obj.foo()</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">fn() // Window</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p>和上面的代码不同之处在于：<code>foo</code>也是由箭头函数定义的，<code>bar</code>向上找不到<code>foo</code>的<code>this</code>，故而继续向上，找到了全局<code>this</code>，也即<code>Window</code>对象</p><h3 id="严格模式" tabindex="-1">严格模式 <a class="header-anchor" href="#严格模式" aria-label="Permalink to "严格模式""></a></h3><ul><li>在严格模式下，全局的<code>this</code>不是<code>Window</code>对象，而是<code>undefined</code>。</li><li>在 JavaScript 严格模式(strict mode)下, 在调用函数时第一个参数会成为 this 的值， 即使该参数不是一个对象。</li><li>在 JavaScript 非严格模式(non-strict mode)下, 如果第一个参数的值是 null 或 undefined, 它将使用全局对象替代。</li></ul><h2 id="this面试题" tabindex="-1">this面试题 <a class="header-anchor" href="#this面试题" aria-label="Permalink to "this面试题""></a></h2><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">var name = 'window'</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">var person = {</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> name: 'person',</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> sayName: function () {</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> console.log(this.name)</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> }</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">}</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">function sayName() {</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> var sss = person.sayName</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> sss() // 默认绑定: window</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> person.sayName(); // 隐式绑定: person</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> (person.sayName)() // 隐式绑定: person, 本质与上一行代码相同</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ;(person.sayName = person.sayName)() // 间接调用: window</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">}</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">sayName()</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">var name = 'window'</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">var person1 = {</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> name: 'person1',</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> foo1: function () {</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> console.log(this.name)</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> },</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> foo2: () => console.log(this.name),</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> foo3: function () {</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> return function () {</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> console.log(this.name)</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> }</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> },</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> foo4: function () {</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> return () => console.log(this.name)</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> }</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">}</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">var person2 = {</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> name: 'person2'</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">}</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">person1.foo1() // 隐式绑定: person1</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">person1.foo1.call(person2) // 显式绑定: person2</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">person1.foo2() // 上层作用域: window</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">person1.foo2.call(person2) // 上层作用域: window</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">person1.foo3()() // 默认绑定: window</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">person1.foo3.call(person2)() // 默认绑定: window</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">person1.foo3().call(person2) // 显式绑定: person2</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">person1.foo4()() // 隐式绑定: person1</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">person1.foo4.call(person2)() // 显式绑定: person2</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">person1.foo4().call(person2) // 隐式绑定: person1</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br></div></div>`,59),o=[p];function c(r,i,t,b,u,C){return n(),a("div",null,o)}const m=s(e,[["render",c]]);export{A as __pageData,m as default};
|
||||
@@ -1 +0,0 @@
|
||||
import{_ as s,o as n,c as a,S as l}from"./chunks/framework.04e6e156.js";const A=JSON.parse('{"title":"一文读懂函数中this指向问题","description":"","frontmatter":{},"headers":[],"relativePath":"article/一文读懂函数中this指向问题.md","filePath":"article/一文读懂函数中this指向问题.md","lastUpdated":1697042822000}'),e={name:"article/一文读懂函数中this指向问题.md"},p=l("",59),o=[p];function c(r,i,t,b,u,C){return n(),a("div",null,o)}const m=s(e,[["render",c]]);export{A as __pageData,m as default};
|
||||
177
assets/article_从0实现一个年度报告.md.3f21cc7d.js
Normal file
177
assets/article_从0实现一个年度报告.md.3f21cc7d.js
Normal file
File diff suppressed because one or more lines are too long
1
assets/article_从0实现一个年度报告.md.3f21cc7d.lean.js
Normal file
1
assets/article_从0实现一个年度报告.md.3f21cc7d.lean.js
Normal file
@@ -0,0 +1 @@
|
||||
import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.4001cd3b.js";const d=JSON.parse('{"title":"从0实现一个年度报告","description":"","frontmatter":{},"headers":[],"relativePath":"article/从0实现一个年度报告.md","filePath":"article/从0实现一个年度报告.md","lastUpdated":1697384672000}'),p={name:"article/从0实现一个年度报告.md"},o=l("",59),e=[o];function t(c,r,E,y,i,u){return n(),a("div",null,e)}const q=s(p,[["render",t]]);export{d as __pageData,q as default};
|
||||
File diff suppressed because one or more lines are too long
@@ -1 +0,0 @@
|
||||
import{_ as s,o as a,c as n,S as l}from"./chunks/framework.04e6e156.js";const u=JSON.parse('{"title":"从0实现一个年度报告","description":"","frontmatter":{},"headers":[],"relativePath":"article/从0实现一个年度报告.md","filePath":"article/从0实现一个年度报告.md","lastUpdated":1697042822000}'),p={name:"article/从0实现一个年度报告.md"},o=l("",59),e=[o];function t(c,r,F,D,y,i){return a(),n("div",null,e)}const A=s(p,[["render",t]]);export{u as __pageData,A as default};
|
||||
@@ -1,68 +0,0 @@
|
||||
import{_ as s,o as n,c as a,S as l}from"./chunks/framework.04e6e156.js";const C=JSON.parse('{"title":"彻底搞懂对象的数据属性描述符、存储属性描述符","description":"","frontmatter":{},"headers":[],"relativePath":"article/彻底搞懂对象的数据属性描述符、存储属性描述符.md","filePath":"article/彻底搞懂对象的数据属性描述符、存储属性描述符.md","lastUpdated":1697042822000}'),p={name:"article/彻底搞懂对象的数据属性描述符、存储属性描述符.md"},o=l(`<h1 id="彻底搞懂对象的数据属性描述符、存储属性描述符" tabindex="-1">彻底搞懂对象的数据属性描述符、存储属性描述符 <a class="header-anchor" href="#彻底搞懂对象的数据属性描述符、存储属性描述符" aria-label="Permalink to "彻底搞懂对象的数据属性描述符、存储属性描述符""></a></h1><h2 id="属性描述符" tabindex="-1">属性描述符 <a class="header-anchor" href="#属性描述符" aria-label="Permalink to "属性描述符""></a></h2><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> obj </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">ziu</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">age</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">18</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> Object</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">defineProperty</span><span style="color:#A6ACCD;">(obj</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">height</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">value</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1.88</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(obj) </span><span style="color:#676E95;font-style:italic;">// { name: 'ziu', age: 18 }</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p><code>obj</code>对象的控制台输出中，并没有<code>defineProperty</code>新定义的<code>height</code>，这是因为不可枚举的（不可遍历的），在打印时并没有和其他属性一起输出。这个属性已经被添加到对象中，只不过不可见。</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(obj</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">height) </span><span style="color:#676E95;font-style:italic;">// 1.88</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>属性描述符是一个对象，根据功能不同，可以分为两类：<strong>数据属性描述符</strong>和<strong>存储属性描述符</strong></p><h3 id="数据属性描述符" tabindex="-1">数据属性描述符 <a class="header-anchor" href="#数据属性描述符" aria-label="Permalink to "数据属性描述符""></a></h3><ul><li>数据属性描述符（Data Properties） <ul><li><code>value</code>该属性对应的值，默认<code>undefined</code></li><li><code>configurable</code>该属性描述符是否可被改变、是否可被删除，默认为<code>false</code></li><li><code>enumerable</code>该属性是否可被枚举，默认为<code>false</code></li><li><code>writable</code>该属性是否可以被写入新的值，默认为<code>false</code></li></ul></li></ul><p><strong>没有用属性描述符定义的对象属性（直接使用<code>.</code>语法）</strong>，也是具有以上属性描述符的特性的，<code>value</code>值为属性被赋值的值，其他<code>configurable</code>、<code>emumerable</code>、<code>writable</code>默认值都为<code>true</code>。<strong>注意，属性描述符区全为小写。</strong></p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> obj </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">ziu</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">age</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">18</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 数据属性描述符</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> Object</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">defineProperty</span><span style="color:#A6ACCD;">(obj</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">address</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">value</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">Beijing</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 该属性对应的值，默认为undefine</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">configurable</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 该属性描述符是否可被改变、是否可被删除，默认为false</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">enumerable</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 该属性是否可被枚举，默认为false</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">writable</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 该属性是否可以被写入新的值，默认为false</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// configurable</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">delete</span><span style="color:#A6ACCD;"> obj</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">address</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> obj</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">address </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">Shanghai</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(obj</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">address) </span><span style="color:#676E95;font-style:italic;">// Beijing</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// enumerable</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(obj)</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">for</span><span style="color:#A6ACCD;">(</span><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> key </span><span style="color:#89DDFF;">in</span><span style="color:#A6ACCD;"> obj) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">key</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(Object</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">keys</span><span style="color:#A6ACCD;">(obj))</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// writable</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> obj</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">address </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">Tianjin</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(obj</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">address)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br></div></div><h3 id="存储属性描述符" tabindex="-1">存储属性描述符 <a class="header-anchor" href="#存储属性描述符" aria-label="Permalink to "存储属性描述符""></a></h3><ul><li>存储属性描述符（Accessor Properties） <ul><li><code>get</code>当访问该属性时，会调用此函数，默认为<code>undefined</code>。</li><li><code>set</code>当属性值被修改时，会调用此函数，默认为<code>undefined</code>。</li></ul></li></ul><p>注意，<code>get</code>、<code>set</code>描述符与<code>vaule</code>、<code>writable</code>描述符不共存。</p><table><thead><tr><th></th><th><code>configurable</code></th><th><code>enumerable</code></th><th><code>value</code></th><th><code>writable</code></th><th><code>get</code></th><th><code>set</code></th></tr></thead><tbody><tr><td>数据描述符</td><td>可以</td><td>可以</td><td>可以</td><td>可以</td><td><strong>不可以</strong></td><td><strong>不可以</strong></td></tr><tr><td>存取描述符</td><td>可以</td><td>可以</td><td><strong>不可以</strong></td><td><strong>不可以</strong></td><td>可以</td><td>可以</td></tr></tbody></table><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> obj </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">ziu</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">age</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">18</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">_address</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">Beijing</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// Accessor Properties</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> Object</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">defineProperty</span><span style="color:#A6ACCD;">(obj</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">address</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">enumerable</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">configurable</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// value: "Beijing",</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// writable: true,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">get</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">_address</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">set</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">val</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">_address</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">val</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(obj</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">address) </span><span style="color:#676E95;font-style:italic;">// 调用getter() Beijing</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> obj</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">address </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">Shanghai</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 调用setter()</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(obj</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">_address) </span><span style="color:#676E95;font-style:italic;">// Shanghai</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div><h3 id="应用场景" tabindex="-1">应用场景 <a class="header-anchor" href="#应用场景" aria-label="Permalink to "应用场景""></a></h3><ol><li>隐藏某个私有属性，希望直接被外界使用和赋值。（下划线开头的变量一般为私有属性）</li><li>获取某个属性被访问或赋值的时刻，可以设置伴随被访问或被赋值时，执行其他函数。</li></ol><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">Object</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">defineProperty</span><span style="color:#A6ACCD;">(obj</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">address</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">get</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">bar</span><span style="color:#F07178;">()</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">_address</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">set</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">val</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">foo</span><span style="color:#F07178;">()</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">_address</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">val</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(obj</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">address) </span><span style="color:#676E95;font-style:italic;">// got address value once</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> obj</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">address </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">Shanghai</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// resetted address value once</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">bar</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">got address value once</span><span style="color:#89DDFF;">"</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">foo</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">resetted address value once</span><span style="color:#89DDFF;">"</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div>`,18),e=[o];function t(c,r,D,y,F,i){return n(),a("div",null,e)}const d=s(p,[["render",t]]);export{C as __pageData,d as default};
|
||||
@@ -1 +0,0 @@
|
||||
import{_ as s,o as n,c as a,S as l}from"./chunks/framework.04e6e156.js";const C=JSON.parse('{"title":"彻底搞懂对象的数据属性描述符、存储属性描述符","description":"","frontmatter":{},"headers":[],"relativePath":"article/彻底搞懂对象的数据属性描述符、存储属性描述符.md","filePath":"article/彻底搞懂对象的数据属性描述符、存储属性描述符.md","lastUpdated":1697042822000}'),p={name:"article/彻底搞懂对象的数据属性描述符、存储属性描述符.md"},o=l("",18),e=[o];function t(c,r,D,y,F,i){return n(),a("div",null,e)}const d=s(p,[["render",t]]);export{C as __pageData,d as default};
|
||||
135
assets/article_彻底搞懂对象的数据属性描述符、存储属性描述符.md.b0c08981.js
Normal file
135
assets/article_彻底搞懂对象的数据属性描述符、存储属性描述符.md.b0c08981.js
Normal file
@@ -0,0 +1,135 @@
|
||||
import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.4001cd3b.js";const u=JSON.parse('{"title":"彻底搞懂对象的数据属性描述符、存储属性描述符","description":"","frontmatter":{},"headers":[],"relativePath":"article/彻底搞懂对象的数据属性描述符、存储属性描述符.md","filePath":"article/彻底搞懂对象的数据属性描述符、存储属性描述符.md","lastUpdated":1697384672000}'),p={name:"article/彻底搞懂对象的数据属性描述符、存储属性描述符.md"},o=l(`<h1 id="彻底搞懂对象的数据属性描述符、存储属性描述符" tabindex="-1">彻底搞懂对象的数据属性描述符、存储属性描述符 <a class="header-anchor" href="#彻底搞懂对象的数据属性描述符、存储属性描述符" aria-label="Permalink to "彻底搞懂对象的数据属性描述符、存储属性描述符""></a></h1><h2 id="属性描述符" tabindex="-1">属性描述符 <a class="header-anchor" href="#属性描述符" aria-label="Permalink to "属性描述符""></a></h2><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">let</span><span style="color:#E1E4E8;"> obj </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> name: </span><span style="color:#9ECBFF;">"ziu"</span><span style="color:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> age: </span><span style="color:#79B8FF;">18</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> }</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> Object.</span><span style="color:#B392F0;">defineProperty</span><span style="color:#E1E4E8;">(obj, </span><span style="color:#9ECBFF;">"height"</span><span style="color:#E1E4E8;">, {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> value: </span><span style="color:#79B8FF;">1.88</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> })</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(obj) </span><span style="color:#6A737D;">// { name: 'ziu', age: 18 }</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">let</span><span style="color:#24292E;"> obj </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> name: </span><span style="color:#032F62;">"ziu"</span><span style="color:#24292E;">,</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> age: </span><span style="color:#005CC5;">18</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> }</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> Object.</span><span style="color:#6F42C1;">defineProperty</span><span style="color:#24292E;">(obj, </span><span style="color:#032F62;">"height"</span><span style="color:#24292E;">, {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> value: </span><span style="color:#005CC5;">1.88</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> })</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(obj) </span><span style="color:#6A737D;">// { name: 'ziu', age: 18 }</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p><code>obj</code>对象的控制台输出中，并没有<code>defineProperty</code>新定义的<code>height</code>，这是因为不可枚举的（不可遍历的），在打印时并没有和其他属性一起输出。这个属性已经被添加到对象中，只不过不可见。</p><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(obj.height) </span><span style="color:#6A737D;">// 1.88</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(obj.height) </span><span style="color:#6A737D;">// 1.88</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>属性描述符是一个对象，根据功能不同，可以分为两类：<strong>数据属性描述符</strong>和<strong>存储属性描述符</strong></p><h3 id="数据属性描述符" tabindex="-1">数据属性描述符 <a class="header-anchor" href="#数据属性描述符" aria-label="Permalink to "数据属性描述符""></a></h3><ul><li>数据属性描述符（Data Properties） <ul><li><code>value</code>该属性对应的值，默认<code>undefined</code></li><li><code>configurable</code>该属性描述符是否可被改变、是否可被删除，默认为<code>false</code></li><li><code>enumerable</code>该属性是否可被枚举，默认为<code>false</code></li><li><code>writable</code>该属性是否可以被写入新的值，默认为<code>false</code></li></ul></li></ul><p><strong>没有用属性描述符定义的对象属性（直接使用<code>.</code>语法）</strong>，也是具有以上属性描述符的特性的，<code>value</code>值为属性被赋值的值，其他<code>configurable</code>、<code>emumerable</code>、<code>writable</code>默认值都为<code>true</code>。<strong>注意，属性描述符区全为小写。</strong></p><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">let</span><span style="color:#E1E4E8;"> obj </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> name: </span><span style="color:#9ECBFF;">"ziu"</span><span style="color:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> age: </span><span style="color:#79B8FF;">18</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> }</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">// 数据属性描述符</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> Object.</span><span style="color:#B392F0;">defineProperty</span><span style="color:#E1E4E8;">(obj, </span><span style="color:#9ECBFF;">"address"</span><span style="color:#E1E4E8;">, {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> value: </span><span style="color:#9ECBFF;">"Beijing"</span><span style="color:#E1E4E8;">, </span><span style="color:#6A737D;">// 该属性对应的值，默认为undefine</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> configurable: </span><span style="color:#79B8FF;">false</span><span style="color:#E1E4E8;">, </span><span style="color:#6A737D;">// 该属性描述符是否可被改变、是否可被删除，默认为false</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> enumerable: </span><span style="color:#79B8FF;">true</span><span style="color:#E1E4E8;">, </span><span style="color:#6A737D;">// 该属性是否可被枚举，默认为false</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> writable: </span><span style="color:#79B8FF;">true</span><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">// 该属性是否可以被写入新的值，默认为false</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> })</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">// configurable</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">delete</span><span style="color:#E1E4E8;"> obj.address</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> obj.address </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">"Shanghai"</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(obj.address) </span><span style="color:#6A737D;">// Beijing</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">// enumerable</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(obj)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">for</span><span style="color:#E1E4E8;">(</span><span style="color:#F97583;">let</span><span style="color:#E1E4E8;"> key </span><span style="color:#F97583;">in</span><span style="color:#E1E4E8;"> obj) {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(key)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> }</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(Object.</span><span style="color:#B392F0;">keys</span><span style="color:#E1E4E8;">(obj))</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">// writable</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> obj.address </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">"Tianjin"</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(obj.address)</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">let</span><span style="color:#24292E;"> obj </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> name: </span><span style="color:#032F62;">"ziu"</span><span style="color:#24292E;">,</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> age: </span><span style="color:#005CC5;">18</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> }</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6A737D;">// 数据属性描述符</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> Object.</span><span style="color:#6F42C1;">defineProperty</span><span style="color:#24292E;">(obj, </span><span style="color:#032F62;">"address"</span><span style="color:#24292E;">, {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> value: </span><span style="color:#032F62;">"Beijing"</span><span style="color:#24292E;">, </span><span style="color:#6A737D;">// 该属性对应的值，默认为undefine</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> configurable: </span><span style="color:#005CC5;">false</span><span style="color:#24292E;">, </span><span style="color:#6A737D;">// 该属性描述符是否可被改变、是否可被删除，默认为false</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> enumerable: </span><span style="color:#005CC5;">true</span><span style="color:#24292E;">, </span><span style="color:#6A737D;">// 该属性是否可被枚举，默认为false</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> writable: </span><span style="color:#005CC5;">true</span><span style="color:#24292E;"> </span><span style="color:#6A737D;">// 该属性是否可以被写入新的值，默认为false</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> })</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6A737D;">// configurable</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">delete</span><span style="color:#24292E;"> obj.address</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> obj.address </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#032F62;">"Shanghai"</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(obj.address) </span><span style="color:#6A737D;">// Beijing</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6A737D;">// enumerable</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(obj)</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">for</span><span style="color:#24292E;">(</span><span style="color:#D73A49;">let</span><span style="color:#24292E;"> key </span><span style="color:#D73A49;">in</span><span style="color:#24292E;"> obj) {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(key)</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> }</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(Object.</span><span style="color:#6F42C1;">keys</span><span style="color:#24292E;">(obj))</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6A737D;">// writable</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> obj.address </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#032F62;">"Tianjin"</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(obj.address)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br></div></div><h3 id="存储属性描述符" tabindex="-1">存储属性描述符 <a class="header-anchor" href="#存储属性描述符" aria-label="Permalink to "存储属性描述符""></a></h3><ul><li>存储属性描述符（Accessor Properties） <ul><li><code>get</code>当访问该属性时，会调用此函数，默认为<code>undefined</code>。</li><li><code>set</code>当属性值被修改时，会调用此函数，默认为<code>undefined</code>。</li></ul></li></ul><p>注意，<code>get</code>、<code>set</code>描述符与<code>vaule</code>、<code>writable</code>描述符不共存。</p><table><thead><tr><th></th><th><code>configurable</code></th><th><code>enumerable</code></th><th><code>value</code></th><th><code>writable</code></th><th><code>get</code></th><th><code>set</code></th></tr></thead><tbody><tr><td>数据描述符</td><td>可以</td><td>可以</td><td>可以</td><td>可以</td><td><strong>不可以</strong></td><td><strong>不可以</strong></td></tr><tr><td>存取描述符</td><td>可以</td><td>可以</td><td><strong>不可以</strong></td><td><strong>不可以</strong></td><td>可以</td><td>可以</td></tr></tbody></table><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">let</span><span style="color:#E1E4E8;"> obj </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> name: </span><span style="color:#9ECBFF;">"ziu"</span><span style="color:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> age: </span><span style="color:#79B8FF;">18</span><span style="color:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> _address: </span><span style="color:#9ECBFF;">"Beijing"</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> }</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">// Accessor Properties</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> Object.</span><span style="color:#B392F0;">defineProperty</span><span style="color:#E1E4E8;">(obj, </span><span style="color:#9ECBFF;">"address"</span><span style="color:#E1E4E8;">, {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> enumerable: </span><span style="color:#79B8FF;">true</span><span style="color:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> configurable: </span><span style="color:#79B8FF;">true</span><span style="color:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">// value: "Beijing",</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">// writable: true,</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">get</span><span style="color:#E1E4E8;">: </span><span style="color:#F97583;">function</span><span style="color:#E1E4E8;">() {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">this</span><span style="color:#E1E4E8;">._address</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> },</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">set</span><span style="color:#E1E4E8;">: </span><span style="color:#F97583;">function</span><span style="color:#E1E4E8;">(</span><span style="color:#FFAB70;">val</span><span style="color:#E1E4E8;">) {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">this</span><span style="color:#E1E4E8;">._address </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> val</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> }</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> })</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(obj.address) </span><span style="color:#6A737D;">// 调用getter() Beijing</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> obj.address </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">"Shanghai"</span><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">// 调用setter()</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(obj._address) </span><span style="color:#6A737D;">// Shanghai</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">let</span><span style="color:#24292E;"> obj </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> name: </span><span style="color:#032F62;">"ziu"</span><span style="color:#24292E;">,</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> age: </span><span style="color:#005CC5;">18</span><span style="color:#24292E;">,</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> _address: </span><span style="color:#032F62;">"Beijing"</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> }</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6A737D;">// Accessor Properties</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> Object.</span><span style="color:#6F42C1;">defineProperty</span><span style="color:#24292E;">(obj, </span><span style="color:#032F62;">"address"</span><span style="color:#24292E;">, {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> enumerable: </span><span style="color:#005CC5;">true</span><span style="color:#24292E;">,</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> configurable: </span><span style="color:#005CC5;">true</span><span style="color:#24292E;">,</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6A737D;">// value: "Beijing",</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6A737D;">// writable: true,</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">get</span><span style="color:#24292E;">: </span><span style="color:#D73A49;">function</span><span style="color:#24292E;">() {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">this</span><span style="color:#24292E;">._address</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> },</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">set</span><span style="color:#24292E;">: </span><span style="color:#D73A49;">function</span><span style="color:#24292E;">(</span><span style="color:#E36209;">val</span><span style="color:#24292E;">) {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">this</span><span style="color:#24292E;">._address </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> val</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> }</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> })</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(obj.address) </span><span style="color:#6A737D;">// 调用getter() Beijing</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> obj.address </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#032F62;">"Shanghai"</span><span style="color:#24292E;"> </span><span style="color:#6A737D;">// 调用setter()</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(obj._address) </span><span style="color:#6A737D;">// Shanghai</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div><h3 id="应用场景" tabindex="-1">应用场景 <a class="header-anchor" href="#应用场景" aria-label="Permalink to "应用场景""></a></h3><ol><li>隐藏某个私有属性，希望直接被外界使用和赋值。（下划线开头的变量一般为私有属性）</li><li>获取某个属性被访问或赋值的时刻，可以设置伴随被访问或被赋值时，执行其他函数。</li></ol><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;"> Object.</span><span style="color:#B392F0;">defineProperty</span><span style="color:#E1E4E8;">(obj, </span><span style="color:#9ECBFF;">"address"</span><span style="color:#E1E4E8;">, {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">get</span><span style="color:#E1E4E8;">: </span><span style="color:#F97583;">function</span><span style="color:#E1E4E8;">() {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">bar</span><span style="color:#E1E4E8;">()</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">this</span><span style="color:#E1E4E8;">._address</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> },</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">set</span><span style="color:#E1E4E8;">: </span><span style="color:#F97583;">function</span><span style="color:#E1E4E8;">(</span><span style="color:#FFAB70;">val</span><span style="color:#E1E4E8;">) {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">foo</span><span style="color:#E1E4E8;">()</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">this</span><span style="color:#E1E4E8;">._address </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> val</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> }</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> })</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(obj.address) </span><span style="color:#6A737D;">// got address value once</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> obj.address </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">"Shanghai"</span><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">// resetted address value once</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">function</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">bar</span><span style="color:#E1E4E8;">() {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">"got address value once"</span><span style="color:#E1E4E8;">)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> }</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">function</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">foo</span><span style="color:#E1E4E8;">() {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">"resetted address value once"</span><span style="color:#E1E4E8;">)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> }</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;"> Object.</span><span style="color:#6F42C1;">defineProperty</span><span style="color:#24292E;">(obj, </span><span style="color:#032F62;">"address"</span><span style="color:#24292E;">, {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">get</span><span style="color:#24292E;">: </span><span style="color:#D73A49;">function</span><span style="color:#24292E;">() {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">bar</span><span style="color:#24292E;">()</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">this</span><span style="color:#24292E;">._address</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> },</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">set</span><span style="color:#24292E;">: </span><span style="color:#D73A49;">function</span><span style="color:#24292E;">(</span><span style="color:#E36209;">val</span><span style="color:#24292E;">) {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">foo</span><span style="color:#24292E;">()</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">this</span><span style="color:#24292E;">._address </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> val</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> }</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> })</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(obj.address) </span><span style="color:#6A737D;">// got address value once</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> obj.address </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#032F62;">"Shanghai"</span><span style="color:#24292E;"> </span><span style="color:#6A737D;">// resetted address value once</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">function</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">bar</span><span style="color:#24292E;">() {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#032F62;">"got address value once"</span><span style="color:#24292E;">)</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> }</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">function</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">foo</span><span style="color:#24292E;">() {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#032F62;">"resetted address value once"</span><span style="color:#24292E;">)</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> }</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div>`,18),e=[o];function c(r,t,E,y,i,d){return n(),a("div",null,e)}const F=s(p,[["render",c]]);export{u as __pageData,F as default};
|
||||
@@ -0,0 +1 @@
|
||||
import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.4001cd3b.js";const u=JSON.parse('{"title":"彻底搞懂对象的数据属性描述符、存储属性描述符","description":"","frontmatter":{},"headers":[],"relativePath":"article/彻底搞懂对象的数据属性描述符、存储属性描述符.md","filePath":"article/彻底搞懂对象的数据属性描述符、存储属性描述符.md","lastUpdated":1697384672000}'),p={name:"article/彻底搞懂对象的数据属性描述符、存储属性描述符.md"},o=l("",18),e=[o];function c(r,t,E,y,i,d){return n(),a("div",null,e)}const F=s(p,[["render",c]]);export{u as __pageData,F as default};
|
||||
39
assets/article_浅析defineProperty与Proxy实现的双向绑定.md.b8099d26.js
Normal file
39
assets/article_浅析defineProperty与Proxy实现的双向绑定.md.b8099d26.js
Normal file
@@ -0,0 +1,39 @@
|
||||
import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.4001cd3b.js";const b=JSON.parse('{"title":"浅析defineProperty与Proxy实现的双向绑定","description":"","frontmatter":{},"headers":[],"relativePath":"article/浅析defineProperty与Proxy实现的双向绑定.md","filePath":"article/浅析defineProperty与Proxy实现的双向绑定.md","lastUpdated":1697384672000}'),p={name:"article/浅析defineProperty与Proxy实现的双向绑定.md"},o=l(`<h1 id="浅析defineproperty与proxy实现的双向绑定" tabindex="-1">浅析defineProperty与Proxy实现的双向绑定 <a class="header-anchor" href="#浅析defineproperty与proxy实现的双向绑定" aria-label="Permalink to "浅析defineProperty与Proxy实现的双向绑定""></a></h1><blockquote><p>文章内容总结自Vue官网 <a href="https://cn.vuejs.org/v2/guide/reactivity.html#%E5%A6%82%E4%BD%95%E8%BF%BD%E8%B8%AA%E5%8F%98%E5%8C%96" target="_blank" rel="noreferrer">深入响应式原理</a></p></blockquote><h2 id="🔰-vue2的响应式原理" tabindex="-1">🔰 Vue2的响应式原理 <a class="header-anchor" href="#🔰-vue2的响应式原理" aria-label="Permalink to "🔰 Vue2的响应式原理""></a></h2><p><img src="https://v2.cn.vuejs.org/images/data.png" alt="image.png"></p><blockquote><p>当你把一个普通的 JavaScript 对象传入 Vue 实例作为 <code>data</code> 选项，Vue 将遍历此对象所有的 property，并使用 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty" target="_blank" rel="noreferrer"><code>Object.defineProperty</code></a> 把这些 property 全部转为 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Working_with_Objects#%E5%AE%9A%E4%B9%89_getters_%E4%B8%8E_setters" target="_blank" rel="noreferrer">getter/setter</a>。</p><p>每个组件实例都对应一个 <strong>watcher</strong> 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。</p></blockquote><p>Vue2的响应式原理，利用的是 <code>Object.defineProperty()</code> 的 <code>setter</code> 属性：</p><p><code>defineProperty()</code> 方法用于<strong>精确</strong>定义一个对象的属性，能够指定属性的各种特征，其中的 <code>set</code> 属性能够为对象指定一个 <code>setter</code> 函数，每次该属性的值发生修改，就会调用此函数。</p><blockquote><p>更多可以配置的属性请参看：<a href="https://juejin.cn/post/7088335075061792782" target="_blank" rel="noreferrer">什么是对象的数据属性描述符？存储属性描述符？</a></p></blockquote><p>这也是Vue2实现响应式数据、数据双向绑定的原理。</p><p>可以使用此方法实现一个简单的数据双向绑定的Demo：</p><p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f241135dbeb04e829fe6897c2e418aa2~tplv-k3u1fbpfcp-watermark.image?" alt="image.png"></p><ul><li>输入框内的内容改变，<code>.vBox</code> 展示的文本会随之改变。</li><li>点击按钮修改 <code>vm.text</code>，输入框内的值和 <code>.vBox</code> 的文本都会发生改变。</li></ul><div class="language-html vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">body</span><span style="color:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">input</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">type</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"text"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">id</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"input"</span><span style="color:#E1E4E8;"> /></span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">onclick</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"</span><span style="color:#E1E4E8;">vm</span><span style="color:#9ECBFF;">.</span><span style="color:#E1E4E8;">text</span><span style="color:#F97583;">=</span><span style="color:#9ECBFF;">'Hello, World.'"</span><span style="color:#E1E4E8;">>Modify vm.text</</span><span style="color:#85E89D;">button</span><span style="color:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"vBox"</span><span style="color:#E1E4E8;">></</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">// 定义响应式数据</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">let</span><span style="color:#E1E4E8;"> vm </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> {}</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> Object.</span><span style="color:#B392F0;">defineProperty</span><span style="color:#E1E4E8;">(vm, </span><span style="color:#9ECBFF;">"text"</span><span style="color:#E1E4E8;">, {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">set</span><span style="color:#E1E4E8;">: (</span><span style="color:#FFAB70;">value</span><span style="color:#E1E4E8;">) </span><span style="color:#F97583;">=></span><span style="color:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">// 对象属性值被修改时，setter函数被自动触发</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> document.</span><span style="color:#B392F0;">querySelector</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">"#input"</span><span style="color:#E1E4E8;">).value </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> value</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> document.</span><span style="color:#B392F0;">querySelector</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">".vBox"</span><span style="color:#E1E4E8;">).innerHTML </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> value</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> },</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> })</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">// 监听输入行为</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> document.</span><span style="color:#B392F0;">querySelector</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">"#input"</span><span style="color:#E1E4E8;">).</span><span style="color:#B392F0;">addEventListener</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">"input"</span><span style="color:#E1E4E8;">, (</span><span style="color:#FFAB70;">e</span><span style="color:#E1E4E8;">) </span><span style="color:#F97583;">=></span><span style="color:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> vm.text </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> e.target.value</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> })</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">body</span><span style="color:#E1E4E8;">></span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">body</span><span style="color:#24292E;">></span></span>
|
||||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">input</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">type</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"text"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">id</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"input"</span><span style="color:#24292E;"> /></span></span>
|
||||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">onclick</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"</span><span style="color:#24292E;">vm</span><span style="color:#032F62;">.</span><span style="color:#24292E;">text</span><span style="color:#D73A49;">=</span><span style="color:#032F62;">'Hello, World.'"</span><span style="color:#24292E;">>Modify vm.text</</span><span style="color:#22863A;">button</span><span style="color:#24292E;">></span></span>
|
||||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">div</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"vBox"</span><span style="color:#24292E;">></</span><span style="color:#22863A;">div</span><span style="color:#24292E;">></span></span>
|
||||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">script</span><span style="color:#24292E;">></span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6A737D;">// 定义响应式数据</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">let</span><span style="color:#24292E;"> vm </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> {}</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> Object.</span><span style="color:#6F42C1;">defineProperty</span><span style="color:#24292E;">(vm, </span><span style="color:#032F62;">"text"</span><span style="color:#24292E;">, {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">set</span><span style="color:#24292E;">: (</span><span style="color:#E36209;">value</span><span style="color:#24292E;">) </span><span style="color:#D73A49;">=></span><span style="color:#24292E;"> {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6A737D;">// 对象属性值被修改时，setter函数被自动触发</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> document.</span><span style="color:#6F42C1;">querySelector</span><span style="color:#24292E;">(</span><span style="color:#032F62;">"#input"</span><span style="color:#24292E;">).value </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> value</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> document.</span><span style="color:#6F42C1;">querySelector</span><span style="color:#24292E;">(</span><span style="color:#032F62;">".vBox"</span><span style="color:#24292E;">).innerHTML </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> value</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> },</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> })</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6A737D;">// 监听输入行为</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> document.</span><span style="color:#6F42C1;">querySelector</span><span style="color:#24292E;">(</span><span style="color:#032F62;">"#input"</span><span style="color:#24292E;">).</span><span style="color:#6F42C1;">addEventListener</span><span style="color:#24292E;">(</span><span style="color:#032F62;">"input"</span><span style="color:#24292E;">, (</span><span style="color:#E36209;">e</span><span style="color:#24292E;">) </span><span style="color:#D73A49;">=></span><span style="color:#24292E;"> {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> vm.text </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> e.target.value</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> })</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">script</span><span style="color:#24292E;">></span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">body</span><span style="color:#24292E;">></span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><p>通过 <code>defineProperty</code> 实现的响应式，<strong>不能检测</strong>数组和对象的变化：</p><p><strong>对于对象：</strong></p><p>Vue 无法检测 property 的添加或移除。</p><p>var vm = new Vue({ data:{ a:1 } }) // <code>vm.a</code> 是响应式的 vm.b = 2 // <code>vm.b</code> 是非响应式的</p><p><strong>对于数组：</strong></p><ol><li>当你利用索引直接设置一个数组项时，例如：<code>vm.items[indexOfItem] = newValue</code></li><li>当你修改数组的长度时，例如：<code>vm.items.length = newLength</code></li></ol><h2 id="🔰-vue3的响应式原理" tabindex="-1">🔰 Vue3的响应式原理 <a class="header-anchor" href="#🔰-vue3的响应式原理" aria-label="Permalink to "🔰 Vue3的响应式原理""></a></h2>`,20),e=[o];function t(r,c,E,y,i,u){return n(),a("div",null,e)}const m=s(p,[["render",t]]);export{b as __pageData,m as default};
|
||||
@@ -0,0 +1 @@
|
||||
import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.4001cd3b.js";const b=JSON.parse('{"title":"浅析defineProperty与Proxy实现的双向绑定","description":"","frontmatter":{},"headers":[],"relativePath":"article/浅析defineProperty与Proxy实现的双向绑定.md","filePath":"article/浅析defineProperty与Proxy实现的双向绑定.md","lastUpdated":1697384672000}'),p={name:"article/浅析defineProperty与Proxy实现的双向绑定.md"},o=l("",20),e=[o];function t(r,c,E,y,i,u){return n(),a("div",null,e)}const m=s(p,[["render",t]]);export{b as __pageData,m as default};
|
||||
@@ -1,20 +0,0 @@
|
||||
import{_ as s,o as n,c as a,S as e}from"./chunks/framework.04e6e156.js";const C=JSON.parse('{"title":"浅析defineProperty与Proxy实现的双向绑定","description":"","frontmatter":{},"headers":[],"relativePath":"article/浅析defineProperty与Proxy实现的双向绑定.md","filePath":"article/浅析defineProperty与Proxy实现的双向绑定.md","lastUpdated":1697042822000}'),l={name:"article/浅析defineProperty与Proxy实现的双向绑定.md"},p=e(`<h1 id="浅析defineproperty与proxy实现的双向绑定" tabindex="-1">浅析defineProperty与Proxy实现的双向绑定 <a class="header-anchor" href="#浅析defineproperty与proxy实现的双向绑定" aria-label="Permalink to "浅析defineProperty与Proxy实现的双向绑定""></a></h1><blockquote><p>文章内容总结自Vue官网 <a href="https://cn.vuejs.org/v2/guide/reactivity.html#%E5%A6%82%E4%BD%95%E8%BF%BD%E8%B8%AA%E5%8F%98%E5%8C%96" target="_blank" rel="noreferrer">深入响应式原理</a></p></blockquote><h2 id="🔰-vue2的响应式原理" tabindex="-1">🔰 Vue2的响应式原理 <a class="header-anchor" href="#🔰-vue2的响应式原理" aria-label="Permalink to "🔰 Vue2的响应式原理""></a></h2><p><img src="https://v2.cn.vuejs.org/images/data.png" alt="image.png"></p><blockquote><p>当你把一个普通的 JavaScript 对象传入 Vue 实例作为 <code>data</code> 选项，Vue 将遍历此对象所有的 property，并使用 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty" target="_blank" rel="noreferrer"><code>Object.defineProperty</code></a> 把这些 property 全部转为 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Working_with_Objects#%E5%AE%9A%E4%B9%89_getters_%E4%B8%8E_setters" target="_blank" rel="noreferrer">getter/setter</a>。</p><p>每个组件实例都对应一个 <strong>watcher</strong> 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。</p></blockquote><p>Vue2的响应式原理，利用的是 <code>Object.defineProperty()</code> 的 <code>setter</code> 属性：</p><p><code>defineProperty()</code> 方法用于<strong>精确</strong>定义一个对象的属性，能够指定属性的各种特征，其中的 <code>set</code> 属性能够为对象指定一个 <code>setter</code> 函数，每次该属性的值发生修改，就会调用此函数。</p><blockquote><p>更多可以配置的属性请参看：<a href="https://juejin.cn/post/7088335075061792782" target="_blank" rel="noreferrer">什么是对象的数据属性描述符？存储属性描述符？</a></p></blockquote><p>这也是Vue2实现响应式数据、数据双向绑定的原理。</p><p>可以使用此方法实现一个简单的数据双向绑定的Demo：</p><p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f241135dbeb04e829fe6897c2e418aa2~tplv-k3u1fbpfcp-watermark.image?" alt="image.png"></p><ul><li>输入框内的内容改变，<code>.vBox</code> 展示的文本会随之改变。</li><li>点击按钮修改 <code>vm.text</code>，输入框内的值和 <code>.vBox</code> 的文本都会发生改变。</li></ul><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">input</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">text</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">input</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">onclick</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">vm</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">text</span><span style="color:#89DDFF;">='</span><span style="color:#C3E88D;">Hello, World.</span><span style="color:#89DDFF;">'"</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;">Modify vm.text</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">vBox</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> <</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 定义响应式数据</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> vm </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{}</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> Object</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">defineProperty</span><span style="color:#A6ACCD;">(vm</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">text</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">set</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">value</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 对象属性值被修改时，setter函数被自动触发</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">#input</span><span style="color:#89DDFF;">"</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">value</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">.vBox</span><span style="color:#89DDFF;">"</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">innerHTML</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">value</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 监听输入行为</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">#input</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">addEventListener</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">input</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">e</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">vm</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">text</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">e</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">target</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">></span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><p>通过 <code>defineProperty</code> 实现的响应式，<strong>不能检测</strong>数组和对象的变化：</p><p><strong>对于对象：</strong></p><p>Vue 无法检测 property 的添加或移除。</p><p>var vm = new Vue({ data:{ a:1 } }) // <code>vm.a</code> 是响应式的 vm.b = 2 // <code>vm.b</code> 是非响应式的</p><p><strong>对于数组：</strong></p><ol><li>当你利用索引直接设置一个数组项时，例如：<code>vm.items[indexOfItem] = newValue</code></li><li>当你修改数组的长度时，例如：<code>vm.items.length = newLength</code></li></ol><h2 id="🔰-vue3的响应式原理" tabindex="-1">🔰 Vue3的响应式原理 <a class="header-anchor" href="#🔰-vue3的响应式原理" aria-label="Permalink to "🔰 Vue3的响应式原理""></a></h2>`,20),o=[p];function t(r,c,y,D,F,i){return n(),a("div",null,o)}const u=s(l,[["render",t]]);export{C as __pageData,u as default};
|
||||
@@ -1 +0,0 @@
|
||||
import{_ as s,o as n,c as a,S as e}from"./chunks/framework.04e6e156.js";const C=JSON.parse('{"title":"浅析defineProperty与Proxy实现的双向绑定","description":"","frontmatter":{},"headers":[],"relativePath":"article/浅析defineProperty与Proxy实现的双向绑定.md","filePath":"article/浅析defineProperty与Proxy实现的双向绑定.md","lastUpdated":1697042822000}'),l={name:"article/浅析defineProperty与Proxy实现的双向绑定.md"},p=e("",20),o=[p];function t(r,c,y,D,F,i){return n(),a("div",null,o)}const u=s(l,[["render",t]]);export{C as __pageData,u as default};
|
||||
65
assets/article_深入JavaScript数据类型.md.6747103c.js
Normal file
65
assets/article_深入JavaScript数据类型.md.6747103c.js
Normal file
@@ -0,0 +1,65 @@
|
||||
import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.4001cd3b.js";const o="/assets/Object.prototype.toString.70e8308c.png",F=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入JavaScript数据类型.md","filePath":"article/深入JavaScript数据类型.md","lastUpdated":1697384672000}'),p={name:"article/深入JavaScript数据类型.md"},e=l(`<h2 id="深入javascript数据类型" tabindex="-1">深入JavaScript数据类型 <a class="header-anchor" href="#深入javascript数据类型" aria-label="Permalink to "深入JavaScript数据类型""></a></h2><p>JavaScript包含以下几种数据类型：</p><ul><li>Number 数字</li><li>String 字符串</li><li>Boolean 布尔值</li><li>Symbol 符号 （ES6新增）</li><li>Object 对象 <ul><li>Function 函数</li><li>Array 数组</li><li>Date 日期</li><li>RegExp 正则表达式</li><li>...</li></ul></li><li>null 空</li><li>undefined 未定义</li></ul><p>从语言底层值的可变与不可变，可以将JS中的数据分为两种：不可变值（原始类型）和可变值（引用类型）</p><p>除了Object及继承自Object的特殊对象，其他的类型都为<strong>原始类型</strong>。</p><h2 id="typeof运算符" tabindex="-1">typeof运算符 <a class="header-anchor" href="#typeof运算符" aria-label="Permalink to "typeof运算符""></a></h2><p>除了null，所有<strong>原始类型</strong>都可以通过<code>typeof</code>运算符得到不同的结果</p><p>而null与object通过<code>typeof</code>运算符得到的结果都为<code>'object'</code></p><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#6A737D;">// 除了 null 其他原始类型的变量都可以通过 typeof 得到其类型</span></span>
|
||||
<span class="line"><span style="color:#6A737D;">// 而 null 与 object 通过 typeof 运算得到的都是 'object'</span></span>
|
||||
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">targets</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> [</span><span style="color:#79B8FF;">18</span><span style="color:#E1E4E8;">, </span><span style="color:#9ECBFF;">'Ziu'</span><span style="color:#E1E4E8;">, </span><span style="color:#79B8FF;">true</span><span style="color:#E1E4E8;">, </span><span style="color:#B392F0;">Symbol</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">''</span><span style="color:#E1E4E8;">), {}, </span><span style="color:#79B8FF;">null</span><span style="color:#E1E4E8;">, </span><span style="color:#79B8FF;">undefined</span><span style="color:#E1E4E8;">]</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F97583;">for</span><span style="color:#E1E4E8;"> (</span><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">t</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">of</span><span style="color:#E1E4E8;"> targets) {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#F97583;">typeof</span><span style="color:#E1E4E8;"> t) </span><span style="color:#6A737D;">// number string boolean symbol object object undefined</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">}</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#6A737D;">// 除了 null 其他原始类型的变量都可以通过 typeof 得到其类型</span></span>
|
||||
<span class="line"><span style="color:#6A737D;">// 而 null 与 object 通过 typeof 运算得到的都是 'object'</span></span>
|
||||
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">targets</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> [</span><span style="color:#005CC5;">18</span><span style="color:#24292E;">, </span><span style="color:#032F62;">'Ziu'</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">true</span><span style="color:#24292E;">, </span><span style="color:#6F42C1;">Symbol</span><span style="color:#24292E;">(</span><span style="color:#032F62;">''</span><span style="color:#24292E;">), {}, </span><span style="color:#005CC5;">null</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">undefined</span><span style="color:#24292E;">]</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#D73A49;">for</span><span style="color:#24292E;"> (</span><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">t</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">of</span><span style="color:#24292E;"> targets) {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#D73A49;">typeof</span><span style="color:#24292E;"> t) </span><span style="color:#6A737D;">// number string boolean symbol object object undefined</span></span>
|
||||
<span class="line"><span style="color:#24292E;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="typeof-null-object" tabindex="-1"><code>typeof null === 'object'</code> <a class="header-anchor" href="#typeof-null-object" aria-label="Permalink to "\`typeof null === 'object'\`""></a></h3><p>这里援引MDN的解释：</p><blockquote><p>在 JavaScript 最初的实现中，JavaScript 中的值是由一个表示类型的标签和实际数据值表示的。对象的类型标签是 0。</p><p>由于 null 代表的是空指针（大多数平台下值为 0x00），因此，null 的类型标签是 0，typeof null 也因此返回 "object"。</p></blockquote><h3 id="关于new操作符" tabindex="-1">关于new操作符 <a class="header-anchor" href="#关于new操作符" aria-label="Permalink to "关于new操作符""></a></h3><p>所有使用 new 操作符调用的构造函数，都将返回非基本类型（object 或 function）</p><ul><li>大多数返回的是一个对象，即 <code>object</code></li><li>而构造函数Function返回的是 <code>function</code></li></ul><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#6A737D;">// 针对普通构造函数</span></span>
|
||||
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">str</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">new</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">String</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">'Ziu'</span><span style="color:#E1E4E8;">)</span></span>
|
||||
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">num</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">new</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">Number</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">100</span><span style="color:#E1E4E8;">)</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#F97583;">typeof</span><span style="color:#E1E4E8;"> str) </span><span style="color:#6A737D;">// 'object'</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#F97583;">typeof</span><span style="color:#E1E4E8;"> num) </span><span style="color:#6A737D;">// 'object'</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#6A737D;">// 针对 Function 构造函数</span></span>
|
||||
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">fun</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">new</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">Function</span><span style="color:#E1E4E8;">()</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#F97583;">typeof</span><span style="color:#E1E4E8;"> fun) </span><span style="color:#6A737D;">// 'function'</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#6A737D;">// 针对普通构造函数</span></span>
|
||||
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">str</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">new</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">String</span><span style="color:#24292E;">(</span><span style="color:#032F62;">'Ziu'</span><span style="color:#24292E;">)</span></span>
|
||||
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">num</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">new</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">Number</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">100</span><span style="color:#24292E;">)</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#24292E;">console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#D73A49;">typeof</span><span style="color:#24292E;"> str) </span><span style="color:#6A737D;">// 'object'</span></span>
|
||||
<span class="line"><span style="color:#24292E;">console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#D73A49;">typeof</span><span style="color:#24292E;"> num) </span><span style="color:#6A737D;">// 'object'</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#6A737D;">// 针对 Function 构造函数</span></span>
|
||||
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">fun</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">new</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">Function</span><span style="color:#24292E;">()</span></span>
|
||||
<span class="line"><span style="color:#24292E;">console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#D73A49;">typeof</span><span style="color:#24292E;"> fun) </span><span style="color:#6A737D;">// 'function'</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h3 id="字符串原始值和字符串对象" tabindex="-1">字符串原始值和字符串对象 <a class="header-anchor" href="#字符串原始值和字符串对象" aria-label="Permalink to "字符串原始值和字符串对象""></a></h3><p>typeof 操作符区分 <code>String</code> 对象和原始字符串值：</p><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">s1</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">''</span></span>
|
||||
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">s2</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">new</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">String</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">''</span><span style="color:#E1E4E8;">)</span></span>
|
||||
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">s3</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">String</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">''</span><span style="color:#E1E4E8;">)</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(s1 </span><span style="color:#F97583;">instanceof</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">String</span><span style="color:#E1E4E8;">) </span><span style="color:#6A737D;">// false</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(s2 </span><span style="color:#F97583;">instanceof</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">String</span><span style="color:#E1E4E8;">) </span><span style="color:#6A737D;">// true</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(s3 </span><span style="color:#F97583;">instanceof</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">String</span><span style="color:#E1E4E8;">) </span><span style="color:#6A737D;">// false</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">s1</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#032F62;">''</span></span>
|
||||
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">s2</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">new</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">String</span><span style="color:#24292E;">(</span><span style="color:#032F62;">''</span><span style="color:#24292E;">)</span></span>
|
||||
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">s3</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">String</span><span style="color:#24292E;">(</span><span style="color:#032F62;">''</span><span style="color:#24292E;">)</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#24292E;">console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(s1 </span><span style="color:#D73A49;">instanceof</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">String</span><span style="color:#24292E;">) </span><span style="color:#6A737D;">// false</span></span>
|
||||
<span class="line"><span style="color:#24292E;">console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(s2 </span><span style="color:#D73A49;">instanceof</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">String</span><span style="color:#24292E;">) </span><span style="color:#6A737D;">// true</span></span>
|
||||
<span class="line"><span style="color:#24292E;">console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(s3 </span><span style="color:#D73A49;">instanceof</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">String</span><span style="color:#24292E;">) </span><span style="color:#6A737D;">// false</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>通过new操作符创建的是一个对象，它将被添加到原型链上（详见new一个对象时发生了什么）</p><p>而直接调用 String 函数，返回的是一个字符串原始值，本质上 <code>s3</code> 和 <code>s1</code> 是相同的</p><p>而<code>s1</code>变量自创建之初，就是原始类型，没有挂载到原型链上，自然也就无法通过<code>instanceof</code>检查一个对象</p><p>而之所以能够在<code>s1</code>上调用字符串的方法，是因为<strong>包装类型</strong>（见下文）</p><blockquote><p>instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。</p><p>在本例中，instanceof用于检查s1变量的原型链上，是否包含构造函数String的显式原型（String.prototype），即：s1是否由String创建</p></blockquote><h2 id="包装类型" tabindex="-1">包装类型 <a class="header-anchor" href="#包装类型" aria-label="Permalink to "包装类型""></a></h2><p>除了null和undefined，所有<strong>原始类型</strong>都有其相应的<strong>对象包装类型</strong>，例如<code>18</code>的对象包装类型是<code>Number</code>，而<code>'Ziu'</code>的对象包装类是<code>String</code></p><p>这为处理原始值提供可用的方法，例如，<code>Number</code>对象提供了<code>toFixed()</code>这样的方法。</p><p>当我们在原始值上访问属性时，JavaScript会<strong>自动将值包装到相应的包装对象中</strong>，并访问对象上的属性：</p><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">((</span><span style="color:#79B8FF;">18.8</span><span style="color:#E1E4E8;">).</span><span style="color:#B392F0;">toFixed</span><span style="color:#E1E4E8;">()) </span><span style="color:#6A737D;">// '19'</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">'Ziu'</span><span style="color:#E1E4E8;">.</span><span style="color:#B392F0;">toUpperCase</span><span style="color:#E1E4E8;">()) </span><span style="color:#6A737D;">// 'ZIU'</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">((</span><span style="color:#005CC5;">18.8</span><span style="color:#24292E;">).</span><span style="color:#6F42C1;">toFixed</span><span style="color:#24292E;">()) </span><span style="color:#6A737D;">// '19'</span></span>
|
||||
<span class="line"><span style="color:#24292E;">console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#032F62;">'Ziu'</span><span style="color:#24292E;">.</span><span style="color:#6F42C1;">toUpperCase</span><span style="color:#24292E;">()) </span><span style="color:#6A737D;">// 'ZIU'</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h2 id="使用tostring检查对象类型" tabindex="-1">使用toString检查对象类型 <a class="header-anchor" href="#使用tostring检查对象类型" aria-label="Permalink to "使用toString检查对象类型""></a></h2><p>由Object派生的每个特殊对象类型都有 <code>toString</code> 方法，而且他们都被不同程度的改写：</p><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#6A737D;">// 注意，不应当在null或undefined上调用任何方法，这将抛出错误，因为他们没有对应任何包装类型</span></span>
|
||||
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">targets</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> [</span><span style="color:#79B8FF;">18</span><span style="color:#E1E4E8;">, </span><span style="color:#9ECBFF;">'Ziu'</span><span style="color:#E1E4E8;">, </span><span style="color:#79B8FF;">true</span><span style="color:#E1E4E8;">, </span><span style="color:#B392F0;">Symbol</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">''</span><span style="color:#E1E4E8;">), {}, </span><span style="color:#F97583;">new</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">Date</span><span style="color:#E1E4E8;">()]</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F97583;">for</span><span style="color:#E1E4E8;"> (</span><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">t</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">of</span><span style="color:#E1E4E8;"> targets) {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(t.</span><span style="color:#B392F0;">toString</span><span style="color:#E1E4E8;">()) </span><span style="color:#6A737D;">// '18' 'Ziu' 'true' 'Symbol()' '[object Object]' Sat Feb 18 2023 20:49:31 GMT+0800 (GMT+08:00)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">}</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#6A737D;">// 注意，不应当在null或undefined上调用任何方法，这将抛出错误，因为他们没有对应任何包装类型</span></span>
|
||||
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">targets</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> [</span><span style="color:#005CC5;">18</span><span style="color:#24292E;">, </span><span style="color:#032F62;">'Ziu'</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">true</span><span style="color:#24292E;">, </span><span style="color:#6F42C1;">Symbol</span><span style="color:#24292E;">(</span><span style="color:#032F62;">''</span><span style="color:#24292E;">), {}, </span><span style="color:#D73A49;">new</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">Date</span><span style="color:#24292E;">()]</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#D73A49;">for</span><span style="color:#24292E;"> (</span><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">t</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">of</span><span style="color:#24292E;"> targets) {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(t.</span><span style="color:#6F42C1;">toString</span><span style="color:#24292E;">()) </span><span style="color:#6A737D;">// '18' 'Ziu' 'true' 'Symbol()' '[object Object]' Sat Feb 18 2023 20:49:31 GMT+0800 (GMT+08:00)</span></span>
|
||||
<span class="line"><span style="color:#24292E;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>这个 <code>toString</code> 方法定义在 Object.prototype 上，被其他特殊对象类型所继承。</p><ul><li>如果我们直接调用 <code>Object.prototype.toString()</code> 那么得到的是 <code>[object Object]</code> 因为这是在Object上调用得到的结果</li><li>如果我们在各自不同的对象上调用 <code>toString</code> ，得到的是不同对象改写后的结果</li></ul><p>因为Object是所有子类的父类，所以任何类型的对象都可以通过this绑定的方式，调用<code>Object.prototype.toString()</code>方法，返回该对象的类型的字符串表示</p><p>这也是大多数情况下判断对象类型的方法：</p><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">function</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">classof</span><span style="color:#E1E4E8;">(</span><span style="color:#FFAB70;">target</span><span style="color:#E1E4E8;">) {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">res</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">Object</span><span style="color:#E1E4E8;">.</span><span style="color:#79B8FF;">prototype</span><span style="color:#E1E4E8;">.toString.</span><span style="color:#B392F0;">call</span><span style="color:#E1E4E8;">(target) </span><span style="color:#6A737D;">// [object xxx]</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;"> res.</span><span style="color:#B392F0;">slice</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">8</span><span style="color:#E1E4E8;">, </span><span style="color:#F97583;">-</span><span style="color:#79B8FF;">1</span><span style="color:#E1E4E8;">)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#B392F0;">classof</span><span style="color:#E1E4E8;">({})) </span><span style="color:#6A737D;">// Object</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">function</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">classof</span><span style="color:#24292E;">(</span><span style="color:#E36209;">target</span><span style="color:#24292E;">) {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">res</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">Object</span><span style="color:#24292E;">.</span><span style="color:#005CC5;">prototype</span><span style="color:#24292E;">.toString.</span><span style="color:#6F42C1;">call</span><span style="color:#24292E;">(target) </span><span style="color:#6A737D;">// [object xxx]</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> res.</span><span style="color:#6F42C1;">slice</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">8</span><span style="color:#24292E;">, </span><span style="color:#D73A49;">-</span><span style="color:#005CC5;">1</span><span style="color:#24292E;">)</span></span>
|
||||
<span class="line"><span style="color:#24292E;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#24292E;">console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#6F42C1;">classof</span><span style="color:#24292E;">({})) </span><span style="color:#6A737D;">// Object</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="核心原理" tabindex="-1">核心原理 <a class="header-anchor" href="#核心原理" aria-label="Permalink to "核心原理""></a></h3><p><a href="https://juejin.cn/post/6844903477940846600" target="_blank" rel="noreferrer">深入Object.prototype.toString</a></p><p>参考ECMA6规范文档：<a href="https://tc39.es/ecma262/multipage/fundamental-objects.html#sec-object.prototype.tostring" target="_blank" rel="noreferrer">Object.prototype.toString()</a></p><h4 id="es5标准下-object-prototype-tostring-执行原理" tabindex="-1">ES5标准下 <code>Object.prototype.toString</code> 执行原理 <a class="header-anchor" href="#es5标准下-object-prototype-tostring-执行原理" aria-label="Permalink to "ES5标准下 \`Object.prototype.toString\` 执行原理""></a></h4><ul><li>如果 <code>this</code> 是 <code>undefined</code><ul><li>返回 <code>[object Undefined]</code></li></ul></li><li>如果 <code>this</code> 是 <code>null </code><ul><li>返回 <code>[object Null]</code></li></ul></li><li>令 <code>O</code> 为以 <code>this</code> 作为参数调用 <code>ToObject</code> 的结果</li><li>令 <code>class</code> 为 <code>O</code> 的内部属性 <code>[[Class]]</code> 的值</li><li>返回三个字符串 <code>"[object"</code> <code>class</code> 以及 <code>"]"</code> 拼接而成的字符串。</li></ul><h4 id="es6标准下-object-prototype-tostring-执行原理" tabindex="-1">ES6标准下 <code>Object.prototype.toString</code> 执行原理 <a class="header-anchor" href="#es6标准下-object-prototype-tostring-执行原理" aria-label="Permalink to "ES6标准下 \`Object.prototype.toString\` 执行原理""></a></h4><p><code>Object.prototype.toString()</code>被调用时，会进行如下步骤：</p><p><img src="`+o+'" alt="Object.prototype.toString()"></p><p>在ES6里，之前的内部属性 <code>[[Class]]</code> 不再使用，取而代之的是一系列的 internal slot</p>',46),t=[e];function c(r,y,E,i,d,b){return n(),a("div",null,t)}const g=s(p,[["render",c]]);export{F as __pageData,g as default};
|
||||
1
assets/article_深入JavaScript数据类型.md.6747103c.lean.js
Normal file
1
assets/article_深入JavaScript数据类型.md.6747103c.lean.js
Normal file
@@ -0,0 +1 @@
|
||||
import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.4001cd3b.js";const o="/assets/Object.prototype.toString.70e8308c.png",F=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入JavaScript数据类型.md","filePath":"article/深入JavaScript数据类型.md","lastUpdated":1697384672000}'),p={name:"article/深入JavaScript数据类型.md"},e=l("",46),t=[e];function c(r,y,E,i,d,b){return n(),a("div",null,t)}const g=s(p,[["render",c]]);export{F as __pageData,g as default};
|
||||
@@ -1,33 +0,0 @@
|
||||
import{_ as s,o as n,c as a,S as l}from"./chunks/framework.04e6e156.js";const o="/assets/Object.prototype.toString.70e8308c.png",d=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入JavaScript数据类型.md","filePath":"article/深入JavaScript数据类型.md","lastUpdated":1697042822000}'),p={name:"article/深入JavaScript数据类型.md"},e=l(`<h2 id="深入javascript数据类型" tabindex="-1">深入JavaScript数据类型 <a class="header-anchor" href="#深入javascript数据类型" aria-label="Permalink to "深入JavaScript数据类型""></a></h2><p>JavaScript包含以下几种数据类型：</p><ul><li>Number 数字</li><li>String 字符串</li><li>Boolean 布尔值</li><li>Symbol 符号 （ES6新增）</li><li>Object 对象 <ul><li>Function 函数</li><li>Array 数组</li><li>Date 日期</li><li>RegExp 正则表达式</li><li>...</li></ul></li><li>null 空</li><li>undefined 未定义</li></ul><p>从语言底层值的可变与不可变，可以将JS中的数据分为两种：不可变值（原始类型）和可变值（引用类型）</p><p>除了Object及继承自Object的特殊对象，其他的类型都为<strong>原始类型</strong>。</p><h2 id="typeof运算符" tabindex="-1">typeof运算符 <a class="header-anchor" href="#typeof运算符" aria-label="Permalink to "typeof运算符""></a></h2><p>除了null，所有<strong>原始类型</strong>都可以通过<code>typeof</code>运算符得到不同的结果</p><p>而null与object通过<code>typeof</code>运算符得到的结果都为<code>'object'</code></p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 除了 null 其他原始类型的变量都可以通过 typeof 得到其类型</span></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">// 而 null 与 object 通过 typeof 运算得到的都是 'object'</span></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> targets </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#F78C6C;">18</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Ziu</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Symbol</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">''</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{},</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">null,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">undefined</span><span style="color:#A6ACCD;">]</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">for</span><span style="color:#A6ACCD;"> (</span><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> t </span><span style="color:#89DDFF;">of</span><span style="color:#A6ACCD;"> targets) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">typeof</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">t</span><span style="color:#F07178;">) </span><span style="color:#676E95;font-style:italic;">// number string boolean symbol object object undefined</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="typeof-null-object" tabindex="-1"><code>typeof null === 'object'</code> <a class="header-anchor" href="#typeof-null-object" aria-label="Permalink to "\`typeof null === 'object'\`""></a></h3><p>这里援引MDN的解释：</p><blockquote><p>在 JavaScript 最初的实现中，JavaScript 中的值是由一个表示类型的标签和实际数据值表示的。对象的类型标签是 0。</p><p>由于 null 代表的是空指针（大多数平台下值为 0x00），因此，null 的类型标签是 0，typeof null 也因此返回 "object"。</p></blockquote><h3 id="关于new操作符" tabindex="-1">关于new操作符 <a class="header-anchor" href="#关于new操作符" aria-label="Permalink to "关于new操作符""></a></h3><p>所有使用 new 操作符调用的构造函数，都将返回非基本类型（object 或 function）</p><ul><li>大多数返回的是一个对象，即 <code>object</code></li><li>而构造函数Function返回的是 <code>function</code></li></ul><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 针对普通构造函数</span></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> str </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">String</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Ziu</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">)</span></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> num </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Number</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">100</span><span style="color:#A6ACCD;">)</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">typeof</span><span style="color:#A6ACCD;"> str) </span><span style="color:#676E95;font-style:italic;">// 'object'</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">typeof</span><span style="color:#A6ACCD;"> num) </span><span style="color:#676E95;font-style:italic;">// 'object'</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">// 针对 Function 构造函数</span></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> fun </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Function</span><span style="color:#A6ACCD;">()</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">typeof</span><span style="color:#A6ACCD;"> fun) </span><span style="color:#676E95;font-style:italic;">// 'function'</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h3 id="字符串原始值和字符串对象" tabindex="-1">字符串原始值和字符串对象 <a class="header-anchor" href="#字符串原始值和字符串对象" aria-label="Permalink to "字符串原始值和字符串对象""></a></h3><p>typeof 操作符区分 <code>String</code> 对象和原始字符串值：</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> s1 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">''</span></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> s2 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">String</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">''</span><span style="color:#A6ACCD;">)</span></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> s3 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">String</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">''</span><span style="color:#A6ACCD;">)</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(s1 </span><span style="color:#89DDFF;">instanceof</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">String</span><span style="color:#A6ACCD;">) </span><span style="color:#676E95;font-style:italic;">// false</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(s2 </span><span style="color:#89DDFF;">instanceof</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">String</span><span style="color:#A6ACCD;">) </span><span style="color:#676E95;font-style:italic;">// true</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(s3 </span><span style="color:#89DDFF;">instanceof</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">String</span><span style="color:#A6ACCD;">) </span><span style="color:#676E95;font-style:italic;">// false</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>通过new操作符创建的是一个对象，它将被添加到原型链上（详见new一个对象时发生了什么）</p><p>而直接调用 String 函数，返回的是一个字符串原始值，本质上 <code>s3</code> 和 <code>s1</code> 是相同的</p><p>而<code>s1</code>变量自创建之初，就是原始类型，没有挂载到原型链上，自然也就无法通过<code>instanceof</code>检查一个对象</p><p>而之所以能够在<code>s1</code>上调用字符串的方法，是因为<strong>包装类型</strong>（见下文）</p><blockquote><p>instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。</p><p>在本例中，instanceof用于检查s1变量的原型链上，是否包含构造函数String的显式原型（String.prototype），即：s1是否由String创建</p></blockquote><h2 id="包装类型" tabindex="-1">包装类型 <a class="header-anchor" href="#包装类型" aria-label="Permalink to "包装类型""></a></h2><p>除了null和undefined，所有<strong>原始类型</strong>都有其相应的<strong>对象包装类型</strong>，例如<code>18</code>的对象包装类型是<code>Number</code>，而<code>'Ziu'</code>的对象包装类是<code>String</code></p><p>这为处理原始值提供可用的方法，例如，<code>Number</code>对象提供了<code>toFixed()</code>这样的方法。</p><p>当我们在原始值上访问属性时，JavaScript会<strong>自动将值包装到相应的包装对象中</strong>，并访问对象上的属性：</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">((</span><span style="color:#F78C6C;">18.8</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toFixed</span><span style="color:#A6ACCD;">()) </span><span style="color:#676E95;font-style:italic;">// '19'</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Ziu</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toUpperCase</span><span style="color:#A6ACCD;">()) </span><span style="color:#676E95;font-style:italic;">// 'ZIU'</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h2 id="使用tostring检查对象类型" tabindex="-1">使用toString检查对象类型 <a class="header-anchor" href="#使用tostring检查对象类型" aria-label="Permalink to "使用toString检查对象类型""></a></h2><p>由Object派生的每个特殊对象类型都有 <code>toString</code> 方法，而且他们都被不同程度的改写：</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 注意，不应当在null或undefined上调用任何方法，这将抛出错误，因为他们没有对应任何包装类型</span></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> targets </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#F78C6C;">18</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Ziu</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Symbol</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">''</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{},</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Date</span><span style="color:#A6ACCD;">()]</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">for</span><span style="color:#A6ACCD;"> (</span><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> t </span><span style="color:#89DDFF;">of</span><span style="color:#A6ACCD;"> targets) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">t</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toString</span><span style="color:#F07178;">()) </span><span style="color:#676E95;font-style:italic;">// '18' 'Ziu' 'true' 'Symbol()' '[object Object]' Sat Feb 18 2023 20:49:31 GMT+0800 (GMT+08:00)</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>这个 <code>toString</code> 方法定义在 Object.prototype 上，被其他特殊对象类型所继承。</p><ul><li>如果我们直接调用 <code>Object.prototype.toString()</code> 那么得到的是 <code>[object Object]</code> 因为这是在Object上调用得到的结果</li><li>如果我们在各自不同的对象上调用 <code>toString</code> ，得到的是不同对象改写后的结果</li></ul><p>因为Object是所有子类的父类，所以任何类型的对象都可以通过this绑定的方式，调用<code>Object.prototype.toString()</code>方法，返回该对象的类型的字符串表示</p><p>这也是大多数情况下判断对象类型的方法：</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">classof</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">target</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">res</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">Object</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">prototype</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">toString</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">call</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">target</span><span style="color:#F07178;">) </span><span style="color:#676E95;font-style:italic;">// [object xxx]</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">res</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">slice</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">8</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">-</span><span style="color:#F78C6C;">1</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#82AAFF;">classof</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{}</span><span style="color:#A6ACCD;">)) </span><span style="color:#676E95;font-style:italic;">// Object</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="核心原理" tabindex="-1">核心原理 <a class="header-anchor" href="#核心原理" aria-label="Permalink to "核心原理""></a></h3><p><a href="https://juejin.cn/post/6844903477940846600" target="_blank" rel="noreferrer">深入Object.prototype.toString</a></p><p>参考ECMA6规范文档：<a href="https://tc39.es/ecma262/multipage/fundamental-objects.html#sec-object.prototype.tostring" target="_blank" rel="noreferrer">Object.prototype.toString()</a></p><h4 id="es5标准下-object-prototype-tostring-执行原理" tabindex="-1">ES5标准下 <code>Object.prototype.toString</code> 执行原理 <a class="header-anchor" href="#es5标准下-object-prototype-tostring-执行原理" aria-label="Permalink to "ES5标准下 \`Object.prototype.toString\` 执行原理""></a></h4><ul><li>如果 <code>this</code> 是 <code>undefined</code><ul><li>返回 <code>[object Undefined]</code></li></ul></li><li>如果 <code>this</code> 是 <code>null </code><ul><li>返回 <code>[object Null]</code></li></ul></li><li>令 <code>O</code> 为以 <code>this</code> 作为参数调用 <code>ToObject</code> 的结果</li><li>令 <code>class</code> 为 <code>O</code> 的内部属性 <code>[[Class]]</code> 的值</li><li>返回三个字符串 <code>"[object"</code> <code>class</code> 以及 <code>"]"</code> 拼接而成的字符串。</li></ul><h4 id="es6标准下-object-prototype-tostring-执行原理" tabindex="-1">ES6标准下 <code>Object.prototype.toString</code> 执行原理 <a class="header-anchor" href="#es6标准下-object-prototype-tostring-执行原理" aria-label="Permalink to "ES6标准下 \`Object.prototype.toString\` 执行原理""></a></h4><p><code>Object.prototype.toString()</code>被调用时，会进行如下步骤：</p><p><img src="`+o+'" alt="Object.prototype.toString()"></p><p>在ES6里，之前的内部属性 <code>[[Class]]</code> 不再使用，取而代之的是一系列的 internal slot</p>',46),t=[e];function c(r,i,y,D,A,F){return n(),a("div",null,t)}const b=s(p,[["render",c]]);export{d as __pageData,b as default};
|
||||
@@ -1 +0,0 @@
|
||||
import{_ as s,o as n,c as a,S as l}from"./chunks/framework.04e6e156.js";const o="/assets/Object.prototype.toString.70e8308c.png",d=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入JavaScript数据类型.md","filePath":"article/深入JavaScript数据类型.md","lastUpdated":1697042822000}'),p={name:"article/深入JavaScript数据类型.md"},e=l("",46),t=[e];function c(r,i,y,D,A,F){return n(),a("div",null,t)}const b=s(p,[["render",c]]);export{d as __pageData,b as default};
|
||||
199
assets/article_深入Vue3源码，看看Vue.use后究竟发生了什么？.md.2b658e3e.js
Normal file
199
assets/article_深入Vue3源码，看看Vue.use后究竟发生了什么？.md.2b658e3e.js
Normal file
@@ -0,0 +1,199 @@
|
||||
import{_ as s,o as n,c as a,Q as p}from"./chunks/framework.4001cd3b.js";const b=JSON.parse('{"title":"深入Vue3源码，看看Vue.use后究竟发生了什么？","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入Vue3源码，看看Vue.use后究竟发生了什么？.md","filePath":"article/深入Vue3源码，看看Vue.use后究竟发生了什么？.md","lastUpdated":1697384672000}'),l={name:"article/深入Vue3源码，看看Vue.use后究竟发生了什么？.md"},e=p(`<h1 id="深入vue3源码-看看vue-use后究竟发生了什么" tabindex="-1">深入Vue3源码，看看Vue.use后究竟发生了什么？ <a class="header-anchor" href="#深入vue3源码-看看vue-use后究竟发生了什么" aria-label="Permalink to "深入Vue3源码，看看Vue.use后究竟发生了什么？""></a></h1><h2 id="从全局注册组件库入手" tabindex="-1">从全局注册组件库入手 <a class="header-anchor" href="#从全局注册组件库入手" aria-label="Permalink to "从全局注册组件库入手""></a></h2><p>如果我们自定义了几个自定义组件，当我们想在<code>.vue</code>文件中使用它们时，需要手动<code>import</code>导入组件并在<code>component</code>中注册：</p><div class="language-html vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> CustomInput </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'@/component/CustomInput.vue'</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F97583;">export</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">default</span><span style="color:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> component: {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> CustomInput</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> }</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">}</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">script</span><span style="color:#24292E;">></span></span>
|
||||
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> CustomInput </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'@/component/CustomInput.vue'</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#D73A49;">export</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">default</span><span style="color:#24292E;"> {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> component: {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> CustomInput</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> }</span></span>
|
||||
<span class="line"><span style="color:#24292E;">}</span></span>
|
||||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">script</span><span style="color:#24292E;">></span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>通过<code>Vue.use</code>将<code>ElementPlus</code>全局注册后，所有的组件都可以在<code>.vue</code>的<code><template></code>标签中直接使用，不需要再导入、注册。</p><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> ElementPlus </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'element-plus'</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">Vue.</span><span style="color:#B392F0;">use</span><span style="color:#E1E4E8;">(ElementPlus)</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> ElementPlus </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'element-plus'</span></span>
|
||||
<span class="line"><span style="color:#24292E;">Vue.</span><span style="color:#6F42C1;">use</span><span style="color:#24292E;">(ElementPlus)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>这个过程里<code>Vue.use</code>究竟为我们做了哪些事？</p><p>假设我此时有两个自定义组件<code>ZiuInput</code>与<code>ZiuButton</code>位于<code>@/module/ZiuUI/component</code>目录下，我希望能通过<code>Vue.use</code>达到像<code>ElementPlus</code>那样免导入注册就能直接使用的效果。</p><p>于是我在<code>ZiuUI</code>目录下创建了<code>index.js</code>，并在其中编写以下代码：</p><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#6A737D;">// @/module/ZiuUI/index.js</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> ZiuInput </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'./component/ziu-input.vue'</span></span>
|
||||
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> ZiuButton </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'./component/ziu-button.vue'</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">components</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> [ ZiuInput, ZiuButton ]</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">ZiuUI</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">install</span><span style="color:#E1E4E8;">(</span><span style="color:#FFAB70;">Vue</span><span style="color:#E1E4E8;">) {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">// 注册组件</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> components.</span><span style="color:#B392F0;">forEach</span><span style="color:#E1E4E8;">(</span><span style="color:#FFAB70;">component</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=></span><span style="color:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> Vue.</span><span style="color:#B392F0;">component</span><span style="color:#E1E4E8;">(component.name, component)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> })</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> }</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F97583;">export</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">default</span><span style="color:#E1E4E8;"> ZiuUI</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#6A737D;">// @/module/ZiuUI/index.js</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> ZiuInput </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'./component/ziu-input.vue'</span></span>
|
||||
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> ZiuButton </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'./component/ziu-button.vue'</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">components</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> [ ZiuInput, ZiuButton ]</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">ZiuUI</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">install</span><span style="color:#24292E;">(</span><span style="color:#E36209;">Vue</span><span style="color:#24292E;">) {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6A737D;">// 注册组件</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> components.</span><span style="color:#6F42C1;">forEach</span><span style="color:#24292E;">(</span><span style="color:#E36209;">component</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=></span><span style="color:#24292E;"> {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> Vue.</span><span style="color:#6F42C1;">component</span><span style="color:#24292E;">(component.name, component)</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> })</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> }</span></span>
|
||||
<span class="line"><span style="color:#24292E;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#D73A49;">export</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">default</span><span style="color:#24292E;"> ZiuUI</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><p>当我们将<code>ZiuUI</code>这个对象传给<code>Vue.use()</code>时，<code>Vue</code>会自动调用其中的<code>install</code>方法，并将<code>Vue</code>实例传入其中，那么我们就可以在<code>install</code>方法中实现组件的全局注册。</p><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#6A737D;">// @/main.js</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> Vue </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'vue'</span></span>
|
||||
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> App </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'./App'</span></span>
|
||||
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> ZiuUI </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'./module/ZiuUI'</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">Vue.</span><span style="color:#B392F0;">use</span><span style="color:#E1E4E8;">(ZiuUI) </span><span style="color:#6A737D;">// 将ZiuUI传入Vue.use()</span></span>
|
||||
<span class="line"><span style="color:#F97583;">...</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#6A737D;">// @/main.js</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> Vue </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'vue'</span></span>
|
||||
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> App </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'./App'</span></span>
|
||||
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> ZiuUI </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'./module/ZiuUI'</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#24292E;">Vue.</span><span style="color:#6F42C1;">use</span><span style="color:#24292E;">(ZiuUI) </span><span style="color:#6A737D;">// 将ZiuUI传入Vue.use()</span></span>
|
||||
<span class="line"><span style="color:#D73A49;">...</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="深入源码" tabindex="-1">深入源码 <a class="header-anchor" href="#深入源码" aria-label="Permalink to "深入源码""></a></h2><p>下载Vue3的源码阅读，我们可以发现<code>use</code>相关的代码：</p><div class="language-ts vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">use</span><span style="color:#E1E4E8;">(plugin: Plugin, </span><span style="color:#F97583;">...</span><span style="color:#E1E4E8;">options: any[]) {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">// 组件已经被安装了 若是开发环境 则抛出警告</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">if</span><span style="color:#E1E4E8;"> (installedPlugins.</span><span style="color:#B392F0;">has</span><span style="color:#E1E4E8;">(plugin)) {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> __DEV__ </span><span style="color:#F97583;">&&</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">warn</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">\`Plugin has already been applied to target app.\`</span><span style="color:#E1E4E8;">)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> }</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">// 组件未安装 且install方法为函数 那么执行安装 并调用install方法</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">// installedPlugins是一个Set 用于记录已经安装的组件</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">else</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">if</span><span style="color:#E1E4E8;"> (plugin </span><span style="color:#F97583;">&&</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">isFunction</span><span style="color:#E1E4E8;">(plugin.install)) {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> installedPlugins.</span><span style="color:#B392F0;">add</span><span style="color:#E1E4E8;">(plugin)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> plugin.</span><span style="color:#B392F0;">install</span><span style="color:#E1E4E8;">(app, </span><span style="color:#F97583;">...</span><span style="color:#E1E4E8;">options)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> }</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">// 传入Vue.use本身就是一个函数 那么执行这个函数</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">else</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">if</span><span style="color:#E1E4E8;"> (</span><span style="color:#B392F0;">isFunction</span><span style="color:#E1E4E8;">(plugin)) {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> installedPlugins.</span><span style="color:#B392F0;">add</span><span style="color:#E1E4E8;">(plugin)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">plugin</span><span style="color:#E1E4E8;">(app, </span><span style="color:#F97583;">...</span><span style="color:#E1E4E8;">options)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> }</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">// 如果当前为开发环境 且Vue.use未传参 则抛出警告</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">else</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">if</span><span style="color:#E1E4E8;"> (__DEV__) {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">warn</span><span style="color:#E1E4E8;">(</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">\`A plugin must either be a function or an object with an "install" \`</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">+</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">\`function.\`</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> )</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> }</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">// 执行结束 返回App本身便于链式调用</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;"> app</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> }</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">use</span><span style="color:#24292E;">(plugin: Plugin, </span><span style="color:#D73A49;">...</span><span style="color:#24292E;">options: any[]) {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6A737D;">// 组件已经被安装了 若是开发环境 则抛出警告</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">if</span><span style="color:#24292E;"> (installedPlugins.</span><span style="color:#6F42C1;">has</span><span style="color:#24292E;">(plugin)) {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> __DEV__ </span><span style="color:#D73A49;">&&</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">warn</span><span style="color:#24292E;">(</span><span style="color:#032F62;">\`Plugin has already been applied to target app.\`</span><span style="color:#24292E;">)</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> }</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6A737D;">// 组件未安装 且install方法为函数 那么执行安装 并调用install方法</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6A737D;">// installedPlugins是一个Set 用于记录已经安装的组件</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">else</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">if</span><span style="color:#24292E;"> (plugin </span><span style="color:#D73A49;">&&</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">isFunction</span><span style="color:#24292E;">(plugin.install)) {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> installedPlugins.</span><span style="color:#6F42C1;">add</span><span style="color:#24292E;">(plugin)</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> plugin.</span><span style="color:#6F42C1;">install</span><span style="color:#24292E;">(app, </span><span style="color:#D73A49;">...</span><span style="color:#24292E;">options)</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> }</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6A737D;">// 传入Vue.use本身就是一个函数 那么执行这个函数</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">else</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">if</span><span style="color:#24292E;"> (</span><span style="color:#6F42C1;">isFunction</span><span style="color:#24292E;">(plugin)) {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> installedPlugins.</span><span style="color:#6F42C1;">add</span><span style="color:#24292E;">(plugin)</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">plugin</span><span style="color:#24292E;">(app, </span><span style="color:#D73A49;">...</span><span style="color:#24292E;">options)</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> }</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6A737D;">// 如果当前为开发环境 且Vue.use未传参 则抛出警告</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">else</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">if</span><span style="color:#24292E;"> (__DEV__) {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">warn</span><span style="color:#24292E;">(</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#032F62;">\`A plugin must either be a function or an object with an "install" \`</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">+</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#032F62;">\`function.\`</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> )</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> }</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6A737D;">// 执行结束 返回App本身便于链式调用</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> app</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> }</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br></div></div><h2 id="手动引入-注册组件" tabindex="-1">手动引入&注册组件 <a class="header-anchor" href="#手动引入-注册组件" aria-label="Permalink to "手动引入&注册组件""></a></h2><p>有时候，我们不希望全局注册一个组件库，导致整个项目体积变得巨大，而是希望能只引入某些用到的组件，但是又不想用到一个组件就需要手动的导入、注册。</p><p>除了使用组件库提供的自动导入插件，我们还可以手动实现一个“半自动导入组件”的功能。</p><p>编写一个<code>register-element.ts</code>文件，将所有我们项目中需要用到的组件都在此文件中引入并注册。</p><div class="language-ts vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#6A737D;">// register-element.ts</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F97583;">declare</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">function</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">require</span><span style="color:#E1E4E8;">(</span><span style="color:#FFAB70;">moduleName</span><span style="color:#F97583;">:</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">string</span><span style="color:#E1E4E8;">)</span><span style="color:#F97583;">:</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">void</span></span>
|
||||
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">type</span><span style="color:#E1E4E8;"> { App } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'vue'</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'element-plus/theme-chalk/base.css'</span></span>
|
||||
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'element-plus/theme-chalk/dark/css-vars.css'</span></span>
|
||||
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'element-plus/theme-chalk/el-loading.css'</span></span>
|
||||
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> ElButton,</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> ElTabs,</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> ElTabPane</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">} </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'element-plus'</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">components</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> [</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> ElButton,</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> ElTabs,</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> ElTabPane</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">]</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F97583;">export</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">default</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">function</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">registerElement</span><span style="color:#E1E4E8;">(</span><span style="color:#FFAB70;">app</span><span style="color:#F97583;">:</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">App</span><span style="color:#E1E4E8;">)</span><span style="color:#F97583;">:</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">void</span><span style="color:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> components.</span><span style="color:#B392F0;">forEach</span><span style="color:#E1E4E8;">((</span><span style="color:#FFAB70;">c</span><span style="color:#E1E4E8;">) </span><span style="color:#F97583;">=></span><span style="color:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">name</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">transferCamel</span><span style="color:#E1E4E8;">(c.name)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">// 引入组件样式 将驼峰改为-分隔命名</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">require</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">\`element-plus/theme-chalk/\${</span><span style="color:#E1E4E8;">name</span><span style="color:#9ECBFF;">}.css\`</span><span style="color:#E1E4E8;">)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">// 注册组件</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> app.</span><span style="color:#B392F0;">component</span><span style="color:#E1E4E8;">(name, c)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> })</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F97583;">function</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">transferCamel</span><span style="color:#E1E4E8;">(</span><span style="color:#FFAB70;">camel</span><span style="color:#F97583;">:</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">string</span><span style="color:#E1E4E8;">)</span><span style="color:#F97583;">:</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">string</span><span style="color:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;"> camel</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> .</span><span style="color:#B392F0;">replace</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">/</span><span style="color:#DBEDFF;">(</span><span style="color:#79B8FF;">[A-Z]</span><span style="color:#DBEDFF;">)</span><span style="color:#9ECBFF;">/</span><span style="color:#F97583;">g</span><span style="color:#E1E4E8;">, </span><span style="color:#9ECBFF;">'-$1'</span><span style="color:#E1E4E8;">)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> .</span><span style="color:#B392F0;">toLowerCase</span><span style="color:#E1E4E8;">()</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> .</span><span style="color:#B392F0;">slice</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">1</span><span style="color:#E1E4E8;">)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">}</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#6A737D;">// register-element.ts</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#D73A49;">declare</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">function</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">require</span><span style="color:#24292E;">(</span><span style="color:#E36209;">moduleName</span><span style="color:#D73A49;">:</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">string</span><span style="color:#24292E;">)</span><span style="color:#D73A49;">:</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">void</span></span>
|
||||
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">type</span><span style="color:#24292E;"> { App } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'vue'</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'element-plus/theme-chalk/base.css'</span></span>
|
||||
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'element-plus/theme-chalk/dark/css-vars.css'</span></span>
|
||||
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'element-plus/theme-chalk/el-loading.css'</span></span>
|
||||
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> ElButton,</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> ElTabs,</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> ElTabPane</span></span>
|
||||
<span class="line"><span style="color:#24292E;">} </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'element-plus'</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">components</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> [</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> ElButton,</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> ElTabs,</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> ElTabPane</span></span>
|
||||
<span class="line"><span style="color:#24292E;">]</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#D73A49;">export</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">default</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">function</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">registerElement</span><span style="color:#24292E;">(</span><span style="color:#E36209;">app</span><span style="color:#D73A49;">:</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">App</span><span style="color:#24292E;">)</span><span style="color:#D73A49;">:</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">void</span><span style="color:#24292E;"> {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> components.</span><span style="color:#6F42C1;">forEach</span><span style="color:#24292E;">((</span><span style="color:#E36209;">c</span><span style="color:#24292E;">) </span><span style="color:#D73A49;">=></span><span style="color:#24292E;"> {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">name</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">transferCamel</span><span style="color:#24292E;">(c.name)</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6A737D;">// 引入组件样式 将驼峰改为-分隔命名</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">require</span><span style="color:#24292E;">(</span><span style="color:#032F62;">\`element-plus/theme-chalk/\${</span><span style="color:#24292E;">name</span><span style="color:#032F62;">}.css\`</span><span style="color:#24292E;">)</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6A737D;">// 注册组件</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> app.</span><span style="color:#6F42C1;">component</span><span style="color:#24292E;">(name, c)</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> })</span></span>
|
||||
<span class="line"><span style="color:#24292E;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#D73A49;">function</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">transferCamel</span><span style="color:#24292E;">(</span><span style="color:#E36209;">camel</span><span style="color:#D73A49;">:</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">string</span><span style="color:#24292E;">)</span><span style="color:#D73A49;">:</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">string</span><span style="color:#24292E;"> {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> camel</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> .</span><span style="color:#6F42C1;">replace</span><span style="color:#24292E;">(</span><span style="color:#032F62;">/(</span><span style="color:#005CC5;">[A-Z]</span><span style="color:#032F62;">)/</span><span style="color:#D73A49;">g</span><span style="color:#24292E;">, </span><span style="color:#032F62;">'-$1'</span><span style="color:#24292E;">)</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> .</span><span style="color:#6F42C1;">toLowerCase</span><span style="color:#24292E;">()</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> .</span><span style="color:#6F42C1;">slice</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">1</span><span style="color:#24292E;">)</span></span>
|
||||
<span class="line"><span style="color:#24292E;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br></div></div><p>阅读完源码我们发现，如果为<code>Vue.use()</code>传入的是一个函数，那么Vue会将app实例传入并调用这个函数。因此，我们只需要在<code>main.ts</code>中在<code>App</code>实例上链式调用<code>.use</code>方法，并将<code>registerElement</code>函数传入，那么Vue会自动将<code>app</code>实例传入并调用这个方法：</p><div class="language-ts vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#6A737D;">// main.ts</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { createApp } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'vue'</span></span>
|
||||
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> App </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'./App.vue'</span></span>
|
||||
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> registerElement </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'./global/register-element.ts'</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">app</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">createApp</span><span style="color:#E1E4E8;">(App).</span><span style="color:#B392F0;">use</span><span style="color:#E1E4E8;">(registerElement)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">app.</span><span style="color:#B392F0;">mount</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">'#app'</span><span style="color:#E1E4E8;">)</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#6A737D;">// main.ts</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { createApp } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'vue'</span></span>
|
||||
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> App </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'./App.vue'</span></span>
|
||||
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> registerElement </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'./global/register-element.ts'</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">app</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">createApp</span><span style="color:#24292E;">(App).</span><span style="color:#6F42C1;">use</span><span style="color:#24292E;">(registerElement)</span></span>
|
||||
<span class="line"><span style="color:#24292E;">app.</span><span style="color:#6F42C1;">mount</span><span style="color:#24292E;">(</span><span style="color:#032F62;">'#app'</span><span style="color:#24292E;">)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>当有新的需要使用的组件时，只需要到<code>register-element.ts</code>文件中引入一次即可。</p><h2 id="参考阅读" tabindex="-1">参考阅读 <a class="header-anchor" href="#参考阅读" aria-label="Permalink to "参考阅读""></a></h2><p><a href="https://vuejs.org/api/application.html#app-use" target="_blank" rel="noreferrer">Vue文档: App.use</a></p><p><a href="https://vuejs.org/guide/reusability/plugins.html" target="_blank" rel="noreferrer">Vue文档: Plugins</a></p>`,26),o=[e];function c(r,t,E,y,i,u){return n(),a("div",null,o)}const d=s(l,[["render",c]]);export{b as __pageData,d as default};
|
||||
@@ -0,0 +1 @@
|
||||
import{_ as s,o as n,c as a,Q as p}from"./chunks/framework.4001cd3b.js";const b=JSON.parse('{"title":"深入Vue3源码，看看Vue.use后究竟发生了什么？","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入Vue3源码，看看Vue.use后究竟发生了什么？.md","filePath":"article/深入Vue3源码，看看Vue.use后究竟发生了什么？.md","lastUpdated":1697384672000}'),l={name:"article/深入Vue3源码，看看Vue.use后究竟发生了什么？.md"},e=p("",26),o=[e];function c(r,t,E,y,i,u){return n(),a("div",null,o)}const d=s(l,[["render",c]]);export{b as __pageData,d as default};
|
||||
@@ -1,100 +0,0 @@
|
||||
import{_ as s,o as n,c as a,S as l}from"./chunks/framework.04e6e156.js";const u=JSON.parse('{"title":"深入Vue3源码，看看Vue.use后究竟发生了什么？","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入Vue3源码，看看Vue.use后究竟发生了什么？.md","filePath":"article/深入Vue3源码，看看Vue.use后究竟发生了什么？.md","lastUpdated":1697042822000}'),p={name:"article/深入Vue3源码，看看Vue.use后究竟发生了什么？.md"},e=l(`<h1 id="深入vue3源码-看看vue-use后究竟发生了什么" tabindex="-1">深入Vue3源码，看看Vue.use后究竟发生了什么？ <a class="header-anchor" href="#深入vue3源码-看看vue-use后究竟发生了什么" aria-label="Permalink to "深入Vue3源码，看看Vue.use后究竟发生了什么？""></a></h1><h2 id="从全局注册组件库入手" tabindex="-1">从全局注册组件库入手 <a class="header-anchor" href="#从全局注册组件库入手" aria-label="Permalink to "从全局注册组件库入手""></a></h2><p>如果我们自定义了几个自定义组件，当我们想在<code>.vue</code>文件中使用它们时，需要手动<code>import</code>导入组件并在<code>component</code>中注册：</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> CustomInput </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@/component/CustomInput.vue</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> CustomInput</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>通过<code>Vue.use</code>将<code>ElementPlus</code>全局注册后，所有的组件都可以在<code>.vue</code>的<code><template></code>标签中直接使用，不需要再导入、注册。</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> ElementPlus </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">element-plus</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">Vue</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">use</span><span style="color:#A6ACCD;">(ElementPlus)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>这个过程里<code>Vue.use</code>究竟为我们做了哪些事？</p><p>假设我此时有两个自定义组件<code>ZiuInput</code>与<code>ZiuButton</code>位于<code>@/module/ZiuUI/component</code>目录下，我希望能通过<code>Vue.use</code>达到像<code>ElementPlus</code>那样免导入注册就能直接使用的效果。</p><p>于是我在<code>ZiuUI</code>目录下创建了<code>index.js</code>，并在其中编写以下代码：</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// @/module/ZiuUI/index.js</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> ZiuInput </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">./component/ziu-input.vue</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> ZiuButton </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">./component/ziu-button.vue</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> components </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [ ZiuInput</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> ZiuButton ]</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> ZiuUI </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">install</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">Vue</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 注册组件</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">components</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">forEach</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;font-style:italic;">component</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">Vue</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">component</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">component</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">name</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">component</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> ZiuUI</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><p>当我们将<code>ZiuUI</code>这个对象传给<code>Vue.use()</code>时，<code>Vue</code>会自动调用其中的<code>install</code>方法，并将<code>Vue</code>实例传入其中，那么我们就可以在<code>install</code>方法中实现组件的全局注册。</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// @/main.js</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Vue </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">vue</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> App </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">./App</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> ZiuUI </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">./module/ZiuUI</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">Vue</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">use</span><span style="color:#A6ACCD;">(ZiuUI) </span><span style="color:#676E95;font-style:italic;">// 将ZiuUI传入Vue.use()</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">...</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="深入源码" tabindex="-1">深入源码 <a class="header-anchor" href="#深入源码" aria-label="Permalink to "深入源码""></a></h2><p>下载Vue3的源码阅读，我们可以发现<code>use</code>相关的代码：</p><div class="language-ts line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#82AAFF;">use</span><span style="color:#A6ACCD;">(plugin: Plugin</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">...</span><span style="color:#A6ACCD;">options: any[]) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 组件已经被安装了 若是开发环境 则抛出警告</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">installedPlugins</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">has</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">plugin</span><span style="color:#F07178;">)) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">__DEV__</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&&</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">warn</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">\`</span><span style="color:#C3E88D;">Plugin has already been applied to target app.</span><span style="color:#89DDFF;">\`</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 组件未安装 且install方法为函数 那么执行安装 并调用install方法</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// installedPlugins是一个Set 用于记录已经安装的组件</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">else</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">plugin</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&&</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">isFunction</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">plugin</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">install</span><span style="color:#F07178;">)) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">installedPlugins</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">plugin</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">plugin</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">install</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">app</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">...</span><span style="color:#A6ACCD;">options</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 传入Vue.use本身就是一个函数 那么执行这个函数</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">else</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#82AAFF;">isFunction</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">plugin</span><span style="color:#F07178;">)) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">installedPlugins</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">plugin</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">plugin</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">app</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">...</span><span style="color:#A6ACCD;">options</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 如果当前为开发环境 且Vue.use未传参 则抛出警告</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">else</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">__DEV__</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">warn</span><span style="color:#F07178;">(</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">\`</span><span style="color:#C3E88D;">A plugin must either be a function or an object with an "install" </span><span style="color:#89DDFF;">\`</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">\`</span><span style="color:#C3E88D;">function.</span><span style="color:#89DDFF;">\`</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> )</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 执行结束 返回App本身便于链式调用</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">app</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br></div></div><h2 id="手动引入-注册组件" tabindex="-1">手动引入&注册组件 <a class="header-anchor" href="#手动引入-注册组件" aria-label="Permalink to "手动引入&注册组件""></a></h2><p>有时候，我们不希望全局注册一个组件库，导致整个项目体积变得巨大，而是希望能只引入某些用到的组件，但是又不想用到一个组件就需要手动的导入、注册。</p><p>除了使用组件库提供的自动导入插件，我们还可以手动实现一个“半自动导入组件”的功能。</p><p>编写一个<code>register-element.ts</code>文件，将所有我们项目中需要用到的组件都在此文件中引入并注册。</p><div class="language-ts line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// register-element.ts</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#C792EA;">declare</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">require</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">moduleName</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">):</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">void</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">type</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">App</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">vue</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">element-plus/theme-chalk/base.css</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">element-plus/theme-chalk/dark/css-vars.css</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">element-plus/theme-chalk/el-loading.css</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">ElButton</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">ElTabs</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">ElTabPane</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">element-plus</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> components </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ElButton</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ElTabs</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ElTabPane</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">]</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">registerElement</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">app</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">App</span><span style="color:#89DDFF;">):</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">void</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">components</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">forEach</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">c</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">name</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">transferCamel</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">c</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">name</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 引入组件样式 将驼峰改为-分隔命名</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">require</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">\`</span><span style="color:#C3E88D;">element-plus/theme-chalk/</span><span style="color:#89DDFF;">\${</span><span style="color:#A6ACCD;">name</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;">.css</span><span style="color:#89DDFF;">\`</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 注册组件</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">app</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">component</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">name</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">c</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">transferCamel</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">camel</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">):</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">camel</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">replace</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">/([</span><span style="color:#C3E88D;">A-Z</span><span style="color:#89DDFF;">])/</span><span style="color:#F78C6C;">g</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">-$1</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toLowerCase</span><span style="color:#F07178;">()</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">slice</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">1</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br></div></div><p>阅读完源码我们发现，如果为<code>Vue.use()</code>传入的是一个函数，那么Vue会将app实例传入并调用这个函数。因此，我们只需要在<code>main.ts</code>中在<code>App</code>实例上链式调用<code>.use</code>方法，并将<code>registerElement</code>函数传入，那么Vue会自动将<code>app</code>实例传入并调用这个方法：</p><div class="language-ts line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// main.ts</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">createApp</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">vue</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> App </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">./App.vue</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> registerElement </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">./global/register-element.ts</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> app </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">createApp</span><span style="color:#A6ACCD;">(App)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">use</span><span style="color:#A6ACCD;">(registerElement)</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">app</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">mount</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">#app</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>当有新的需要使用的组件时，只需要到<code>register-element.ts</code>文件中引入一次即可。</p><h2 id="参考阅读" tabindex="-1">参考阅读 <a class="header-anchor" href="#参考阅读" aria-label="Permalink to "参考阅读""></a></h2><p><a href="https://vuejs.org/api/application.html#app-use" target="_blank" rel="noreferrer">Vue文档: App.use</a></p><p><a href="https://vuejs.org/guide/reusability/plugins.html" target="_blank" rel="noreferrer">Vue文档: Plugins</a></p>`,26),o=[e];function t(c,r,y,i,F,D){return n(),a("div",null,o)}const C=s(p,[["render",t]]);export{u as __pageData,C as default};
|
||||
@@ -1 +0,0 @@
|
||||
import{_ as s,o as n,c as a,S as l}from"./chunks/framework.04e6e156.js";const u=JSON.parse('{"title":"深入Vue3源码，看看Vue.use后究竟发生了什么？","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入Vue3源码，看看Vue.use后究竟发生了什么？.md","filePath":"article/深入Vue3源码，看看Vue.use后究竟发生了什么？.md","lastUpdated":1697042822000}'),p={name:"article/深入Vue3源码，看看Vue.use后究竟发生了什么？.md"},e=l("",26),o=[e];function t(c,r,y,i,F,D){return n(),a("div",null,o)}const C=s(p,[["render",t]]);export{u as __pageData,C as default};
|
||||
289
assets/article_深入理解Proxy与Reflect.md.401b4485.js
Normal file
289
assets/article_深入理解Proxy与Reflect.md.401b4485.js
Normal file
@@ -0,0 +1,289 @@
|
||||
import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.4001cd3b.js";const u=JSON.parse('{"title":"深入理解Proxy与Reflect","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入理解Proxy与Reflect.md","filePath":"article/深入理解Proxy与Reflect.md","lastUpdated":1697384672000}'),p={name:"article/深入理解Proxy与Reflect.md"},o=l(`<h1 id="深入理解proxy与reflect" tabindex="-1">深入理解Proxy与Reflect <a class="header-anchor" href="#深入理解proxy与reflect" aria-label="Permalink to "深入理解Proxy与Reflect""></a></h1><h3 id="监听对象的操作" tabindex="-1">监听对象的操作 <a class="header-anchor" href="#监听对象的操作" aria-label="Permalink to "监听对象的操作""></a></h3><p>可以使用Proxy对象将原对象包裹，此后的操作都对<code>proxy</code>进行，每次<code>get</code>与<code>set</code>被触发时都会自动执行相应代码</p><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">obj</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> name: </span><span style="color:#9ECBFF;">'ziu'</span><span style="color:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> age: </span><span style="color:#79B8FF;">18</span><span style="color:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> height: </span><span style="color:#79B8FF;">1.88</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">}</span></span>
|
||||
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">proxy</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">new</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">Proxy</span><span style="color:#E1E4E8;">(obj, {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">get</span><span style="color:#E1E4E8;">(</span><span style="color:#FFAB70;">target</span><span style="color:#E1E4E8;">, </span><span style="color:#FFAB70;">key</span><span style="color:#E1E4E8;">) {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">'get'</span><span style="color:#E1E4E8;">, key)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;"> target[key]</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> },</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">set</span><span style="color:#E1E4E8;">(</span><span style="color:#FFAB70;">target</span><span style="color:#E1E4E8;">, </span><span style="color:#FFAB70;">key</span><span style="color:#E1E4E8;">, </span><span style="color:#FFAB70;">value</span><span style="color:#E1E4E8;">) {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">'set'</span><span style="color:#E1E4E8;">, key, value)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> target[key] </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> value</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> }</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">})</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">obj</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> name: </span><span style="color:#032F62;">'ziu'</span><span style="color:#24292E;">,</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> age: </span><span style="color:#005CC5;">18</span><span style="color:#24292E;">,</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> height: </span><span style="color:#005CC5;">1.88</span></span>
|
||||
<span class="line"><span style="color:#24292E;">}</span></span>
|
||||
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">proxy</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">new</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">Proxy</span><span style="color:#24292E;">(obj, {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">get</span><span style="color:#24292E;">(</span><span style="color:#E36209;">target</span><span style="color:#24292E;">, </span><span style="color:#E36209;">key</span><span style="color:#24292E;">) {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#032F62;">'get'</span><span style="color:#24292E;">, key)</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> target[key]</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> },</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">set</span><span style="color:#24292E;">(</span><span style="color:#E36209;">target</span><span style="color:#24292E;">, </span><span style="color:#E36209;">key</span><span style="color:#24292E;">, </span><span style="color:#E36209;">value</span><span style="color:#24292E;">) {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#032F62;">'set'</span><span style="color:#24292E;">, key, value)</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> target[key] </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> value</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> }</span></span>
|
||||
<span class="line"><span style="color:#24292E;">})</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">tmp</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> proxy.height </span><span style="color:#6A737D;">// getter被触发</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">proxy.name </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'Ziu'</span><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">// setter被触发</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">tmp</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> proxy.height </span><span style="color:#6A737D;">// getter被触发</span></span>
|
||||
<span class="line"><span style="color:#24292E;">proxy.name </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'Ziu'</span><span style="color:#24292E;"> </span><span style="color:#6A737D;">// setter被触发</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>除此之外，在之前的版本中可以通过<code>Object.defineProperty</code>为对象中某个属性设置<code>getter</code>与<code>setter</code>函数，可以达到类似的效果</p><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">for</span><span style="color:#E1E4E8;"> (</span><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">key</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">of</span><span style="color:#E1E4E8;"> Object.</span><span style="color:#B392F0;">keys</span><span style="color:#E1E4E8;">(obj)) {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">let</span><span style="color:#E1E4E8;"> value </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> obj[key]</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> Object.</span><span style="color:#B392F0;">defineProperty</span><span style="color:#E1E4E8;">(obj, key, {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">get</span><span style="color:#E1E4E8;">() {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">'get'</span><span style="color:#E1E4E8;">, value)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;"> value</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> },</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">set</span><span style="color:#E1E4E8;">(</span><span style="color:#FFAB70;">newVal</span><span style="color:#E1E4E8;">) {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">'set'</span><span style="color:#E1E4E8;">, key, newVal)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> value </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> newVal</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> }</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> })</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">}</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">for</span><span style="color:#24292E;"> (</span><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">key</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">of</span><span style="color:#24292E;"> Object.</span><span style="color:#6F42C1;">keys</span><span style="color:#24292E;">(obj)) {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">let</span><span style="color:#24292E;"> value </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> obj[key]</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> Object.</span><span style="color:#6F42C1;">defineProperty</span><span style="color:#24292E;">(obj, key, {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">get</span><span style="color:#24292E;">() {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#032F62;">'get'</span><span style="color:#24292E;">, value)</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> value</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> },</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">set</span><span style="color:#24292E;">(</span><span style="color:#E36209;">newVal</span><span style="color:#24292E;">) {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#032F62;">'set'</span><span style="color:#24292E;">, key, newVal)</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> value </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> newVal</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> }</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> })</span></span>
|
||||
<span class="line"><span style="color:#24292E;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p>但是通过<code>Object.defineProperty</code>实现的监听存在问题：</p><ul><li><code>Object.defineProperty</code>设计之初并不是为了监听一个对象中的所有属性的</li><li>如果要监听新增/删除属性，那么此时<code>Object.defineProperty</code>是无能为力的</li></ul><h3 id="proxy类基本使用" tabindex="-1">Proxy类基本使用 <a class="header-anchor" href="#proxy类基本使用" aria-label="Permalink to "Proxy类基本使用""></a></h3><div class="language-JS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">JS</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">proxy</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">new</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">Proxy</span><span style="color:#E1E4E8;">(target, handler)</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">proxy</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">new</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">Proxy</span><span style="color:#24292E;">(target, handler)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>即使不传入handler，默认也会进行基本的代理操作</p><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">obj</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> name: </span><span style="color:#9ECBFF;">'ziu'</span><span style="color:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> age: </span><span style="color:#79B8FF;">18</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">}</span></span>
|
||||
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">proxy</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">new</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">Proxy</span><span style="color:#E1E4E8;">(obj, {})</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">proxy.height </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">1.88</span><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">// 添加新属性</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">proxy.name </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'Ziu'</span><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">// 修改原属性</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(obj) </span><span style="color:#6A737D;">// { name: 'Ziu', age: 18, height: 1.88 }</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">obj</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> name: </span><span style="color:#032F62;">'ziu'</span><span style="color:#24292E;">,</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> age: </span><span style="color:#005CC5;">18</span></span>
|
||||
<span class="line"><span style="color:#24292E;">}</span></span>
|
||||
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">proxy</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">new</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">Proxy</span><span style="color:#24292E;">(obj, {})</span></span>
|
||||
<span class="line"><span style="color:#24292E;">proxy.height </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">1.88</span><span style="color:#24292E;"> </span><span style="color:#6A737D;">// 添加新属性</span></span>
|
||||
<span class="line"><span style="color:#24292E;">proxy.name </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'Ziu'</span><span style="color:#24292E;"> </span><span style="color:#6A737D;">// 修改原属性</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#24292E;">console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(obj) </span><span style="color:#6A737D;">// { name: 'Ziu', age: 18, height: 1.88 }</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h3 id="捕获器" tabindex="-1">捕获器 <a class="header-anchor" href="#捕获器" aria-label="Permalink to "捕获器""></a></h3><p>常用的捕获器有<code>set</code>与<code>get</code>函数</p><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">proxy</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">new</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">Proxy</span><span style="color:#E1E4E8;">(obj, {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">set</span><span style="color:#E1E4E8;">: </span><span style="color:#F97583;">function</span><span style="color:#E1E4E8;"> (</span><span style="color:#FFAB70;">target</span><span style="color:#E1E4E8;">, </span><span style="color:#FFAB70;">key</span><span style="color:#E1E4E8;">, </span><span style="color:#FFAB70;">newVal</span><span style="color:#E1E4E8;">) {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">\`监听: \${</span><span style="color:#E1E4E8;">key</span><span style="color:#9ECBFF;">} 设置 \${</span><span style="color:#E1E4E8;">newVal</span><span style="color:#9ECBFF;">}\`</span><span style="color:#E1E4E8;">)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> target[key] </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> newVal</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> },</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">get</span><span style="color:#E1E4E8;">: </span><span style="color:#F97583;">function</span><span style="color:#E1E4E8;"> (</span><span style="color:#FFAB70;">target</span><span style="color:#E1E4E8;">, </span><span style="color:#FFAB70;">key</span><span style="color:#E1E4E8;">) {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">\`监听: \${</span><span style="color:#E1E4E8;">key</span><span style="color:#9ECBFF;">} 获取\`</span><span style="color:#E1E4E8;">)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;"> target[key]</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> }</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">})</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">proxy</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">new</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">Proxy</span><span style="color:#24292E;">(obj, {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">set</span><span style="color:#24292E;">: </span><span style="color:#D73A49;">function</span><span style="color:#24292E;"> (</span><span style="color:#E36209;">target</span><span style="color:#24292E;">, </span><span style="color:#E36209;">key</span><span style="color:#24292E;">, </span><span style="color:#E36209;">newVal</span><span style="color:#24292E;">) {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#032F62;">\`监听: \${</span><span style="color:#24292E;">key</span><span style="color:#032F62;">} 设置 \${</span><span style="color:#24292E;">newVal</span><span style="color:#032F62;">}\`</span><span style="color:#24292E;">)</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> target[key] </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> newVal</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> },</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">get</span><span style="color:#24292E;">: </span><span style="color:#D73A49;">function</span><span style="color:#24292E;"> (</span><span style="color:#E36209;">target</span><span style="color:#24292E;">, </span><span style="color:#E36209;">key</span><span style="color:#24292E;">) {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#032F62;">\`监听: \${</span><span style="color:#24292E;">key</span><span style="color:#032F62;">} 获取\`</span><span style="color:#24292E;">)</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> target[key]</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> }</span></span>
|
||||
<span class="line"><span style="color:#24292E;">})</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><ul><li>set函数有四个参数 <ul><li>target 目标对象（侦听的对象）</li><li>property 即将被设置的属性key</li><li>value 新属性值</li><li>receiver 调用的代理对象</li></ul></li><li>get函数有三个参数 <ul><li>target 目标对象（侦听的对象）</li><li>property 被获取的属性key</li><li>receiver 调用的代理对象</li></ul></li></ul><p>另外介绍两个捕获器：<code>has</code>与<code>deleteProperty</code></p><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">proxy</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">new</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">Proxy</span><span style="color:#E1E4E8;">(obj, {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">...</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> has: </span><span style="color:#F97583;">function</span><span style="color:#E1E4E8;"> (</span><span style="color:#FFAB70;">target</span><span style="color:#E1E4E8;">, </span><span style="color:#FFAB70;">key</span><span style="color:#E1E4E8;">) {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">\`监听: \${</span><span style="color:#E1E4E8;">key</span><span style="color:#9ECBFF;">} 判断\`</span><span style="color:#E1E4E8;">)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;"> key </span><span style="color:#F97583;">in</span><span style="color:#E1E4E8;"> target</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> },</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">deleteProperty</span><span style="color:#E1E4E8;">: </span><span style="color:#F97583;">function</span><span style="color:#E1E4E8;"> (</span><span style="color:#FFAB70;">target</span><span style="color:#E1E4E8;">, </span><span style="color:#FFAB70;">key</span><span style="color:#E1E4E8;">) {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">\`监听: \${</span><span style="color:#E1E4E8;">key</span><span style="color:#9ECBFF;">} 删除 \`</span><span style="color:#E1E4E8;">)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">true</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> }</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">})</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F97583;">delete</span><span style="color:#E1E4E8;"> proxy.name </span><span style="color:#6A737D;">// 监听: name 删除</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">'age'</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">in</span><span style="color:#E1E4E8;"> proxy) </span><span style="color:#6A737D;">// 监听: age 判断</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">proxy</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">new</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">Proxy</span><span style="color:#24292E;">(obj, {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">...</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> has: </span><span style="color:#D73A49;">function</span><span style="color:#24292E;"> (</span><span style="color:#E36209;">target</span><span style="color:#24292E;">, </span><span style="color:#E36209;">key</span><span style="color:#24292E;">) {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#032F62;">\`监听: \${</span><span style="color:#24292E;">key</span><span style="color:#032F62;">} 判断\`</span><span style="color:#24292E;">)</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> key </span><span style="color:#D73A49;">in</span><span style="color:#24292E;"> target</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> },</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">deleteProperty</span><span style="color:#24292E;">: </span><span style="color:#D73A49;">function</span><span style="color:#24292E;"> (</span><span style="color:#E36209;">target</span><span style="color:#24292E;">, </span><span style="color:#E36209;">key</span><span style="color:#24292E;">) {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#032F62;">\`监听: \${</span><span style="color:#24292E;">key</span><span style="color:#032F62;">} 删除 \`</span><span style="color:#24292E;">)</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">true</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> }</span></span>
|
||||
<span class="line"><span style="color:#24292E;">})</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#D73A49;">delete</span><span style="color:#24292E;"> proxy.name </span><span style="color:#6A737D;">// 监听: name 删除</span></span>
|
||||
<span class="line"><span style="color:#24292E;">console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#032F62;">'age'</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">in</span><span style="color:#24292E;"> proxy) </span><span style="color:#6A737D;">// 监听: age 判断</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h3 id="reflect" tabindex="-1">Reflect <a class="header-anchor" href="#reflect" aria-label="Permalink to "Reflect""></a></h3><p>Reflect是ES6新增的一个API，它本身是一个对象</p><ul><li>提供了很多操作JavaScript对象的方法，有点像Object中操作对象的方法</li><li>比如<code>Reflect.getPrototypeOf(target)</code>类似于<code>Object.getPrototypeOf()</code></li><li>比如<code>Reflect.defineProperty(targetm propertyKey, attributes)</code>类似于<code>Object.defineProperty()</code></li></ul><p>如果我们又Object对象可以完成这些操作，为什么还需要Reflect呢？</p><ul><li>Object作为一个构造函数，这些操作放到它身上并不合适</li><li>包含一些类似于 in delete的操作符</li><li>在ES6新增了Reflect，让这些操作都集中到了Reflect对象上</li><li>在使用Proxy时，可以做到不操作原对象</li></ul><h3 id="与object的区别" tabindex="-1">与Object的区别 <a class="header-anchor" href="#与object的区别" aria-label="Permalink to "与Object的区别""></a></h3><p>删除对象上的某个属性</p><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">obj</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> name: </span><span style="color:#9ECBFF;">'ziu'</span><span style="color:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> age: </span><span style="color:#79B8FF;">18</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">}</span></span>
|
||||
<span class="line"><span style="color:#6A737D;">// 当且仅当该属性的 configurable 键值为 true 时，该属性的描述符才能够被改变</span></span>
|
||||
<span class="line"><span style="color:#6A737D;">// 同时该属性也能从对应的对象上被删除。 默认为 false。</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">Object.</span><span style="color:#B392F0;">defineProperty</span><span style="color:#E1E4E8;">(obj, </span><span style="color:#9ECBFF;">'name'</span><span style="color:#E1E4E8;">, {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> configurable: </span><span style="color:#79B8FF;">false</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">})</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#6A737D;">// 1. 旧方法 检查\`delete obj.name\`是否执行成功</span></span>
|
||||
<span class="line"><span style="color:#6A737D;">// 结果: 需要额外编写检查代码且存在问题(严格模式下删除configurable为false的属性将报错)</span></span>
|
||||
<span class="line"><span style="color:#F97583;">delete</span><span style="color:#E1E4E8;"> obj.name</span></span>
|
||||
<span class="line"><span style="color:#F97583;">if</span><span style="color:#E1E4E8;"> (obj.name) {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">false</span><span style="color:#E1E4E8;">)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">} </span><span style="color:#F97583;">else</span><span style="color:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">true</span><span style="color:#E1E4E8;">)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#6A737D;">// 2. Reflect</span></span>
|
||||
<span class="line"><span style="color:#6A737D;">// 结果: 根据是否删除成功返回结果</span></span>
|
||||
<span class="line"><span style="color:#F97583;">if</span><span style="color:#E1E4E8;"> (Reflect.</span><span style="color:#B392F0;">deleteProperty</span><span style="color:#E1E4E8;">(obj, </span><span style="color:#9ECBFF;">'name'</span><span style="color:#E1E4E8;">)) {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">true</span><span style="color:#E1E4E8;">)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">} </span><span style="color:#F97583;">else</span><span style="color:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">false</span><span style="color:#E1E4E8;">)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">}</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">obj</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> name: </span><span style="color:#032F62;">'ziu'</span><span style="color:#24292E;">,</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> age: </span><span style="color:#005CC5;">18</span></span>
|
||||
<span class="line"><span style="color:#24292E;">}</span></span>
|
||||
<span class="line"><span style="color:#6A737D;">// 当且仅当该属性的 configurable 键值为 true 时，该属性的描述符才能够被改变</span></span>
|
||||
<span class="line"><span style="color:#6A737D;">// 同时该属性也能从对应的对象上被删除。 默认为 false。</span></span>
|
||||
<span class="line"><span style="color:#24292E;">Object.</span><span style="color:#6F42C1;">defineProperty</span><span style="color:#24292E;">(obj, </span><span style="color:#032F62;">'name'</span><span style="color:#24292E;">, {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> configurable: </span><span style="color:#005CC5;">false</span></span>
|
||||
<span class="line"><span style="color:#24292E;">})</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#6A737D;">// 1. 旧方法 检查\`delete obj.name\`是否执行成功</span></span>
|
||||
<span class="line"><span style="color:#6A737D;">// 结果: 需要额外编写检查代码且存在问题(严格模式下删除configurable为false的属性将报错)</span></span>
|
||||
<span class="line"><span style="color:#D73A49;">delete</span><span style="color:#24292E;"> obj.name</span></span>
|
||||
<span class="line"><span style="color:#D73A49;">if</span><span style="color:#24292E;"> (obj.name) {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">false</span><span style="color:#24292E;">)</span></span>
|
||||
<span class="line"><span style="color:#24292E;">} </span><span style="color:#D73A49;">else</span><span style="color:#24292E;"> {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">true</span><span style="color:#24292E;">)</span></span>
|
||||
<span class="line"><span style="color:#24292E;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#6A737D;">// 2. Reflect</span></span>
|
||||
<span class="line"><span style="color:#6A737D;">// 结果: 根据是否删除成功返回结果</span></span>
|
||||
<span class="line"><span style="color:#D73A49;">if</span><span style="color:#24292E;"> (Reflect.</span><span style="color:#6F42C1;">deleteProperty</span><span style="color:#24292E;">(obj, </span><span style="color:#032F62;">'name'</span><span style="color:#24292E;">)) {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">true</span><span style="color:#24292E;">)</span></span>
|
||||
<span class="line"><span style="color:#24292E;">} </span><span style="color:#D73A49;">else</span><span style="color:#24292E;"> {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">false</span><span style="color:#24292E;">)</span></span>
|
||||
<span class="line"><span style="color:#24292E;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br></div></div><h3 id="reflect常见方法" tabindex="-1">Reflect常见方法 <a class="header-anchor" href="#reflect常见方法" aria-label="Permalink to "Reflect常见方法""></a></h3><p>其中的方法与Proxy的方法是一一对应的，一共13个。其中的一些方法是Object对象中没有的：</p><ul><li><code>has</code> 判断一个对象是否存在某个属性，和 <code>in</code> 运算符功能完全相同</li><li><code>get</code> 获取对象身上某个属性的值，类似于<code>target[key]</code></li><li><code>set</code> 将值分配给属性的函数，返回一个Boolean，如果更新成功则返回true</li><li><code>deleteProperty</code> 作为函数的 <code>delete</code> 操作符，相当于执行 <code>delete target[key]</code></li><li>···</li></ul><p>代理对象的目的：不再直接操作原始对象，一切读写操作由代理完成。我们先前在编写Proxy的代理代码时，仍然有操作原对象的行为：</p><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">proxy</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">new</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">Proxy</span><span style="color:#E1E4E8;">(obj, {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">set</span><span style="color:#E1E4E8;">: </span><span style="color:#F97583;">function</span><span style="color:#E1E4E8;"> (</span><span style="color:#FFAB70;">target</span><span style="color:#E1E4E8;">, </span><span style="color:#FFAB70;">key</span><span style="color:#E1E4E8;">, </span><span style="color:#FFAB70;">newVal</span><span style="color:#E1E4E8;">) {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">\`监听: \${</span><span style="color:#E1E4E8;">key</span><span style="color:#9ECBFF;">} 设置 \${</span><span style="color:#E1E4E8;">newVal</span><span style="color:#9ECBFF;">}\`</span><span style="color:#E1E4E8;">)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> target[key] </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> newVal </span><span style="color:#6A737D;">// 直接操作原对象</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> },</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">})</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">proxy</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">new</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">Proxy</span><span style="color:#24292E;">(obj, {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">set</span><span style="color:#24292E;">: </span><span style="color:#D73A49;">function</span><span style="color:#24292E;"> (</span><span style="color:#E36209;">target</span><span style="color:#24292E;">, </span><span style="color:#E36209;">key</span><span style="color:#24292E;">, </span><span style="color:#E36209;">newVal</span><span style="color:#24292E;">) {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#032F62;">\`监听: \${</span><span style="color:#24292E;">key</span><span style="color:#032F62;">} 设置 \${</span><span style="color:#24292E;">newVal</span><span style="color:#032F62;">}\`</span><span style="color:#24292E;">)</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> target[key] </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> newVal </span><span style="color:#6A737D;">// 直接操作原对象</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> },</span></span>
|
||||
<span class="line"><span style="color:#24292E;">})</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>这时我们可以让Reflect登场，代替我们对原对象进行操作，之前的代码可以修改：</p><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">proxy</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">new</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">Proxy</span><span style="color:#E1E4E8;">(obj, {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">set</span><span style="color:#E1E4E8;">: </span><span style="color:#F97583;">function</span><span style="color:#E1E4E8;"> (</span><span style="color:#FFAB70;">target</span><span style="color:#E1E4E8;">, </span><span style="color:#FFAB70;">key</span><span style="color:#E1E4E8;">, </span><span style="color:#FFAB70;">newVal</span><span style="color:#E1E4E8;">) {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">\`监听: \${</span><span style="color:#E1E4E8;">key</span><span style="color:#9ECBFF;">} 设置 \${</span><span style="color:#E1E4E8;">newVal</span><span style="color:#9ECBFF;">}\`</span><span style="color:#E1E4E8;">)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> Reflect.</span><span style="color:#B392F0;">set</span><span style="color:#E1E4E8;">(target, key, newVal)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> },</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">get</span><span style="color:#E1E4E8;">: </span><span style="color:#F97583;">function</span><span style="color:#E1E4E8;"> (</span><span style="color:#FFAB70;">target</span><span style="color:#E1E4E8;">, </span><span style="color:#FFAB70;">key</span><span style="color:#E1E4E8;">) {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">\`监听: \${</span><span style="color:#E1E4E8;">key</span><span style="color:#9ECBFF;">} 获取\`</span><span style="color:#E1E4E8;">)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;"> Reflect.</span><span style="color:#B392F0;">get</span><span style="color:#E1E4E8;">(target, key)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> },</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">has</span><span style="color:#E1E4E8;">: </span><span style="color:#F97583;">function</span><span style="color:#E1E4E8;"> (</span><span style="color:#FFAB70;">target</span><span style="color:#E1E4E8;">, </span><span style="color:#FFAB70;">key</span><span style="color:#E1E4E8;">) {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">\`监听: \${</span><span style="color:#E1E4E8;">key</span><span style="color:#9ECBFF;">} 判断\`</span><span style="color:#E1E4E8;">)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;"> Reflect.</span><span style="color:#B392F0;">has</span><span style="color:#E1E4E8;">(target, key)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> }</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">})</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">proxy</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">new</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">Proxy</span><span style="color:#24292E;">(obj, {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">set</span><span style="color:#24292E;">: </span><span style="color:#D73A49;">function</span><span style="color:#24292E;"> (</span><span style="color:#E36209;">target</span><span style="color:#24292E;">, </span><span style="color:#E36209;">key</span><span style="color:#24292E;">, </span><span style="color:#E36209;">newVal</span><span style="color:#24292E;">) {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#032F62;">\`监听: \${</span><span style="color:#24292E;">key</span><span style="color:#032F62;">} 设置 \${</span><span style="color:#24292E;">newVal</span><span style="color:#032F62;">}\`</span><span style="color:#24292E;">)</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> Reflect.</span><span style="color:#6F42C1;">set</span><span style="color:#24292E;">(target, key, newVal)</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> },</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">get</span><span style="color:#24292E;">: </span><span style="color:#D73A49;">function</span><span style="color:#24292E;"> (</span><span style="color:#E36209;">target</span><span style="color:#24292E;">, </span><span style="color:#E36209;">key</span><span style="color:#24292E;">) {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#032F62;">\`监听: \${</span><span style="color:#24292E;">key</span><span style="color:#032F62;">} 获取\`</span><span style="color:#24292E;">)</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> Reflect.</span><span style="color:#6F42C1;">get</span><span style="color:#24292E;">(target, key)</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> },</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">has</span><span style="color:#24292E;">: </span><span style="color:#D73A49;">function</span><span style="color:#24292E;"> (</span><span style="color:#E36209;">target</span><span style="color:#24292E;">, </span><span style="color:#E36209;">key</span><span style="color:#24292E;">) {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#032F62;">\`监听: \${</span><span style="color:#24292E;">key</span><span style="color:#032F62;">} 判断\`</span><span style="color:#24292E;">)</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> Reflect.</span><span style="color:#6F42C1;">has</span><span style="color:#24292E;">(target, key)</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> }</span></span>
|
||||
<span class="line"><span style="color:#24292E;">})</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><p>使用Reflect替代之前的对象操作有以下好处：</p><ul><li>代理对象的目的：不再直接操作原对象</li><li>Reflect.set方法有返回Boolean值，可以判断本次操作是否成功</li><li>receiver就是外层的Proxy对象</li></ul><p>针对好处三，做出如下解释。以下述代码为例，<code>set name(){}</code>函数中的<code>this</code>指向的是<code>obj</code></p><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">obj</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> _name: </span><span style="color:#9ECBFF;">'ziu'</span><span style="color:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">set</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">name</span><span style="color:#E1E4E8;">(</span><span style="color:#FFAB70;">newVal</span><span style="color:#E1E4E8;">) {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">\`set name \${</span><span style="color:#E1E4E8;">newVal</span><span style="color:#9ECBFF;">}\`</span><span style="color:#E1E4E8;">)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">this</span><span style="color:#E1E4E8;">)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">this</span><span style="color:#E1E4E8;">._name </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> newVal</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> },</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">get</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">name</span><span style="color:#E1E4E8;">() {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">\`get name\`</span><span style="color:#E1E4E8;">)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">this</span><span style="color:#E1E4E8;">)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">this</span><span style="color:#E1E4E8;">._name</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> }</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(obj.name)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">obj.name </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'Ziu'</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">obj</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> _name: </span><span style="color:#032F62;">'ziu'</span><span style="color:#24292E;">,</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">set</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">name</span><span style="color:#24292E;">(</span><span style="color:#E36209;">newVal</span><span style="color:#24292E;">) {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#032F62;">\`set name \${</span><span style="color:#24292E;">newVal</span><span style="color:#032F62;">}\`</span><span style="color:#24292E;">)</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">this</span><span style="color:#24292E;">)</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">this</span><span style="color:#24292E;">._name </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> newVal</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> },</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">get</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">name</span><span style="color:#24292E;">() {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#032F62;">\`get name\`</span><span style="color:#24292E;">)</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">this</span><span style="color:#24292E;">)</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">this</span><span style="color:#24292E;">._name</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> }</span></span>
|
||||
<span class="line"><span style="color:#24292E;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#24292E;">console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(obj.name)</span></span>
|
||||
<span class="line"><span style="color:#24292E;">obj.name </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'Ziu'</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">proxy</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">new</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">Proxy</span><span style="color:#E1E4E8;">(obj, {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">set</span><span style="color:#E1E4E8;">: </span><span style="color:#F97583;">function</span><span style="color:#E1E4E8;"> (</span><span style="color:#FFAB70;">target</span><span style="color:#E1E4E8;">, </span><span style="color:#FFAB70;">key</span><span style="color:#E1E4E8;">, </span><span style="color:#FFAB70;">newVal</span><span style="color:#E1E4E8;">, </span><span style="color:#FFAB70;">receiver</span><span style="color:#E1E4E8;">) {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">\`监听: \${</span><span style="color:#E1E4E8;">key</span><span style="color:#9ECBFF;">} 设置 \${</span><span style="color:#E1E4E8;">newVal</span><span style="color:#9ECBFF;">}\`</span><span style="color:#E1E4E8;">)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> Reflect.</span><span style="color:#B392F0;">set</span><span style="color:#E1E4E8;">(target, key, newVal, receiver)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> },</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">get</span><span style="color:#E1E4E8;">: </span><span style="color:#F97583;">function</span><span style="color:#E1E4E8;"> (</span><span style="color:#FFAB70;">target</span><span style="color:#E1E4E8;">, </span><span style="color:#FFAB70;">key</span><span style="color:#E1E4E8;">, </span><span style="color:#FFAB70;">receiver</span><span style="color:#E1E4E8;">) {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">\`监听: \${</span><span style="color:#E1E4E8;">key</span><span style="color:#9ECBFF;">} 获取\`</span><span style="color:#E1E4E8;">)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;"> Reflect.</span><span style="color:#B392F0;">get</span><span style="color:#E1E4E8;">(target, key, receiver)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> }</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">})</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">proxy</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">new</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">Proxy</span><span style="color:#24292E;">(obj, {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">set</span><span style="color:#24292E;">: </span><span style="color:#D73A49;">function</span><span style="color:#24292E;"> (</span><span style="color:#E36209;">target</span><span style="color:#24292E;">, </span><span style="color:#E36209;">key</span><span style="color:#24292E;">, </span><span style="color:#E36209;">newVal</span><span style="color:#24292E;">, </span><span style="color:#E36209;">receiver</span><span style="color:#24292E;">) {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#032F62;">\`监听: \${</span><span style="color:#24292E;">key</span><span style="color:#032F62;">} 设置 \${</span><span style="color:#24292E;">newVal</span><span style="color:#032F62;">}\`</span><span style="color:#24292E;">)</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> Reflect.</span><span style="color:#6F42C1;">set</span><span style="color:#24292E;">(target, key, newVal, receiver)</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> },</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">get</span><span style="color:#24292E;">: </span><span style="color:#D73A49;">function</span><span style="color:#24292E;"> (</span><span style="color:#E36209;">target</span><span style="color:#24292E;">, </span><span style="color:#E36209;">key</span><span style="color:#24292E;">, </span><span style="color:#E36209;">receiver</span><span style="color:#24292E;">) {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#032F62;">\`监听: \${</span><span style="color:#24292E;">key</span><span style="color:#032F62;">} 获取\`</span><span style="color:#24292E;">)</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> Reflect.</span><span style="color:#6F42C1;">get</span><span style="color:#24292E;">(target, key, receiver)</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> }</span></span>
|
||||
<span class="line"><span style="color:#24292E;">})</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>我们使用Proxy代理，并且使用Reflect操作对象时，输出的<code>this</code>仍然为<code>obj</code>，需要注意的是，此处的<code>this</code>指向是默认指向原始对象<code>obj</code>，而如果业务需要改变<code>this</code>指向，此时可以为<code>Reflect.set()</code>的最后一个参数传入<code>receiver</code></p><h3 id="reflect-construct方法" tabindex="-1">Reflect.construct方法 <a class="header-anchor" href="#reflect-construct方法" aria-label="Permalink to "Reflect.construct方法""></a></h3><p>以下两段代码的实现结果是一样的：</p><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">function</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">Person</span><span style="color:#E1E4E8;">(</span><span style="color:#FFAB70;">name</span><span style="color:#E1E4E8;">, </span><span style="color:#FFAB70;">age</span><span style="color:#E1E4E8;">) {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">this</span><span style="color:#E1E4E8;">.name </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> name</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">this</span><span style="color:#E1E4E8;">.age </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> age</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F97583;">function</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">Student</span><span style="color:#E1E4E8;">(</span><span style="color:#FFAB70;">name</span><span style="color:#E1E4E8;">, </span><span style="color:#FFAB70;">age</span><span style="color:#E1E4E8;">) {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> Person.</span><span style="color:#B392F0;">call</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">this</span><span style="color:#E1E4E8;">, name, age) </span><span style="color:#6A737D;">// 借用</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">stu</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">new</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">Student</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">'ziu'</span><span style="color:#E1E4E8;">, </span><span style="color:#79B8FF;">18</span><span style="color:#E1E4E8;">)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(stu)</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">function</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">Person</span><span style="color:#24292E;">(</span><span style="color:#E36209;">name</span><span style="color:#24292E;">, </span><span style="color:#E36209;">age</span><span style="color:#24292E;">) {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">this</span><span style="color:#24292E;">.name </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> name</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">this</span><span style="color:#24292E;">.age </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> age</span></span>
|
||||
<span class="line"><span style="color:#24292E;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#D73A49;">function</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">Student</span><span style="color:#24292E;">(</span><span style="color:#E36209;">name</span><span style="color:#24292E;">, </span><span style="color:#E36209;">age</span><span style="color:#24292E;">) {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> Person.</span><span style="color:#6F42C1;">call</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">this</span><span style="color:#24292E;">, name, age) </span><span style="color:#6A737D;">// 借用</span></span>
|
||||
<span class="line"><span style="color:#24292E;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">stu</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">new</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">Student</span><span style="color:#24292E;">(</span><span style="color:#032F62;">'ziu'</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">18</span><span style="color:#24292E;">)</span></span>
|
||||
<span class="line"><span style="color:#24292E;">console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(stu)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">function</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">Person</span><span style="color:#E1E4E8;">(</span><span style="color:#FFAB70;">name</span><span style="color:#E1E4E8;">, </span><span style="color:#FFAB70;">age</span><span style="color:#E1E4E8;">) {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">this</span><span style="color:#E1E4E8;">.name </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> name</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">this</span><span style="color:#E1E4E8;">.age </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> age</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F97583;">function</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">Student</span><span style="color:#E1E4E8;">(</span><span style="color:#FFAB70;">name</span><span style="color:#E1E4E8;">, </span><span style="color:#FFAB70;">age</span><span style="color:#E1E4E8;">) {</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">// Person.call(this, name, age) // 借用</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">stu</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">new</span><span style="color:#E1E4E8;"> Reflect.</span><span style="color:#B392F0;">construct</span><span style="color:#E1E4E8;">(Person, [</span><span style="color:#9ECBFF;">'ziu'</span><span style="color:#E1E4E8;">, </span><span style="color:#79B8FF;">18</span><span style="color:#E1E4E8;">], Student)</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;">console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(stu)</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">function</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">Person</span><span style="color:#24292E;">(</span><span style="color:#E36209;">name</span><span style="color:#24292E;">, </span><span style="color:#E36209;">age</span><span style="color:#24292E;">) {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">this</span><span style="color:#24292E;">.name </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> name</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">this</span><span style="color:#24292E;">.age </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> age</span></span>
|
||||
<span class="line"><span style="color:#24292E;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#D73A49;">function</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">Student</span><span style="color:#24292E;">(</span><span style="color:#E36209;">name</span><span style="color:#24292E;">, </span><span style="color:#E36209;">age</span><span style="color:#24292E;">) {</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6A737D;">// Person.call(this, name, age) // 借用</span></span>
|
||||
<span class="line"><span style="color:#24292E;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">stu</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">new</span><span style="color:#24292E;"> Reflect.</span><span style="color:#6F42C1;">construct</span><span style="color:#24292E;">(Person, [</span><span style="color:#032F62;">'ziu'</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">18</span><span style="color:#24292E;">], Student)</span></span>
|
||||
<span class="line"><span style="color:#24292E;">console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(stu)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div>`,44),e=[o];function c(r,t,E,y,i,F){return n(),a("div",null,e)}const d=s(p,[["render",c]]);export{u as __pageData,d as default};
|
||||
1
assets/article_深入理解Proxy与Reflect.md.401b4485.lean.js
Normal file
1
assets/article_深入理解Proxy与Reflect.md.401b4485.lean.js
Normal file
@@ -0,0 +1 @@
|
||||
import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.4001cd3b.js";const u=JSON.parse('{"title":"深入理解Proxy与Reflect","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入理解Proxy与Reflect.md","filePath":"article/深入理解Proxy与Reflect.md","lastUpdated":1697384672000}'),p={name:"article/深入理解Proxy与Reflect.md"},o=l("",44),e=[o];function c(r,t,E,y,i,F){return n(),a("div",null,e)}const d=s(p,[["render",c]]);export{u as __pageData,d as default};
|
||||
@@ -1,145 +0,0 @@
|
||||
import{_ as s,o as n,c as a,S as l}from"./chunks/framework.04e6e156.js";const i=JSON.parse('{"title":"深入理解Proxy与Reflect","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入理解Proxy与Reflect.md","filePath":"article/深入理解Proxy与Reflect.md","lastUpdated":1697042822000}'),p={name:"article/深入理解Proxy与Reflect.md"},o=l(`<h1 id="深入理解proxy与reflect" tabindex="-1">深入理解Proxy与Reflect <a class="header-anchor" href="#深入理解proxy与reflect" aria-label="Permalink to "深入理解Proxy与Reflect""></a></h1><h3 id="监听对象的操作" tabindex="-1">监听对象的操作 <a class="header-anchor" href="#监听对象的操作" aria-label="Permalink to "监听对象的操作""></a></h3><p>可以使用Proxy对象将原对象包裹，此后的操作都对<code>proxy</code>进行，每次<code>get</code>与<code>set</code>被触发时都会自动执行相应代码</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> obj </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ziu</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">age</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">18</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1.88</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> proxy </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Proxy</span><span style="color:#A6ACCD;">(obj</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">get</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">target</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">key</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">get</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">key</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">target</span><span style="color:#F07178;">[</span><span style="color:#A6ACCD;">key</span><span style="color:#F07178;">]</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">set</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">target</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">key</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">value</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">set</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">key</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">value</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">target</span><span style="color:#F07178;">[</span><span style="color:#A6ACCD;">key</span><span style="color:#F07178;">] </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">value</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> tmp </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> proxy</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">height </span><span style="color:#676E95;font-style:italic;">// getter被触发</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">proxy</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">name </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Ziu</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// setter被触发</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>除此之外，在之前的版本中可以通过<code>Object.defineProperty</code>为对象中某个属性设置<code>getter</code>与<code>setter</code>函数，可以达到类似的效果</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">for</span><span style="color:#A6ACCD;"> (</span><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> key </span><span style="color:#89DDFF;">of</span><span style="color:#A6ACCD;"> Object</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">keys</span><span style="color:#A6ACCD;">(obj)) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">let</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">value</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">obj</span><span style="color:#F07178;">[</span><span style="color:#A6ACCD;">key</span><span style="color:#F07178;">]</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">Object</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">defineProperty</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">obj</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">key</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> get</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">get</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">value</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">value</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> set</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">newVal</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">set</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">key</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">newVal</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">value</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">newVal</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p>但是通过<code>Object.defineProperty</code>实现的监听存在问题：</p><ul><li><code>Object.defineProperty</code>设计之初并不是为了监听一个对象中的所有属性的</li><li>如果要监听新增/删除属性，那么此时<code>Object.defineProperty</code>是无能为力的</li></ul><h3 id="proxy类基本使用" tabindex="-1">Proxy类基本使用 <a class="header-anchor" href="#proxy类基本使用" aria-label="Permalink to "Proxy类基本使用""></a></h3><div class="language-JS line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">JS</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> proxy </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Proxy</span><span style="color:#A6ACCD;">(target</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> handler)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>即使不传入handler，默认也会进行基本的代理操作</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> obj </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ziu</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">age</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">18</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> proxy </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Proxy</span><span style="color:#A6ACCD;">(obj</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{}</span><span style="color:#A6ACCD;">)</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">proxy</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">height </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1.88</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 添加新属性</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">proxy</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">name </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Ziu</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 修改原属性</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(obj) </span><span style="color:#676E95;font-style:italic;">// { name: 'Ziu', age: 18, height: 1.88 }</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h3 id="捕获器" tabindex="-1">捕获器 <a class="header-anchor" href="#捕获器" aria-label="Permalink to "捕获器""></a></h3><p>常用的捕获器有<code>set</code>与<code>get</code>函数</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> proxy </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Proxy</span><span style="color:#A6ACCD;">(obj</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">set</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">target</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">key</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">newVal</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">\`</span><span style="color:#C3E88D;">监听: </span><span style="color:#89DDFF;">\${</span><span style="color:#A6ACCD;">key</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;"> 设置 </span><span style="color:#89DDFF;">\${</span><span style="color:#A6ACCD;">newVal</span><span style="color:#89DDFF;">}\`</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">target</span><span style="color:#F07178;">[</span><span style="color:#A6ACCD;">key</span><span style="color:#F07178;">] </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">newVal</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">get</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">target</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">key</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">\`</span><span style="color:#C3E88D;">监听: </span><span style="color:#89DDFF;">\${</span><span style="color:#A6ACCD;">key</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;"> 获取</span><span style="color:#89DDFF;">\`</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">target</span><span style="color:#F07178;">[</span><span style="color:#A6ACCD;">key</span><span style="color:#F07178;">]</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><ul><li>set函数有四个参数 <ul><li>target 目标对象（侦听的对象）</li><li>property 即将被设置的属性key</li><li>value 新属性值</li><li>receiver 调用的代理对象</li></ul></li><li>get函数有三个参数 <ul><li>target 目标对象（侦听的对象）</li><li>property 被获取的属性key</li><li>receiver 调用的代理对象</li></ul></li></ul><p>另外介绍两个捕获器：<code>has</code>与<code>deleteProperty</code></p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> proxy </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Proxy</span><span style="color:#A6ACCD;">(obj</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">...</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> has: </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">target</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">key</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">\`</span><span style="color:#C3E88D;">监听: </span><span style="color:#89DDFF;">\${</span><span style="color:#A6ACCD;">key</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;"> 判断</span><span style="color:#89DDFF;">\`</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">key</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">in</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">target</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">deleteProperty</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">target</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">key</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">\`</span><span style="color:#C3E88D;">监听: </span><span style="color:#89DDFF;">\${</span><span style="color:#A6ACCD;">key</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;"> 删除 </span><span style="color:#89DDFF;">\`</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;">delete</span><span style="color:#A6ACCD;"> proxy</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">name </span><span style="color:#676E95;font-style:italic;">// 监听: name 删除</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">age</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">in</span><span style="color:#A6ACCD;"> proxy) </span><span style="color:#676E95;font-style:italic;">// 监听: age 判断</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h3 id="reflect" tabindex="-1">Reflect <a class="header-anchor" href="#reflect" aria-label="Permalink to "Reflect""></a></h3><p>Reflect是ES6新增的一个API，它本身是一个对象</p><ul><li>提供了很多操作JavaScript对象的方法，有点像Object中操作对象的方法</li><li>比如<code>Reflect.getPrototypeOf(target)</code>类似于<code>Object.getPrototypeOf()</code></li><li>比如<code>Reflect.defineProperty(targetm propertyKey, attributes)</code>类似于<code>Object.defineProperty()</code></li></ul><p>如果我们又Object对象可以完成这些操作，为什么还需要Reflect呢？</p><ul><li>Object作为一个构造函数，这些操作放到它身上并不合适</li><li>包含一些类似于 in delete的操作符</li><li>在ES6新增了Reflect，让这些操作都集中到了Reflect对象上</li><li>在使用Proxy时，可以做到不操作原对象</li></ul><h3 id="与object的区别" tabindex="-1">与Object的区别 <a class="header-anchor" href="#与object的区别" aria-label="Permalink to "与Object的区别""></a></h3><p>删除对象上的某个属性</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> obj </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ziu</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">age</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">18</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">// 当且仅当该属性的 configurable 键值为 true 时，该属性的描述符才能够被改变</span></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">// 同时该属性也能从对应的对象上被删除。 默认为 false。</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">Object</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">defineProperty</span><span style="color:#A6ACCD;">(obj</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">name</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">configurable</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">false</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">// 1. 旧方法 检查\`delete obj.name\`是否执行成功</span></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">// 结果: 需要额外编写检查代码且存在问题(严格模式下删除configurable为false的属性将报错)</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">delete</span><span style="color:#A6ACCD;"> obj</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">name</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#A6ACCD;"> (obj</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">name) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#FF9CAC;">false</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">else</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#FF9CAC;">true</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">// 2. Reflect</span></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">// 结果: 根据是否删除成功返回结果</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#A6ACCD;"> (Reflect</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">deleteProperty</span><span style="color:#A6ACCD;">(obj</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">name</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">)) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#FF9CAC;">true</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">else</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#FF9CAC;">false</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br></div></div><h3 id="reflect常见方法" tabindex="-1">Reflect常见方法 <a class="header-anchor" href="#reflect常见方法" aria-label="Permalink to "Reflect常见方法""></a></h3><p>其中的方法与Proxy的方法是一一对应的，一共13个。其中的一些方法是Object对象中没有的：</p><ul><li><code>has</code> 判断一个对象是否存在某个属性，和 <code>in</code> 运算符功能完全相同</li><li><code>get</code> 获取对象身上某个属性的值，类似于<code>target[key]</code></li><li><code>set</code> 将值分配给属性的函数，返回一个Boolean，如果更新成功则返回true</li><li><code>deleteProperty</code> 作为函数的 <code>delete</code> 操作符，相当于执行 <code>delete target[key]</code></li><li>···</li></ul><p>代理对象的目的：不再直接操作原始对象，一切读写操作由代理完成。我们先前在编写Proxy的代理代码时，仍然有操作原对象的行为：</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> proxy </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Proxy</span><span style="color:#A6ACCD;">(obj</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">set</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">target</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">key</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">newVal</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">\`</span><span style="color:#C3E88D;">监听: </span><span style="color:#89DDFF;">\${</span><span style="color:#A6ACCD;">key</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;"> 设置 </span><span style="color:#89DDFF;">\${</span><span style="color:#A6ACCD;">newVal</span><span style="color:#89DDFF;">}\`</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">target</span><span style="color:#F07178;">[</span><span style="color:#A6ACCD;">key</span><span style="color:#F07178;">] </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">newVal</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// 直接操作原对象</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>这时我们可以让Reflect登场，代替我们对原对象进行操作，之前的代码可以修改：</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> proxy </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Proxy</span><span style="color:#A6ACCD;">(obj</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">set</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">target</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">key</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">newVal</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">\`</span><span style="color:#C3E88D;">监听: </span><span style="color:#89DDFF;">\${</span><span style="color:#A6ACCD;">key</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;"> 设置 </span><span style="color:#89DDFF;">\${</span><span style="color:#A6ACCD;">newVal</span><span style="color:#89DDFF;">}\`</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">Reflect</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">set</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">target</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">key</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">newVal</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">get</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">target</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">key</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">\`</span><span style="color:#C3E88D;">监听: </span><span style="color:#89DDFF;">\${</span><span style="color:#A6ACCD;">key</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;"> 获取</span><span style="color:#89DDFF;">\`</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">Reflect</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">get</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">target</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">key</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">has</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">target</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">key</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">\`</span><span style="color:#C3E88D;">监听: </span><span style="color:#89DDFF;">\${</span><span style="color:#A6ACCD;">key</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;"> 判断</span><span style="color:#89DDFF;">\`</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">Reflect</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">has</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">target</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">key</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><p>使用Reflect替代之前的对象操作有以下好处：</p><ul><li>代理对象的目的：不再直接操作原对象</li><li>Reflect.set方法有返回Boolean值，可以判断本次操作是否成功</li><li>receiver就是外层的Proxy对象</li></ul><p>针对好处三，做出如下解释。以下述代码为例，<code>set name(){}</code>函数中的<code>this</code>指向的是<code>obj</code></p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> obj </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">_name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ziu</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">set</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">newVal</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">\`</span><span style="color:#C3E88D;">set name </span><span style="color:#89DDFF;">\${</span><span style="color:#A6ACCD;">newVal</span><span style="color:#89DDFF;">}\`</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">this</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">_name</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">newVal</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">get</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">\`</span><span style="color:#C3E88D;">get name</span><span style="color:#89DDFF;">\`</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">this</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">_name</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(obj</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">name)</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">obj</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">name </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Ziu</span><span style="color:#89DDFF;">'</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> proxy </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Proxy</span><span style="color:#A6ACCD;">(obj</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">set</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">target</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">key</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">newVal</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">receiver</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">\`</span><span style="color:#C3E88D;">监听: </span><span style="color:#89DDFF;">\${</span><span style="color:#A6ACCD;">key</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;"> 设置 </span><span style="color:#89DDFF;">\${</span><span style="color:#A6ACCD;">newVal</span><span style="color:#89DDFF;">}\`</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">Reflect</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">set</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">target</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">key</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">newVal</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">receiver</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">get</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">target</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">key</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">receiver</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">\`</span><span style="color:#C3E88D;">监听: </span><span style="color:#89DDFF;">\${</span><span style="color:#A6ACCD;">key</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;"> 获取</span><span style="color:#89DDFF;">\`</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">Reflect</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">get</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">target</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">key</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">receiver</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>我们使用Proxy代理，并且使用Reflect操作对象时，输出的<code>this</code>仍然为<code>obj</code>，需要注意的是，此处的<code>this</code>指向是默认指向原始对象<code>obj</code>，而如果业务需要改变<code>this</code>指向，此时可以为<code>Reflect.set()</code>的最后一个参数传入<code>receiver</code></p><h3 id="reflect-construct方法" tabindex="-1">Reflect.construct方法 <a class="header-anchor" href="#reflect-construct方法" aria-label="Permalink to "Reflect.construct方法""></a></h3><p>以下两段代码的实现结果是一样的：</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Person</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">name</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">age</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">name</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">name</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">age</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">age</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Student</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">name</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">age</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">Person</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">call</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">this,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">name</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">age</span><span style="color:#F07178;">) </span><span style="color:#676E95;font-style:italic;">// 借用</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> stu </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Student</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ziu</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">18</span><span style="color:#A6ACCD;">)</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(stu)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Person</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">name</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">age</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">name</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">name</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">age</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">age</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Student</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">name</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">age</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// Person.call(this, name, age) // 借用</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> stu </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> Reflect</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">construct</span><span style="color:#A6ACCD;">(Person</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ziu</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">18</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> Student)</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(stu)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div>`,44),e=[o];function c(t,r,y,D,F,A){return n(),a("div",null,e)}const b=s(p,[["render",c]]);export{i as __pageData,b as default};
|
||||
@@ -1 +0,0 @@
|
||||
import{_ as s,o as n,c as a,S as l}from"./chunks/framework.04e6e156.js";const i=JSON.parse('{"title":"深入理解Proxy与Reflect","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入理解Proxy与Reflect.md","filePath":"article/深入理解Proxy与Reflect.md","lastUpdated":1697042822000}'),p={name:"article/深入理解Proxy与Reflect.md"},o=l("",44),e=[o];function c(t,r,y,D,F,A){return n(),a("div",null,e)}const b=s(p,[["render",c]]);export{i as __pageData,b as default};
|
||||
@@ -1 +0,0 @@
|
||||
import{_ as e,o as a,c as s,S as o}from"./chunks/framework.04e6e156.js";const b=JSON.parse('{"title":"深入理解浏览器缓存机制","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入理解浏览器缓存机制.md","filePath":"article/深入理解浏览器缓存机制.md","lastUpdated":1697042822000}'),l={name:"article/深入理解浏览器缓存机制.md"},n=o("",66),c=[n];function t(i,r,p,d,h,u){return a(),s("div",null,c)}const C=e(l,[["render",t]]);export{b as __pageData,C as default};
|
||||
File diff suppressed because one or more lines are too long
1
assets/article_深入理解浏览器缓存机制.md.a6bea3f7.lean.js
Normal file
1
assets/article_深入理解浏览器缓存机制.md.a6bea3f7.lean.js
Normal file
@@ -0,0 +1 @@
|
||||
import{_ as e,o as a,c as s,Q as o}from"./chunks/framework.4001cd3b.js";const y=JSON.parse('{"title":"深入理解浏览器缓存机制","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入理解浏览器缓存机制.md","filePath":"article/深入理解浏览器缓存机制.md","lastUpdated":1697384672000}'),l={name:"article/深入理解浏览器缓存机制.md"},n=o("",66),p=[n];function c(t,r,i,d,h,E){return a(),s("div",null,p)}const b=e(l,[["render",c]]);export{y as __pageData,b as default};
|
||||
@@ -1 +0,0 @@
|
||||
import{_ as s,o as a,c as n,S as e}from"./chunks/framework.04e6e156.js";const h=JSON.parse('{"title":"深入理解浏览器运行原理","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入理解浏览器运行原理.md","filePath":"article/深入理解浏览器运行原理.md","lastUpdated":1697042822000}'),l={name:"article/深入理解浏览器运行原理.md"},p=e("",87),i=[p];function r(o,c,t,d,b,u){return a(),n("div",null,i)}const C=s(l,[["render",r]]);export{h as __pageData,C as default};
|
||||
File diff suppressed because one or more lines are too long
1
assets/article_深入理解浏览器运行原理.md.7e8ced80.lean.js
Normal file
1
assets/article_深入理解浏览器运行原理.md.7e8ced80.lean.js
Normal file
@@ -0,0 +1 @@
|
||||
import{_ as s,o as e,c as a,Q as n}from"./chunks/framework.4001cd3b.js";const m=JSON.parse('{"title":"深入理解浏览器运行原理","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入理解浏览器运行原理.md","filePath":"article/深入理解浏览器运行原理.md","lastUpdated":1697384672000}'),l={name:"article/深入理解浏览器运行原理.md"},p=n("",87),o=[p];function i(c,r,t,d,b,u){return e(),a("div",null,o)}const y=s(l,[["render",i]]);export{m as __pageData,y as default};
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
2
assets/chunks/framework.4001cd3b.js
Normal file
2
assets/chunks/framework.4001cd3b.js
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1
assets/chunks/theme.8e68dbd8.js
Normal file
1
assets/chunks/theme.8e68dbd8.js
Normal file
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.2 KiB |
@@ -1 +1 @@
|
||||
import{_ as e,o as t,c as i}from"./chunks/framework.04e6e156.js";const m=JSON.parse('{"title":"主页","description":"","frontmatter":{"layout":"home","title":"主页","hero":{"name":"ZiuChen","text":"无限进步.","tagline":"Infinite Progress...","actions":[{"theme":"brand","text":"Get Started","link":"/self/"},{"theme":"alt","text":"View on GitHub","link":"https://github.com/ZiuChen"}]},"features":[{"icon":"📋","title":"Clipboard Manager","details":"A Powerful clipboard management tool"},{"icon":"✍🏻","title":"Super Markdown","details":"Powerful Markdown editor"},{"icon":"🚗","title":"JS Runner","details":"Run JavaScript dynamicly in Browser/Node.js"},{"icon":"🔑","title":"Bytemd Plugin","details":"Bytemd Plugin Library"},{"icon":"🍬","title":"ASOUL Browser Pet","details":"Keep an A-SOUL member as a pet in your browser"},{"icon":"🔧","title":"Typein","details":"Typein text, quickly perform browser operations"}]},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":1697042822000}'),n={name:"index.md"};function a(r,o,l,s,d,c){return t(),i("div")}const u=e(n,[["render",a]]);export{m as __pageData,u as default};
|
||||
import{_ as e,o as t,c as i}from"./chunks/framework.4001cd3b.js";const m=JSON.parse('{"title":"主页","description":"","frontmatter":{"layout":"home","title":"主页","hero":{"name":"ZiuChen","text":"无限进步.","tagline":"Infinite Progress...","actions":[{"theme":"brand","text":"Get Started","link":"/self/"},{"theme":"alt","text":"View on GitHub","link":"https://github.com/ZiuChen"}]},"features":[{"icon":"📋","title":"Clipboard Manager","details":"A Powerful clipboard management tool"},{"icon":"✍🏻","title":"Super Markdown","details":"Powerful Markdown editor"},{"icon":"🚗","title":"JS Runner","details":"Run JavaScript dynamicly in Browser/Node.js"},{"icon":"🔑","title":"Bytemd Plugin","details":"Bytemd Plugin Library"},{"icon":"🍬","title":"ASOUL Browser Pet","details":"Keep an A-SOUL member as a pet in your browser"},{"icon":"🔧","title":"Typein","details":"Typein text, quickly perform browser operations"}]},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":1697384672000}'),n={name:"index.md"};function a(r,o,l,s,d,c){return t(),i("div")}const u=e(n,[["render",a]]);export{m as __pageData,u as default};
|
||||
@@ -1 +1 @@
|
||||
import{_ as e,o as t,c as i}from"./chunks/framework.04e6e156.js";const m=JSON.parse('{"title":"主页","description":"","frontmatter":{"layout":"home","title":"主页","hero":{"name":"ZiuChen","text":"无限进步.","tagline":"Infinite Progress...","actions":[{"theme":"brand","text":"Get Started","link":"/self/"},{"theme":"alt","text":"View on GitHub","link":"https://github.com/ZiuChen"}]},"features":[{"icon":"📋","title":"Clipboard Manager","details":"A Powerful clipboard management tool"},{"icon":"✍🏻","title":"Super Markdown","details":"Powerful Markdown editor"},{"icon":"🚗","title":"JS Runner","details":"Run JavaScript dynamicly in Browser/Node.js"},{"icon":"🔑","title":"Bytemd Plugin","details":"Bytemd Plugin Library"},{"icon":"🍬","title":"ASOUL Browser Pet","details":"Keep an A-SOUL member as a pet in your browser"},{"icon":"🔧","title":"Typein","details":"Typein text, quickly perform browser operations"}]},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":1697042822000}'),n={name:"index.md"};function a(r,o,l,s,d,c){return t(),i("div")}const u=e(n,[["render",a]]);export{m as __pageData,u as default};
|
||||
import{_ as e,o as t,c as i}from"./chunks/framework.4001cd3b.js";const m=JSON.parse('{"title":"主页","description":"","frontmatter":{"layout":"home","title":"主页","hero":{"name":"ZiuChen","text":"无限进步.","tagline":"Infinite Progress...","actions":[{"theme":"brand","text":"Get Started","link":"/self/"},{"theme":"alt","text":"View on GitHub","link":"https://github.com/ZiuChen"}]},"features":[{"icon":"📋","title":"Clipboard Manager","details":"A Powerful clipboard management tool"},{"icon":"✍🏻","title":"Super Markdown","details":"Powerful Markdown editor"},{"icon":"🚗","title":"JS Runner","details":"Run JavaScript dynamicly in Browser/Node.js"},{"icon":"🔑","title":"Bytemd Plugin","details":"Bytemd Plugin Library"},{"icon":"🍬","title":"ASOUL Browser Pet","details":"Keep an A-SOUL member as a pet in your browser"},{"icon":"🔧","title":"Typein","details":"Typein text, quickly perform browser operations"}]},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":1697384672000}'),n={name:"index.md"};function a(r,o,l,s,d,c){return t(),i("div")}const u=e(n,[["render",a]]);export{m as __pageData,u as default};
|
||||
File diff suppressed because one or more lines are too long
@@ -1 +0,0 @@
|
||||
import{_ as s,o as a,c as n,S as l}from"./chunks/framework.04e6e156.js";const e="/assets/BFC-1.ed3fcfd0.jpg",o="/assets/BFC-2.3c4a8bbc.jpg",p="/assets/BFC-3.7daed619.jpg",c="/assets/BFC-4.b58515a7.jpg",h=JSON.parse('{"title":"CSS基础","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"note/CSS.md","filePath":"note/CSS.md","lastUpdated":1697042822000}'),t={name:"note/CSS.md"},r=l("",536),i=[r];function D(d,y,F,C,u,b){return a(),n("div",null,i)}const A=s(t,[["render",D]]);export{h as __pageData,A as default};
|
||||
803
assets/note_CSS.md.81f696ed.js
Normal file
803
assets/note_CSS.md.81f696ed.js
Normal file
File diff suppressed because one or more lines are too long
1
assets/note_CSS.md.81f696ed.lean.js
Normal file
1
assets/note_CSS.md.81f696ed.lean.js
Normal file
@@ -0,0 +1 @@
|
||||
import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.4001cd3b.js";const p="/assets/BFC-1.ed3fcfd0.jpg",o="/assets/BFC-2.3c4a8bbc.jpg",e="/assets/BFC-3.7daed619.jpg",c="/assets/BFC-4.b58515a7.jpg",g=JSON.parse('{"title":"CSS基础","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"note/CSS.md","filePath":"note/CSS.md","lastUpdated":1697384672000}'),t={name:"note/CSS.md"},r=l("",536),i=[r];function E(y,d,u,b,h,m){return a(),n("div",null,i)}const C=s(t,[["render",E]]);export{g as __pageData,C as default};
|
||||
423
assets/note_Front-end Engineering.md.76688693.js
Normal file
423
assets/note_Front-end Engineering.md.76688693.js
Normal file
File diff suppressed because one or more lines are too long
1
assets/note_Front-end Engineering.md.76688693.lean.js
Normal file
1
assets/note_Front-end Engineering.md.76688693.lean.js
Normal file
@@ -0,0 +1 @@
|
||||
import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.4001cd3b.js";const o="/assets/the-node.js-system.dd187a1f.jpeg",p="/assets/esmodule-phases.7bb37c77.png",e="/assets/hard-link-and-soft-link.b45d1c8a.jpg",c="/assets/how-pnpm-works.a14a4880.jpg",g=JSON.parse('{"title":"前端工程化","description":"","frontmatter":{},"headers":[],"relativePath":"note/Front-end Engineering.md","filePath":"note/Front-end Engineering.md","lastUpdated":1697384672000}'),r={name:"note/Front-end Engineering.md"},t=l("",254),i=[t];function E(d,y,u,m,b,F){return n(),a("div",null,i)}const C=s(r,[["render",E]]);export{g as __pageData,C as default};
|
||||
File diff suppressed because one or more lines are too long
@@ -1 +0,0 @@
|
||||
import{_ as s,o as n,c as a,S as l}from"./chunks/framework.04e6e156.js";const o="/assets/the-node.js-system.dd187a1f.jpeg",e="/assets/esmodule-phases.7bb37c77.png",p="/assets/hard-link-and-soft-link.b45d1c8a.jpg",c="/assets/how-pnpm-works.a14a4880.jpg",b=JSON.parse('{"title":"前端工程化","description":"","frontmatter":{},"headers":[],"relativePath":"note/Front-end Engineering.md","filePath":"note/Front-end Engineering.md","lastUpdated":1697042822000}'),r={name:"note/Front-end Engineering.md"},t=l("",254),i=[t];function d(y,D,C,F,u,A){return n(),a("div",null,i)}const h=s(r,[["render",d]]);export{b as __pageData,h as default};
|
||||
@@ -1 +1 @@
|
||||
import{_ as t,o as e,c as r,k as a,a as c}from"./chunks/framework.04e6e156.js";const S=JSON.parse('{"title":"JavaScript 基础","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"note/JavaScript.md","filePath":"note/JavaScript.md","lastUpdated":1697042822000}'),i={name:"note/JavaScript.md"},s=a("h1",{id:"javascript-基础",tabindex:"-1"},[c("JavaScript 基础 "),a("a",{class:"header-anchor",href:"#javascript-基础","aria-label":'Permalink to "JavaScript 基础"'},"")],-1),n=a("p",null,"JavaScript 组成",-1),o=a("ul",null,[a("li",null,"ECMAScript 定义语言规范"),a("li",null,"DOM 用于操作文档的API"),a("li",null,"BOM 用于操作浏览器的API")],-1),l=[s,n,o];function p(d,_,h,v,u,f){return e(),r("div",null,l)}const J=t(i,[["render",p]]);export{S as __pageData,J as default};
|
||||
import{_ as t,o as e,c as r,k as a,a as c}from"./chunks/framework.4001cd3b.js";const S=JSON.parse('{"title":"JavaScript 基础","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"note/JavaScript.md","filePath":"note/JavaScript.md","lastUpdated":1697384672000}'),i={name:"note/JavaScript.md"},s=a("h1",{id:"javascript-基础",tabindex:"-1"},[c("JavaScript 基础 "),a("a",{class:"header-anchor",href:"#javascript-基础","aria-label":'Permalink to "JavaScript 基础"'},"")],-1),n=a("p",null,"JavaScript 组成",-1),o=a("ul",null,[a("li",null,"ECMAScript 定义语言规范"),a("li",null,"DOM 用于操作文档的API"),a("li",null,"BOM 用于操作浏览器的API")],-1),l=[s,n,o];function p(d,_,h,v,u,f){return e(),r("div",null,l)}const J=t(i,[["render",p]]);export{S as __pageData,J as default};
|
||||
@@ -1 +1 @@
|
||||
import{_ as t,o as e,c as r,k as a,a as c}from"./chunks/framework.04e6e156.js";const S=JSON.parse('{"title":"JavaScript 基础","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"note/JavaScript.md","filePath":"note/JavaScript.md","lastUpdated":1697042822000}'),i={name:"note/JavaScript.md"},s=a("h1",{id:"javascript-基础",tabindex:"-1"},[c("JavaScript 基础 "),a("a",{class:"header-anchor",href:"#javascript-基础","aria-label":'Permalink to "JavaScript 基础"'},"")],-1),n=a("p",null,"JavaScript 组成",-1),o=a("ul",null,[a("li",null,"ECMAScript 定义语言规范"),a("li",null,"DOM 用于操作文档的API"),a("li",null,"BOM 用于操作浏览器的API")],-1),l=[s,n,o];function p(d,_,h,v,u,f){return e(),r("div",null,l)}const J=t(i,[["render",p]]);export{S as __pageData,J as default};
|
||||
import{_ as t,o as e,c as r,k as a,a as c}from"./chunks/framework.4001cd3b.js";const S=JSON.parse('{"title":"JavaScript 基础","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"note/JavaScript.md","filePath":"note/JavaScript.md","lastUpdated":1697384672000}'),i={name:"note/JavaScript.md"},s=a("h1",{id:"javascript-基础",tabindex:"-1"},[c("JavaScript 基础 "),a("a",{class:"header-anchor",href:"#javascript-基础","aria-label":'Permalink to "JavaScript 基础"'},"")],-1),n=a("p",null,"JavaScript 组成",-1),o=a("ul",null,[a("li",null,"ECMAScript 定义语言规范"),a("li",null,"DOM 用于操作文档的API"),a("li",null,"BOM 用于操作浏览器的API")],-1),l=[s,n,o];function p(d,_,h,v,u,f){return e(),r("div",null,l)}const J=t(i,[["render",p]]);export{S as __pageData,J as default};
|
||||
3709
assets/note_JavaScriptEnhanced.md.4355fe68.js
Normal file
3709
assets/note_JavaScriptEnhanced.md.4355fe68.js
Normal file
File diff suppressed because one or more lines are too long
1
assets/note_JavaScriptEnhanced.md.4355fe68.lean.js
Normal file
1
assets/note_JavaScriptEnhanced.md.4355fe68.lean.js
Normal file
@@ -0,0 +1 @@
|
||||
import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.4001cd3b.js";const p="/assets/image-20221118222207332-16687813334481.64935e06.png",o="/assets/image-20221118222311200-16687813941873.8c07f79f.png",e="/assets/image-20221122103111654.29f48e34.png",c="/assets/image-20221122103256116.b7d76f81.png",r="/assets/image-20221122103715428.587185d1.png",t="/assets/image-20221125090752249.baeedc2b.png",E="/assets/image-20221125094148365.3adfbe2d.png",A=JSON.parse('{"title":"JavaScript 高级教程","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"note/JavaScriptEnhanced.md","filePath":"note/JavaScriptEnhanced.md","lastUpdated":1697384672000}'),y={name:"note/JavaScriptEnhanced.md"},i=l("",668),b=[i];function F(u,d,m,C,h,g){return n(),a("div",null,b)}const D=s(y,[["render",F]]);export{A as __pageData,D as default};
|
||||
File diff suppressed because one or more lines are too long
@@ -1 +0,0 @@
|
||||
import{_ as s,o as n,c as a,S as l}from"./chunks/framework.04e6e156.js";const p="/assets/image-20221118222207332-16687813334481.64935e06.png",o="/assets/image-20221118222311200-16687813941873.8c07f79f.png",e="/assets/image-20221122103111654.29f48e34.png",c="/assets/image-20221122103256116.b7d76f81.png",r="/assets/image-20221122103715428.587185d1.png",t="/assets/image-20221125090752249.baeedc2b.png",y="/assets/image-20221125094148365.3adfbe2d.png",g=JSON.parse('{"title":"JavaScript 高级教程","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"note/JavaScriptEnhanced.md","filePath":"note/JavaScriptEnhanced.md","lastUpdated":1697042822000}'),F={name:"note/JavaScriptEnhanced.md"},D=l("",668),i=[D];function A(C,b,u,d,m,h){return n(),a("div",null,i)}const E=s(F,[["render",A]]);export{g as __pageData,E as default};
|
||||
113
assets/note_MySQL.md.723f9f3c.js
Normal file
113
assets/note_MySQL.md.723f9f3c.js
Normal file
File diff suppressed because one or more lines are too long
1
assets/note_MySQL.md.723f9f3c.lean.js
Normal file
1
assets/note_MySQL.md.723f9f3c.lean.js
Normal file
@@ -0,0 +1 @@
|
||||
import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.4001cd3b.js";const m=JSON.parse('{"title":"MySQL","description":"","frontmatter":{},"headers":[],"relativePath":"note/MySQL.md","filePath":"note/MySQL.md","lastUpdated":1697384672000}'),p={name:"note/MySQL.md"},e=l("",71),o=[e];function t(c,r,y,E,i,d){return a(),n("div",null,o)}const u=s(p,[["render",t]]);export{m as __pageData,u as default};
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user