mirror of
https://github.com/ZiuChen/ZiuChen.github.io.git
synced 2025-08-18 15:39:35 +08:00
66 lines
32 KiB
JavaScript
66 lines
32 KiB
JavaScript
import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.9b71bc06.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":1704524259000}'),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};
|