study/ZiuChen.github.io
1
0
Fork 0
mirror of https://github.com/ZiuChen/ZiuChen.github.io.git synced 2025-09-11 05:03:46 +08:00
Code Issues Packages Projects Releases Wiki Activity
ZiuChen.github.io/article/彻底搞懂对象的数据属性描述符、存储属性描述符.html

92 lines
58 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>彻底搞懂对象的数据属性描述符、存储属性描述符 | ZiuChen</title>
<meta name="description" content="Unlimited Progress.">
<meta name="generator" content="VitePress v1.2.2">
<link rel="preload stylesheet" href="/assets/style.Bk0YqIhq.css" as="style">
<script type="module" src="/assets/app.CpgDeAkr.js"></script>
<link rel="preload" href="/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="modulepreload" href="/assets/chunks/framework.Cipf4DbI.js">
<link rel="modulepreload" href="/assets/chunks/theme.D74JC_TU.js">
<link rel="modulepreload" href="/assets/article_彻底搞懂对象的数据属性描述符、存储属性描述符.md.DyCx02Jx.lean.js">
<link rel="icon" href="/logo.png">
<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
</head>
<body>
<div id="app"><div class="Layout" data-v-21197ea5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-a12e58e7></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-a12e58e7> Skip to content </a><!--]--><!----><header class="VPNav" data-v-21197ea5 data-v-ae422df0><div class="VPNavBar has-sidebar top" data-v-ae422df0 data-v-5b006e28><div class="wrapper" data-v-5b006e28><div class="container" data-v-5b006e28><div class="title" data-v-5b006e28><div class="VPNavBarTitle has-sidebar" data-v-5b006e28 data-v-7e7df463><a class="title" href="/" data-v-7e7df463><!--[--><!--]--><!--[--><img class="VPImage logo" src="/logo.png" alt data-v-08e3c15f><!--]--><span data-v-7e7df463>ZiuChen</span><!--[--><!--]--></a></div></div><div class="content" data-v-5b006e28><div class="content-body" data-v-5b006e28><!--[--><!--]--><div class="VPNavBarSearch search" data-v-5b006e28><!--[--><!----><div id="docsearch"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-5b006e28 data-v-2500ceaa><span id="main-nav-aria-label" class="visually-hidden" data-v-2500ceaa>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/" tabindex="0" data-v-2500ceaa data-v-298f5c94><!--[--><span data-v-298f5c94>首页</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-2500ceaa data-v-dbddcd3c><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-dbddcd3c><span class="text" data-v-dbddcd3c><!----><span data-v-dbddcd3c>我的项目</span><span class="vpi-chevron-down text-icon" data-v-dbddcd3c></span></span></button><div class="menu" data-v-dbddcd3c><div class="VPMenu" data-v-dbddcd3c data-v-aabc2c8a><div class="items" data-v-aabc2c8a><!--[--><!--[--><div class="VPMenuLink" data-v-aabc2c8a data-v-42e91a02><a class="VPLink link" href="/project/ClipboardManager/" data-v-42e91a02><!--[-->超级剪贴板<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-aabc2c8a data-v-42e91a02><a class="VPLink link" href="/project/Markdown/" data-v-42e91a02><!--[-->超级Markdown<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-aabc2c8a data-v-42e91a02><a class="VPLink link" href="/project/JSRunner/" data-v-42e91a02><!--[-->超级JavaScript<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-aabc2c8a data-v-42e91a02><a class="VPLink link" href="/project/SmartWordBreak/" data-v-42e91a02><!--[-->超级分词<!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-2500ceaa data-v-dbddcd3c><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-dbddcd3c><span class="text" data-v-dbddcd3c><!----><span data-v-dbddcd3c>开源作品</span><span class="vpi-chevron-down text-icon" data-v-dbddcd3c></span></span></button><div class="menu" data-v-dbddcd3c><div class="VPMenu" data-v-dbddcd3c data-v-aabc2c8a><div class="items" data-v-aabc2c8a><!--[--><!--[--><div class="VPMenuLink" data-v-aabc2c8a data-v-42e91a02><a class="VPLink link" href="/works/opensource.html" data-v-42e91a02><!--[-->个人作品<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-aabc2c8a data-v-42e91a02><a class="VPLink link" href="/works/contribution.html" data-v-42e91a02><!--[-->社区贡献<!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-2500ceaa data-v-dbddcd3c><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-dbddcd3c><span class="text" data-v-dbddcd3c><!----><span data-v-dbddcd3c>学习笔记</span><span class="vpi-chevron-down text-icon" data-v-dbddcd3c></span></span></button><div class="menu" data-v-dbddcd3c><div class="VPMenu" data-v-dbddcd3c data-v-aabc2c8a><div class="items" data-v-aabc2c8a><!--[--><!--[--><div class="VPMenuLink" data-v-aabc2c8a data-v-42e91a02><a class="VPLink link" href="/note/JavaScript.html" data-v-42e91a02><!--[-->JavaScript基础<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-aabc2c8a data-v-42e91a02><a class="VPLink link" href="/note/CSS.html" data-v-42e91a02><!--[-->CSS基础<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-aabc2c8a data-v-42e91a02><a class="VPLink link" href="/note/JavaScriptEnhanced.html" data-v-42e91a02><!--[-->JavaScript进阶<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-aabc2c8a data-v-42e91a02><a class="VPLink link" href="/note/Front-end%20Engineering.html" data-v-42e91a02><!--[-->前端工程化<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-aabc2c8a data-v-42e91a02><a class="VPLink link" href="/note/SSR.html" data-v-42e91a02><!--[-->服务端渲染<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-aabc2c8a data-v-42e91a02><a class="VPLink link" href="/note/React.html" data-v-42e91a02><!--[-->React基础<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-aabc2c8a data-v-42e91a02><a class="VPLink link" href="/note/React%20Hooks.html" data-v-42e91a02><!--[-->React Hooks<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-aabc2c8a data-v-42e91a02><a class="VPLink link" href="/note/Redux.html" data-v-42e91a02><!--[-->Redux<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-aabc2c8a data-v-42e91a02><a class="VPLink link" href="/note/React%20Router.html" data-v-42e91a02><!--[-->React Router<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-aabc2c8a data-v-42e91a02><a class="VPLink link" href="/note/MySQL.html" data-v-42e91a02><!--[-->MySQL<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-aabc2c8a data-v-42e91a02><a class="VPLink link" href="/note/Rust.html" data-v-42e91a02><!--[-->Rust<!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/self/" tabindex="0" data-v-2500ceaa data-v-298f5c94><!--[--><span data-v-298f5c94>个人介绍</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-5b006e28 data-v-40b30d5f><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-40b30d5f data-v-72fccd06 data-v-ff4f6660><span class="check" data-v-ff4f6660><span class="icon" data-v-ff4f6660><!--[--><span class="vpi-sun sun" data-v-72fccd06></span><span class="vpi-moon moon" data-v-72fccd06></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-5b006e28 data-v-4a8ef5f7 data-v-b13ebc2d><!--[--><a class="VPSocialLink no-icon" href="https://github.com/ZiuChen" aria-label="github" target="_blank" rel="noopener" data-v-b13ebc2d data-v-d1dac51e><span class="vpi-social-github" /></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/1887205216238477" aria-label target="_blank" rel="noopener" data-v-b13ebc2d data-v-d1dac51e><svg width="36" height="28" viewBox="0 0 36 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.5875 6.77268L21.8232 3.40505L17.5875 0.00748237L17.5837 0L13.3555 3.39757L17.5837 6.76894L17.5875 6.77268ZM17.5863 17.3955H17.59L28.5161 8.77432L25.5526 6.39453L17.59 12.6808H17.5863L17.5825 12.6845L9.61993 6.40201L6.66016 8.78181L17.5825 17.3992L17.5863 17.3955ZM17.5828 23.2891L17.5865 23.2854L32.2133 11.7456L35.1768 14.1254L28.5238 19.3752L17.5865 28L0.284376 14.3574L0 14.1291L2.95977 11.7531L17.5828 23.2891Z" fill="#1E80FF"/></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-5b006e28 data-v-1789b134 data-v-dbddcd3c><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-dbddcd3c><span class="vpi-more-horizontal icon" data-v-dbddcd3c></span></button><div class="menu" data-v-dbddcd3c><div class="VPMenu" data-v-dbddcd3c data-v-aabc2c8a><!----><!--[--><!--[--><!----><div class="group" data-v-1789b134><div class="item appearance" data-v-1789b134><p class="label" data-v-1789b134>Appearance</p><div class="appearance-action" data-v-1789b134><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-1789b134 data-v-72fccd06 data-v-ff4f6660><span class="check" data-v-ff4f6660><span class="icon" data-v-ff4f6660><!--[--><span class="vpi-sun sun" data-v-72fccd06></span><span class="vpi-moon moon" data-v-72fccd06></span><!--]--></span></span></button></div></div></div><div class="group" data-v-1789b134><div class="item social-links" data-v-1789b134><div class="VPSocialLinks social-links-list" data-v-1789b134 data-v-b13ebc2d><!--[--><a class="VPSocialLink no-icon" href="https://github.com/ZiuChen" aria-label="github" target="_blank" rel="noopener" data-v-b13ebc2d data-v-d1dac51e><span class="vpi-social-github" /></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/1887205216238477" aria-label target="_blank" rel="noopener" data-v-b13ebc2d data-v-d1dac51e><svg width="36" height="28" viewBox="0 0 36 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.5875 6.77268L21.8232 3.40505L17.5875 0.00748237L17.5837 0L13.3555 3.39757L17.5837 6.76894L17.5875 6.77268ZM17.5863 17.3955H17.59L28.5161 8.77432L25.5526 6.39453L17.59 12.6808H17.5863L17.5825 12.6845L9.61993 6.40201L6.66016 8.78181L17.5825 17.3992L17.5863 17.3955ZM17.5828 23.2891L17.5865 23.2854L32.2133 11.7456L35.1768 14.1254L28.5238 19.3752L17.5865 28L0.284376 14.3574L0 14.1291L2.95977 11.7531L17.5828 23.2891Z" fill="#1E80FF"/></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-5b006e28 data-v-88b67501><span class="container" data-v-88b67501><span class="top" data-v-88b67501></span><span class="middle" data-v-88b67501></span><span class="bottom" data-v-88b67501></span></span></button></div></div></div></div><div class="divider" data-v-5b006e28><div class="divider-line" data-v-5b006e28></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-21197ea5 data-v-4f27ebf5><div class="container" data-v-4f27ebf5><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-4f27ebf5><span class="vpi-align-left menu-icon" data-v-4f27ebf5></span><span class="menu-text" data-v-4f27ebf5>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-4f27ebf5 data-v-edf9ff28><button data-v-edf9ff28>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-21197ea5 data-v-1fa42293><div class="curtain" data-v-1fa42293></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-1fa42293><span class="visually-hidden" id="sidebar-aria-label" data-v-1fa42293> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-1fa42293><section class="VPSidebarItem level-0" data-v-1fa42293 data-v-e96c2f33><div class="item" role="button" tabindex="0" data-v-e96c2f33><div class="indicator" data-v-e96c2f33></div><h2 class="text" data-v-e96c2f33>我的项目</h2><!----></div><div class="items" data-v-e96c2f33><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e96c2f33 data-v-e96c2f33><div class="item" data-v-e96c2f33><div class="indicator" data-v-e96c2f33></div><a class="VPLink link link" href="/project/ClipboardManager/" data-v-e96c2f33><!--[--><p class="text" data-v-e96c2f33>超级剪贴板</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e96c2f33 data-v-e96c2f33><div class="item" data-v-e96c2f33><div class="indicator" data-v-e96c2f33></div><a class="VPLink link link" href="/project/Markdown/" data-v-e96c2f33><!--[--><p class="text" data-v-e96c2f33>超级Markdown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e96c2f33 data-v-e96c2f33><div class="item" data-v-e96c2f33><div class="indicator" data-v-e96c2f33></div><a class="VPLink link link" href="/project/JSRunner/" data-v-e96c2f33><!--[--><p class="text" data-v-e96c2f33>超级JavaScript</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e96c2f33 data-v-e96c2f33><div class="item" data-v-e96c2f33><div class="indicator" data-v-e96c2f33></div><a class="VPLink link link" href="/project/SmartWordBreak/" data-v-e96c2f33><!--[--><p class="text" data-v-e96c2f33>超级分词</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-1fa42293><section class="VPSidebarItem level-0 collapsible collapsed" data-v-1fa42293 data-v-e96c2f33><div class="item" role="button" tabindex="0" data-v-e96c2f33><div class="indicator" data-v-e96c2f33></div><h2 class="text" data-v-e96c2f33>开源作品</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e96c2f33><span class="vpi-chevron-right caret-icon" data-v-e96c2f33></span></div></div><div class="items" data-v-e96c2f33><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e96c2f33 data-v-e96c2f33><div class="item" data-v-e96c2f33><div class="indicator" data-v-e96c2f33></div><a class="VPLink link link" href="/works/opensource.html" data-v-e96c2f33><!--[--><p class="text" data-v-e96c2f33>个人作品</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e96c2f33 data-v-e96c2f33><div class="item" data-v-e96c2f33><div class="indicator" data-v-e96c2f33></div><a class="VPLink link link" href="/works/contribution.html" data-v-e96c2f33><!--[--><p class="text" data-v-e96c2f33>社区贡献</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-1fa42293><section class="VPSidebarItem level-0 collapsible has-active" data-v-1fa42293 data-v-e96c2f33><div class="item" role="button" tabindex="0" data-v-e96c2f33><div class="indicator" data-v-e96c2f33></div><h2 class="text" data-v-e96c2f33>文章归档</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e96c2f33><span class="vpi-chevron-right caret-icon" data-v-e96c2f33></span></div></div><div class="items" data-v-e96c2f33><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e96c2f33 data-v-e96c2f33><div class="item" data-v-e96c2f33><div class="indicator" data-v-e96c2f33></div><a class="VPLink link link" href="/article/%E3%80%902023%E3%80%91%E9%9D%92%E8%AE%AD%E8%90%A5%20-%20%E5%89%8D%E7%AB%AF%E7%BB%83%E4%B9%A0%E9%A2%98%E6%B1%87%E6%80%BB%E8%A7%A3%E6%9E%90.html" data-v-e96c2f33><!--[--><p class="text" data-v-e96c2f33>【2023】青训营 - 前端练习题汇总解析</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e96c2f33 data-v-e96c2f33><div class="item" data-v-e96c2f33><div class="indicator" data-v-e96c2f33></div><a class="VPLink link link" href="/article/%E3%80%90%E5%AD%97%E8%8A%82%E8%B7%B3%E5%8A%A8%E3%80%91%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98%E6%80%BB%E7%BB%93.html" data-v-e96c2f33><!--[--><p class="text" data-v-e96c2f33>【字节跳动】前端面试题总结</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e96c2f33 data-v-e96c2f33><div class="item" data-v-e96c2f33><div class="indicator" data-v-e96c2f33></div><a class="VPLink link link" href="/article/%E3%80%90%E5%BF%AB%E6%89%8B%E3%80%91%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98.html" data-v-e96c2f33><!--[--><p class="text" data-v-e96c2f33>【快手】深入理解前端面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e96c2f33 data-v-e96c2f33><div class="item" data-v-e96c2f33><div class="indicator" data-v-e96c2f33></div><a class="VPLink link link" href="/article/%E3%80%90%E7%94%A8%E5%8F%8B%E9%87%91%E8%9E%8D%E3%80%91%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98%E6%80%BB%E7%BB%93.html" data-v-e96c2f33><!--[--><p class="text" data-v-e96c2f33>【用友金融】前端面试题总结</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e96c2f33 data-v-e96c2f33><div class="item" data-v-e96c2f33><div class="indicator" data-v-e96c2f33></div><a class="VPLink link link" href="/article/%E4%B8%80%E6%96%87%E8%AF%BB%E6%87%82%E4%BA%8B%E4%BB%B6%E5%86%92%E6%B3%A1%E4%B8%8E%E4%BA%8B%E4%BB%B6%E6%8D%95%E8%8E%B7.html" data-v-e96c2f33><!--[--><p class="text" data-v-e96c2f33>一文读懂事件冒泡与事件捕获</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e96c2f33 data-v-e96c2f33><div class="item" data-v-e96c2f33><div class="indicator" data-v-e96c2f33></div><a class="VPLink link link" href="/article/%E4%B8%80%E6%96%87%E8%AF%BB%E6%87%82%E4%BC%AA%E7%B1%BB%E4%B8%8E%E4%BC%AA%E5%85%83%E7%B4%A0.html" data-v-e96c2f33><!--[--><p class="text" data-v-e96c2f33>一文读懂伪类与伪元素</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e96c2f33 data-v-e96c2f33><div class="item" data-v-e96c2f33><div class="indicator" data-v-e96c2f33></div><a class="VPLink link link" href="/article/%E4%B8%80%E6%96%87%E8%AF%BB%E6%87%82%E5%87%BD%E6%95%B0%E4%B8%ADthis%E6%8C%87%E5%90%91%E9%97%AE%E9%A2%98.html" data-v-e96c2f33><!--[--><p class="text" data-v-e96c2f33>一文读懂函数中this指向问题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e96c2f33 data-v-e96c2f33><div class="item" data-v-e96c2f33><div class="indicator" data-v-e96c2f33></div><a class="VPLink link link" href="/article/%E4%BB%8E0%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E5%B9%B4%E5%BA%A6%E6%8A%A5%E5%91%8A.html" data-v-e96c2f33><!--[--><p class="text" data-v-e96c2f33>从0实现一个年度报告</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e96c2f33 data-v-e96c2f33><div class="item" data-v-e96c2f33><div class="indicator" data-v-e96c2f33></div><a class="VPLink link link" href="/article/%E5%BD%BB%E5%BA%95%E6%90%9E%E6%87%82%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%95%B0%E6%8D%AE%E5%B1%9E%E6%80%A7%E6%8F%8F%E8%BF%B0%E7%AC%A6%E3%80%81%E5%AD%98%E5%82%A8%E5%B1%9E%E6%80%A7%E6%8F%8F%E8%BF%B0%E7%AC%A6.html" data-v-e96c2f33><!--[--><p class="text" data-v-e96c2f33>彻底搞懂对象的数据属性描述符、存储属性描述符</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e96c2f33 data-v-e96c2f33><div class="item" data-v-e96c2f33><div class="indicator" data-v-e96c2f33></div><a class="VPLink link link" href="/article/%E6%B5%85%E6%9E%90defineProperty%E4%B8%8EProxy%E5%AE%9E%E7%8E%B0%E7%9A%84%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A.html" data-v-e96c2f33><!--[--><p class="text" data-v-e96c2f33>浅析defineProperty与Proxy实现的双向绑定</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e96c2f33 data-v-e96c2f33><div class="item" data-v-e96c2f33><div class="indicator" data-v-e96c2f33></div><a class="VPLink link link" href="/article/%E6%B7%B1%E5%85%A5JavaScript%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B.html" data-v-e96c2f33><!--[--><p class="text" data-v-e96c2f33>深入JavaScript数据类型</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e96c2f33 data-v-e96c2f33><div class="item" data-v-e96c2f33><div class="indicator" data-v-e96c2f33></div><a class="VPLink link link" href="/article/%E6%B7%B1%E5%85%A5Vue3%E6%BA%90%E7%A0%81%EF%BC%8C%E7%9C%8B%E7%9C%8BVue.use%E5%90%8E%E7%A9%B6%E7%AB%9F%E5%8F%91%E7%94%9F%E4%BA%86%E4%BB%80%E4%B9%88%EF%BC%9F.html" data-v-e96c2f33><!--[--><p class="text" data-v-e96c2f33>深入Vue3源码，看看Vue.use后究竟发生了什么？</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e96c2f33 data-v-e96c2f33><div class="item" data-v-e96c2f33><div class="indicator" data-v-e96c2f33></div><a class="VPLink link link" href="/article/%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3Proxy%E4%B8%8EReflect.html" data-v-e96c2f33><!--[--><p class="text" data-v-e96c2f33>深入理解Proxy与Reflect</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e96c2f33 data-v-e96c2f33><div class="item" data-v-e96c2f33><div class="indicator" data-v-e96c2f33></div><a class="VPLink link link" href="/article/%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BC%93%E5%AD%98%E6%9C%BA%E5%88%B6.html" data-v-e96c2f33><!--[--><p class="text" data-v-e96c2f33>深入理解浏览器缓存机制</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e96c2f33 data-v-e96c2f33><div class="item" data-v-e96c2f33><div class="indicator" data-v-e96c2f33></div><a class="VPLink link link" href="/article/%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E6%B5%8F%E8%A7%88%E5%99%A8%E8%BF%90%E8%A1%8C%E5%8E%9F%E7%90%86.html" data-v-e96c2f33><!--[--><p class="text" data-v-e96c2f33>深入理解浏览器运行原理</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-21197ea5 data-v-f1f2fe3a><div class="VPDoc has-sidebar has-aside" data-v-f1f2fe3a data-v-68dddeb0><!--[--><!--]--><div class="container" data-v-68dddeb0><div class="aside" data-v-68dddeb0><div class="aside-curtain" data-v-68dddeb0></div><div class="aside-container" data-v-68dddeb0><div class="aside-content" data-v-68dddeb0><div class="VPDocAside" data-v-68dddeb0 data-v-a0d61c69><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-a0d61c69 data-v-6b6b3b01><div class="content" data-v-6b6b3b01><div class="outline-marker" data-v-6b6b3b01></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-6b6b3b01>On this page</div><ul class="VPDocOutlineItem root" data-v-6b6b3b01 data-v-e1f04456><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-a0d61c69></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-68dddeb0><div class="content-container" data-v-68dddeb0><!--[--><!--]--><main class="main" data-v-68dddeb0><div style="position:relative;" class="vp-doc _article_%E5%BD%BB%E5%BA%95%E6%90%9E%E6%87%82%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%95%B0%E6%8D%AE%E5%B1%9E%E6%80%A7%E6%8F%8F%E8%BF%B0%E7%AC%A6%E3%80%81%E5%AD%98%E5%82%A8%E5%B1%9E%E6%80%A7%E6%8F%8F%E8%BF%B0%E7%AC%A6" data-v-68dddeb0><div><h1 id="彻底搞懂对象的数据属性描述符、存储属性描述符" tabindex="-1">彻底搞懂对象的数据属性描述符、存储属性描述符 <a class="header-anchor" href="#彻底搞懂对象的数据属性描述符、存储属性描述符" aria-label="Permalink to &quot;彻底搞懂对象的数据属性描述符、存储属性描述符&quot;">​</a></h1><h2 id="属性描述符" tabindex="-1">属性描述符 <a class="header-anchor" href="#属性描述符" aria-label="Permalink to &quot;属性描述符&quot;">​</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 shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> obj </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ziu&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> age: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">18</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Object.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">defineProperty</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(obj, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;height&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> value: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1.88</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> })</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(obj) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// { name: &#39;ziu&#39;, 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 shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(obj.height) </span><span style="--shiki-light:#6A737D;--shiki-dark:#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 &quot;数据属性描述符&quot;">​</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 shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> obj </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ziu&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> age: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">18</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 数据属性描述符</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Object.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">defineProperty</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(obj, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;address&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Beijing&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 该属性对应的值，默认为undefine</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> configurable: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 该属性描述符是否可被改变、是否可被删除，默认为false</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> enumerable: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 该属性是否可被枚举，默认为false</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> writable: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 该属性是否可以被写入新的值，默认为false</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> })</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // configurable</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> delete</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> obj.address</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> obj.address </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;Shanghai&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(obj.address) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Beijing</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // enumerable</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(obj)</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> key </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">in</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> obj) {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(key)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(Object.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">keys</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(obj))</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // writable</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> obj.address </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;Tianjin&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(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 &quot;存储属性描述符&quot;">​</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 shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> obj </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ziu&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> age: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">18</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> _address: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Beijing&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Accessor Properties</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Object.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">defineProperty</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(obj, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;address&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> enumerable: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> configurable: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // value: &quot;Beijing&quot;,</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // writable: true,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> get</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">._address</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> set</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">val</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">._address </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> val</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> })</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(obj.address) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 调用getter() Beijing</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> obj.address </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;Shanghai&quot;</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 调用setter()</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(obj._address) </span><span style="--shiki-light:#6A737D;--shiki-dark:#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 &quot;应用场景&quot;">​</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 shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Object.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">defineProperty</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(obj, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;address&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> get</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> bar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">._address</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> set</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">val</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> foo</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">._address </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> val</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> })</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(obj.address) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// got address value once</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> obj.address </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;Shanghai&quot;</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // resetted address value once</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> bar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;got address value once&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> foo</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;resetted address value once&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</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></div></div></main><footer class="VPDocFooter" data-v-68dddeb0 data-v-0070d511><!--[--><!--]--><div class="edit-info" data-v-0070d511><div class="edit-link" data-v-0070d511><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/ZiuChen/ZiuChen.github.io/edit/main/docs/article/彻底搞懂对象的数据属性描述符、存储属性描述符.md" target="_blank" rel="noreferrer" data-v-0070d511><!--[--><span class="vpi-square-pen edit-link-icon" data-v-0070d511></span> Edit this page on GitHub<!--]--></a></div><div class="last-updated" data-v-0070d511><p class="VPLastUpdated" data-v-0070d511 data-v-c8f23e1a>Updated Date: <time datetime="2024-06-02T08:25:35.000Z" data-v-c8f23e1a></time></p></div></div><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-0070d511><span class="visually-hidden" id="doc-footer-aria-label" data-v-0070d511>Pager</span><div class="pager" data-v-0070d511><a class="VPLink link pager-link prev" href="/article/%E4%BB%8E0%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E5%B9%B4%E5%BA%A6%E6%8A%A5%E5%91%8A.html" data-v-0070d511><!--[--><span class="desc" data-v-0070d511>Previous page</span><span class="title" data-v-0070d511>从0实现一个年度报告</span><!--]--></a></div><div class="pager" data-v-0070d511><a class="VPLink link pager-link next" href="/article/%E6%B5%85%E6%9E%90defineProperty%E4%B8%8EProxy%E5%AE%9E%E7%8E%B0%E7%9A%84%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A.html" data-v-0070d511><!--[--><span class="desc" data-v-0070d511>Next page</span><span class="title" data-v-0070d511>浅析defineProperty与Proxy实现的双向绑定</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-21197ea5 data-v-885c3058><div class="container" data-v-885c3058><p class="message" data-v-885c3058>Released under the MIT License.</p><p class="copyright" data-v-885c3058>Copyright © 2022-PRESENT ZiuChen</p></div></footer><!--[--><!--]--></div></div>
<script>window.__VP_HASH_MAP__=JSON.parse("{\"article_【字节跳动】前端面试题总结.md\":\"DIhQ96FX\",\"article_【2023】青训营 - 前端练习题汇总解析.md\":\"CvvxGgzf\",\"note_javascript.md\":\"pmoQIavt\",\"article_深入javascript数据类型.md\":\"RffYyOqr\",\"index.md\":\"BVWvAWqB\",\"demos_promiseify-post-message_index.md\":\"CtLJLYW5\",\"article_彻底搞懂对象的数据属性描述符、存储属性描述符.md\":\"DyCx02Jx\",\"article_深入理解浏览器运行原理.md\":\"DnXkGWzL\",\"note_react router.md\":\"DEkUw9Ez\",\"note_css.md\":\"DjCR2_2c\",\"article_深入vue3源码，看看vue.use后究竟发生了什么？.md\":\"CilA_DAB\",\"article_深入理解浏览器缓存机制.md\":\"CtUf-n8a\",\"article_一文读懂事件冒泡与事件捕获.md\":\"CYqO1e2o\",\"note_ssr.md\":\"C2mAXuGP\",\"project_clipboardmanager_log_index.md\":\"Xzx78kOu\",\"project_markdown_index.md\":\"BxrUv1hp\",\"article_一文读懂伪类与伪元素.md\":\"CoJ5W-5S\",\"project_clipboardmanager_guide_index.md\":\"B3JoPm0P\",\"project_clipboardmanager_statement_index.md\":\"BrtlAoBb\",\"article_【快手】深入理解前端面试题.md\":\"ki87wz3Y\",\"project_smartwordbreak_index.md\":\"CKwEmU84\",\"self_index.md\":\"CdApvAcI\",\"project_smartwordbreak_statement_index.md\":\"efveKlHc\",\"works_contribution.md\":\"CQyFJhhe\",\"demos_promiseify-post-message_inner.md\":\"p9EPFtdS\",\"article_【用友金融】前端面试题总结.md\":\"C8TnguDb\",\"article_一文读懂函数中this指向问题.md\":\"D7S4SwAY\",\"note_front-end engineering.md\":\"DC1Nn-em\",\"article_浅析defineproperty与proxy实现的双向绑定.md\":\"DSJ0oroN\",\"note_react hooks.md\":\"Bdo4ISRQ\",\"project_markdown_shortcut_index.md\":\"-uOwjn8x\",\"article_深入理解proxy与reflect.md\":\"lAR8g36B\",\"article_从0实现一个年度报告.md\":\"BaLQLzth\",\"project_clipboardmanager_index.md\":\"DsKLuy7N\",\"project_markdown_log_index.md\":\"NIFQe6tg\",\"project_jsrunner_log_index.md\":\"BZY8S9x3\",\"project_jsrunner_index.md\":\"B9OKmcBw\",\"works_opensource.md\":\"DLEDao51\",\"note_mysql.md\":\"CjnNdv04\",\"project_smartwordbreak_log_index.md\":\"CsliAGK2\",\"note_rust.md\":\"B5lY1C3s\",\"note_react.md\":\"CJtLy_c7\",\"note_javascriptenhanced.md\":\"BBtwHR65\",\"note_redux.md\":\"Xi5YKuLE\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZiuChen\",\"description\":\"Unlimited Progress.\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.png\",\"nav\":[{\"text\":\"首页\",\"link\":\"/\"},{\"text\":\"我的项目\",\"items\":[{\"text\":\"超级剪贴板\",\"link\":\"/project/ClipboardManager/\"},{\"text\":\"超级Markdown\",\"link\":\"/project/Markdown/\"},{\"text\":\"超级JavaScript\",\"link\":\"/project/JSRunner/\"},{\"text\":\"超级分词\",\"link\":\"/project/SmartWordBreak/\"}]},{\"text\":\"开源作品\",\"items\":[{\"text\":\"个人作品\",\"link\":\"/works/opensource\"},{\"text\":\"社区贡献\",\"link\":\"/works/contribution\"}]},{\"text\":\"学习笔记\",\"items\":[{\"text\":\"JavaScript基础\",\"link\":\"/note/JavaScript\"},{\"text\":\"CSS基础\",\"link\":\"/note/CSS\"},{\"text\":\"JavaScript进阶\",\"link\":\"/note/JavaScriptEnhanced\"},{\"text\":\"前端工程化\",\"link\":\"/note/Front-end Engineering\"},{\"text\":\"服务端渲染\",\"link\":\"/note/SSR\"},{\"text\":\"React基础\",\"link\":\"/note/React\"},{\"text\":\"React Hooks\",\"link\":\"/note/React Hooks\"},{\"text\":\"Redux\",\"link\":\"/note/Redux\"},{\"text\":\"React Router\",\"link\":\"/note/React Router\"},{\"text\":\"MySQL\",\"link\":\"/note/MySQL\"},{\"text\":\"Rust\",\"link\":\"/note/Rust\"}]},{\"text\":\"个人介绍\",\"link\":\"/self/\"}],\"sidebar\":[{\"text\":\"我的项目\",\"items\":[{\"text\":\"超级剪贴板\",\"link\":\"/project/ClipboardManager/\"},{\"text\":\"超级Markdown\",\"link\":\"/project/Markdown/\"},{\"text\":\"超级JavaScript\",\"link\":\"/project/JSRunner/\"},{\"text\":\"超级分词\",\"link\":\"/project/SmartWordBreak/\"}]},{\"text\":\"开源作品\",\"collapsed\":true,\"items\":[{\"text\":\"个人作品\",\"link\":\"/works/opensource\"},{\"text\":\"社区贡献\",\"link\":\"/works/contribution\"}]},{\"text\":\"文章归档\",\"collapsed\":true,\"items\":[{\"text\":\"【2023】青训营 - 前端练习题汇总解析\",\"link\":\"/article/【2023】青训营 - 前端练习题汇总解析.md\"},{\"text\":\"【字节跳动】前端面试题总结\",\"link\":\"/article/【字节跳动】前端面试题总结.md\"},{\"text\":\"【快手】深入理解前端面试题\",\"link\":\"/article/【快手】深入理解前端面试题.md\"},{\"text\":\"【用友金融】前端面试题总结\",\"link\":\"/article/【用友金融】前端面试题总结.md\"},{\"text\":\"一文读懂事件冒泡与事件捕获\",\"link\":\"/article/一文读懂事件冒泡与事件捕获.md\"},{\"text\":\"一文读懂伪类与伪元素\",\"link\":\"/article/一文读懂伪类与伪元素.md\"},{\"text\":\"一文读懂函数中this指向问题\",\"link\":\"/article/一文读懂函数中this指向问题.md\"},{\"text\":\"从0实现一个年度报告\",\"link\":\"/article/从0实现一个年度报告.md\"},{\"text\":\"彻底搞懂对象的数据属性描述符、存储属性描述符\",\"link\":\"/article/彻底搞懂对象的数据属性描述符、存储属性描述符.md\"},{\"text\":\"浅析defineProperty与Proxy实现的双向绑定\",\"link\":\"/article/浅析defineProperty与Proxy实现的双向绑定.md\"},{\"text\":\"深入JavaScript数据类型\",\"link\":\"/article/深入JavaScript数据类型.md\"},{\"text\":\"深入Vue3源码，看看Vue.use后究竟发生了什么？\",\"link\":\"/article/深入Vue3源码，看看Vue.use后究竟发生了什么？.md\"},{\"text\":\"深入理解Proxy与Reflect\",\"link\":\"/article/深入理解Proxy与Reflect.md\"},{\"text\":\"深入理解浏览器缓存机制\",\"link\":\"/article/深入理解浏览器缓存机制.md\"},{\"text\":\"深入理解浏览器运行原理\",\"link\":\"/article/深入理解浏览器运行原理.md\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/ZiuChen\"},{\"icon\":{\"svg\":\"<svg width=\\\"36\\\" height=\\\"28\\\" viewBox=\\\"0 0 36 28\\\" fill=\\\"none\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"><path fill-rule=\\\"evenodd\\\" clip-rule=\\\"evenodd\\\" d=\\\"M17.5875 6.77268L21.8232 3.40505L17.5875 0.00748237L17.5837 0L13.3555 3.39757L17.5837 6.76894L17.5875 6.77268ZM17.5863 17.3955H17.59L28.5161 8.77432L25.5526 6.39453L17.59 12.6808H17.5863L17.5825 12.6845L9.61993 6.40201L6.66016 8.78181L17.5825 17.3992L17.5863 17.3955ZM17.5828 23.2891L17.5865 23.2854L32.2133 11.7456L35.1768 14.1254L28.5238 19.3752L17.5865 28L0.284376 14.3574L0 14.1291L2.95977 11.7531L17.5828 23.2891Z\\\" fill=\\\"#1E80FF\\\"/></svg>\"},\"link\":\"https://juejin.cn/user/1887205216238477\"}],\"editLink\":{\"pattern\":\"https://github.com/ZiuChen/ZiuChen.github.io/edit/main/docs/:path\",\"text\":\"Edit this page on GitHub\"},\"footer\":{\"message\":\"Released under the MIT License.\",\"copyright\":\"Copyright © 2022-PRESENT ZiuChen\"},\"lastUpdatedText\":\"Updated Date\",\"search\":{\"provider\":\"algolia\",\"options\":{\"appId\":\"LFZ2CPWWUG\",\"apiKey\":\"b4fd296ea5e467b3ac4a582160ff3122\",\"indexName\":\"ziuchenio\"}}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink