study/ZiuChen.github.io
1
0
Fork 0
mirror of https://github.com/ZiuChen/ZiuChen.github.io.git synced 2025-08-17 23:19:55 +08:00
Code Issues Packages Projects Releases Wiki Activity
ZiuChen.github.io/article/深入理解Proxy与Reflect.html

312 lines
124 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>深入理解Proxy与Reflect | ZiuChen</title>
<meta name="description" content="Unlimited Progress.">
<link rel="preload stylesheet" href="/assets/style.ec1c8c15.css" as="style">
<script type="module" src="/assets/app.499ce9ef.js"></script>
<link rel="preload" href="/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="modulepreload" href="/assets/chunks/framework.9b71bc06.js">
<link rel="modulepreload" href="/assets/chunks/theme.35023a02.js">
<link rel="modulepreload" href="/assets/article_深入理解Proxy与Reflect.md.fdad28fc.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-9d158fda><!--[--><!--]--><!--[--><span tabindex="-1" data-v-204cb7b1></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-204cb7b1> Skip to content </a><!--]--><!----><header class="VPNav" data-v-9d158fda data-v-8afa7537><div class="VPNavBar has-sidebar" data-v-8afa7537 data-v-56b97c0f><div class="container" data-v-56b97c0f><div class="title" data-v-56b97c0f><div class="VPNavBarTitle has-sidebar" data-v-56b97c0f data-v-5e4abee9><a class="title" href="/" data-v-5e4abee9><!--[--><!--]--><!--[--><img class="VPImage logo" src="/logo.png" alt data-v-c46cb0a1><!--]--><!--[-->ZiuChen<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-56b97c0f><div class="curtain" data-v-56b97c0f></div><div class="content-body" data-v-56b97c0f><!--[--><!--]--><div class="VPNavBarSearch search" data-v-56b97c0f><!--[--><!----><div id="docsearch"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><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-56b97c0f data-v-471dd2d2><span id="main-nav-aria-label" class="visually-hidden" data-v-471dd2d2>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/" tabindex="0" data-v-471dd2d2 data-v-79f36db3><!--[--><span data-v-79f36db3>首页</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-471dd2d2 data-v-8f17ebbc><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-8f17ebbc><span class="text" data-v-8f17ebbc><!----><span data-v-8f17ebbc>我的项目</span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-8f17ebbc><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-8f17ebbc><div class="VPMenu" data-v-8f17ebbc data-v-f5acf789><div class="items" data-v-f5acf789><!--[--><!--[--><div class="VPMenuLink" data-v-f5acf789 data-v-5f1b289c><a class="VPLink link" href="/project/ClipboardManager/" data-v-5f1b289c><!--[-->超级剪贴板<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-f5acf789 data-v-5f1b289c><a class="VPLink link" href="/project/Markdown/" data-v-5f1b289c><!--[-->超级Markdown<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-f5acf789 data-v-5f1b289c><a class="VPLink link" href="/project/JSRunner/" data-v-5f1b289c><!--[-->超级JavaScript<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-f5acf789 data-v-5f1b289c><a class="VPLink link" href="/project/SmartWordBreak/" data-v-5f1b289c><!--[-->超级分词<!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-471dd2d2 data-v-8f17ebbc><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-8f17ebbc><span class="text" data-v-8f17ebbc><!----><span data-v-8f17ebbc>开源作品</span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-8f17ebbc><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-8f17ebbc><div class="VPMenu" data-v-8f17ebbc data-v-f5acf789><div class="items" data-v-f5acf789><!--[--><!--[--><div class="VPMenuLink" data-v-f5acf789 data-v-5f1b289c><a class="VPLink link" href="/works/opensource.html" data-v-5f1b289c><!--[-->个人作品<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-f5acf789 data-v-5f1b289c><a class="VPLink link" href="/works/contribution.html" data-v-5f1b289c><!--[-->社区贡献<!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-471dd2d2 data-v-8f17ebbc><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-8f17ebbc><span class="text" data-v-8f17ebbc><!----><span data-v-8f17ebbc>学习笔记</span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-8f17ebbc><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-8f17ebbc><div class="VPMenu" data-v-8f17ebbc data-v-f5acf789><div class="items" data-v-f5acf789><!--[--><!--[--><div class="VPMenuLink" data-v-f5acf789 data-v-5f1b289c><a class="VPLink link" href="/note/JavaScript.html" data-v-5f1b289c><!--[-->JavaScript基础<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-f5acf789 data-v-5f1b289c><a class="VPLink link" href="/note/CSS.html" data-v-5f1b289c><!--[-->CSS基础<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-f5acf789 data-v-5f1b289c><a class="VPLink link" href="/note/JavaScriptEnhanced.html" data-v-5f1b289c><!--[-->JavaScript进阶<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-f5acf789 data-v-5f1b289c><a class="VPLink link" href="/note/Front-end%20Engineering.html" data-v-5f1b289c><!--[-->前端工程化<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-f5acf789 data-v-5f1b289c><a class="VPLink link" href="/note/SSR.html" data-v-5f1b289c><!--[-->服务端渲染<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-f5acf789 data-v-5f1b289c><a class="VPLink link" href="/note/React.html" data-v-5f1b289c><!--[-->React基础<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-f5acf789 data-v-5f1b289c><a class="VPLink link" href="/note/React%20Hooks.html" data-v-5f1b289c><!--[-->React Hooks<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-f5acf789 data-v-5f1b289c><a class="VPLink link" href="/note/Redux.html" data-v-5f1b289c><!--[-->Redux<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-f5acf789 data-v-5f1b289c><a class="VPLink link" href="/note/React%20Router.html" data-v-5f1b289c><!--[-->React Router<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-f5acf789 data-v-5f1b289c><a class="VPLink link" href="/note/MySQL.html" data-v-5f1b289c><!--[-->MySQL<!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/self/" tabindex="0" data-v-471dd2d2 data-v-79f36db3><!--[--><span data-v-79f36db3>个人介绍</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-56b97c0f data-v-11fb0f5b><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-11fb0f5b data-v-599084b8 data-v-739664f6><span class="check" data-v-739664f6><span class="icon" data-v-739664f6><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-599084b8><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-599084b8><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-56b97c0f data-v-293aafa9 data-v-99a410ba><!--[--><a class="VPSocialLink no-icon" href="https://github.com/ZiuChen" aria-label="github" target="_blank" rel="noopener" data-v-99a410ba data-v-72dca3b0><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/1887205216238477" aria-label target="_blank" rel="noopener" data-v-99a410ba data-v-72dca3b0><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-56b97c0f data-v-54863f0d data-v-8f17ebbc><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-8f17ebbc><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-8f17ebbc><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-8f17ebbc><div class="VPMenu" data-v-8f17ebbc data-v-f5acf789><!----><!--[--><!--[--><!----><div class="group" data-v-54863f0d><div class="item appearance" data-v-54863f0d><p class="label" data-v-54863f0d>Appearance</p><div class="appearance-action" data-v-54863f0d><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-54863f0d data-v-599084b8 data-v-739664f6><span class="check" data-v-739664f6><span class="icon" data-v-739664f6><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-599084b8><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-599084b8><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-54863f0d><div class="item social-links" data-v-54863f0d><div class="VPSocialLinks social-links-list" data-v-54863f0d data-v-99a410ba><!--[--><a class="VPSocialLink no-icon" href="https://github.com/ZiuChen" aria-label="github" target="_blank" rel="noopener" data-v-99a410ba data-v-72dca3b0><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/1887205216238477" aria-label target="_blank" rel="noopener" data-v-99a410ba data-v-72dca3b0><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-56b97c0f data-v-1b1f6b9e><span class="container" data-v-1b1f6b9e><span class="top" data-v-1b1f6b9e></span><span class="middle" data-v-1b1f6b9e></span><span class="bottom" data-v-1b1f6b9e></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-9d158fda data-v-5d953687><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-5d953687><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-5d953687><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-5d953687>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-5d953687 data-v-989d74b8><button data-v-989d74b8>Return to top</button><!----></div></div><aside class="VPSidebar" data-v-9d158fda data-v-0e1b55d4><div class="curtain" data-v-0e1b55d4></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-0e1b55d4><span class="visually-hidden" id="sidebar-aria-label" data-v-0e1b55d4> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-0e1b55d4><section class="VPSidebarItem level-0" data-v-0e1b55d4 data-v-4a3e3544><div class="item" role="button" tabindex="0" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><h2 class="text" data-v-4a3e3544>我的项目</h2><!----></div><div class="items" data-v-4a3e3544><!--[--><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><a class="VPLink link link" href="/project/ClipboardManager/" data-v-4a3e3544><!--[--><p class="text" data-v-4a3e3544>超级剪贴板</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><a class="VPLink link link" href="/project/Markdown/" data-v-4a3e3544><!--[--><p class="text" data-v-4a3e3544>超级Markdown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><a class="VPLink link link" href="/project/JSRunner/" data-v-4a3e3544><!--[--><p class="text" data-v-4a3e3544>超级JavaScript</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><a class="VPLink link link" href="/project/SmartWordBreak/" data-v-4a3e3544><!--[--><p class="text" data-v-4a3e3544>超级分词</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-0e1b55d4><section class="VPSidebarItem level-0 collapsible collapsed" data-v-0e1b55d4 data-v-4a3e3544><div class="item" role="button" tabindex="0" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><h2 class="text" data-v-4a3e3544>开源作品</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-4a3e3544><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-4a3e3544><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-4a3e3544><!--[--><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><a class="VPLink link link" href="/works/opensource.html" data-v-4a3e3544><!--[--><p class="text" data-v-4a3e3544>个人作品</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><a class="VPLink link link" href="/works/contribution.html" data-v-4a3e3544><!--[--><p class="text" data-v-4a3e3544>社区贡献</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-0e1b55d4><section class="VPSidebarItem level-0 collapsible has-active" data-v-0e1b55d4 data-v-4a3e3544><div class="item" role="button" tabindex="0" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><h2 class="text" data-v-4a3e3544>文章归档</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-4a3e3544><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-4a3e3544><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-4a3e3544><!--[--><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></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-4a3e3544><!--[--><p class="text" data-v-4a3e3544>【2023】青训营 - 前端练习题汇总解析</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></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-4a3e3544><!--[--><p class="text" data-v-4a3e3544>【字节跳动】前端面试题总结</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></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-4a3e3544><!--[--><p class="text" data-v-4a3e3544>【快手】深入理解前端面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></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-4a3e3544><!--[--><p class="text" data-v-4a3e3544>【用友金融】前端面试题总结</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></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-4a3e3544><!--[--><p class="text" data-v-4a3e3544>一文读懂事件冒泡与事件捕获</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></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-4a3e3544><!--[--><p class="text" data-v-4a3e3544>一文读懂伪类与伪元素</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></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-4a3e3544><!--[--><p class="text" data-v-4a3e3544>一文读懂函数中this指向问题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></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-4a3e3544><!--[--><p class="text" data-v-4a3e3544>从0实现一个年度报告</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></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-4a3e3544><!--[--><p class="text" data-v-4a3e3544>彻底搞懂对象的数据属性描述符、存储属性描述符</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></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-4a3e3544><!--[--><p class="text" data-v-4a3e3544>浅析defineProperty与Proxy实现的双向绑定</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></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-4a3e3544><!--[--><p class="text" data-v-4a3e3544>深入JavaScript数据类型</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></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-4a3e3544><!--[--><p class="text" data-v-4a3e3544>深入Vue3源码，看看Vue.use后究竟发生了什么？</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></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-4a3e3544><!--[--><p class="text" data-v-4a3e3544>深入理解Proxy与Reflect</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></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-4a3e3544><!--[--><p class="text" data-v-4a3e3544>深入理解浏览器缓存机制</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></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-4a3e3544><!--[--><p class="text" data-v-4a3e3544>深入理解浏览器运行原理</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-0e1b55d4><section class="VPSidebarItem level-0 collapsible collapsed" data-v-0e1b55d4 data-v-4a3e3544><div class="item" role="button" tabindex="0" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><h2 class="text" data-v-4a3e3544>学习笔记</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-4a3e3544><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-4a3e3544><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-4a3e3544><!--[--><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><a class="VPLink link link" href="/note/JavaScript.html" data-v-4a3e3544><!--[--><p class="text" data-v-4a3e3544>JavaScript基础</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><a class="VPLink link link" href="/note/CSS.html" data-v-4a3e3544><!--[--><p class="text" data-v-4a3e3544>CSS基础</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><a class="VPLink link link" href="/note/JavaScriptEnhanced.html" data-v-4a3e3544><!--[--><p class="text" data-v-4a3e3544>JavaScript进阶</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><a class="VPLink link link" href="/note/Front-end%20Engineering.html" data-v-4a3e3544><!--[--><p class="text" data-v-4a3e3544>前端工程化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><a class="VPLink link link" href="/note/SSR.html" data-v-4a3e3544><!--[--><p class="text" data-v-4a3e3544>服务端渲染</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><a class="VPLink link link" href="/note/React.html" data-v-4a3e3544><!--[--><p class="text" data-v-4a3e3544>React基础</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><a class="VPLink link link" href="/note/React%20Hooks.html" data-v-4a3e3544><!--[--><p class="text" data-v-4a3e3544>React Hooks</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><a class="VPLink link link" href="/note/Redux.html" data-v-4a3e3544><!--[--><p class="text" data-v-4a3e3544>Redux</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><a class="VPLink link link" href="/note/React%20Router.html" data-v-4a3e3544><!--[--><p class="text" data-v-4a3e3544>React Router</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><a class="VPLink link link" href="/note/MySQL.html" data-v-4a3e3544><!--[--><p class="text" data-v-4a3e3544>MySQL</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-9d158fda data-v-585eef7d><div class="VPDoc has-sidebar has-aside" data-v-585eef7d data-v-a686a8a6><!--[--><!--]--><div class="container" data-v-a686a8a6><div class="aside" data-v-a686a8a6><div class="aside-curtain" data-v-a686a8a6></div><div class="aside-container" data-v-a686a8a6><div class="aside-content" data-v-a686a8a6><div class="VPDocAside" data-v-a686a8a6 data-v-31570b60><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-31570b60 data-v-ba8455b5><div class="content" data-v-ba8455b5><div class="outline-marker" data-v-ba8455b5></div><div class="outline-title" role="heading" aria-level="2" data-v-ba8455b5>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-ba8455b5><span class="visually-hidden" id="doc-outline-aria-label" data-v-ba8455b5> Table of Contents for current page </span><ul class="root" data-v-ba8455b5 data-v-6713c9cc><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-31570b60></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-a686a8a6><div class="content-container" data-v-a686a8a6><!--[--><!--]--><!----><main class="main" data-v-a686a8a6><div style="position:relative;" class="vp-doc _article_%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3Proxy%E4%B8%8EReflect" data-v-a686a8a6><div><h1 id="深入理解proxy与reflect" tabindex="-1">深入理解Proxy与Reflect <a class="header-anchor" href="#深入理解proxy与reflect" aria-label="Permalink to &quot;深入理解Proxy与Reflect&quot;">​</a></h1><h3 id="监听对象的操作" tabindex="-1">监听对象的操作 <a class="header-anchor" href="#监听对象的操作" aria-label="Permalink to &quot;监听对象的操作&quot;">​</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;">&#39;ziu&#39;</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;">&#39;get&#39;</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;">&#39;set&#39;</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;">&#39;ziu&#39;</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;">&#39;get&#39;</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;">&#39;set&#39;</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;">&#39;Ziu&#39;</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;">&#39;Ziu&#39;</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;">&#39;get&#39;</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;">&#39;set&#39;</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;">&#39;get&#39;</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;">&#39;set&#39;</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 &quot;Proxy类基本使用&quot;">​</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;">&#39;ziu&#39;</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;">&#39;Ziu&#39;</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: &#39;Ziu&#39;, 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;">&#39;ziu&#39;</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;">&#39;Ziu&#39;</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: &#39;Ziu&#39;, 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 &quot;捕获器&quot;">​</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;">&#39;age&#39;</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;">&#39;age&#39;</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 &quot;Reflect&quot;">​</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 &quot;与Object的区别&quot;">​</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;">&#39;ziu&#39;</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;">&#39;name&#39;</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;">&#39;name&#39;</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;">&#39;ziu&#39;</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;">&#39;name&#39;</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;">&#39;name&#39;</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 &quot;Reflect常见方法&quot;">​</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;">&#39;ziu&#39;</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;">&#39;Ziu&#39;</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;">&#39;ziu&#39;</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;">&#39;Ziu&#39;</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 &quot;Reflect.construct方法&quot;">​</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;">&#39;ziu&#39;</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;">&#39;ziu&#39;</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;">&#39;ziu&#39;</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;">&#39;ziu&#39;</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></div></div></main><footer class="VPDocFooter" data-v-a686a8a6 data-v-0b8e2cba><!--[--><!--]--><div class="edit-info" data-v-0b8e2cba><div class="edit-link" data-v-0b8e2cba><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/深入理解Proxy与Reflect.md" target="_blank" rel="noreferrer" data-v-0b8e2cba><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-0b8e2cba><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page on GitHub<!--]--></a></div><div class="last-updated" data-v-0b8e2cba><p class="VPLastUpdated" data-v-0b8e2cba data-v-a6f11a31>Updated Date: <time datetime="2024-01-06T06:57:39.000Z" data-v-a6f11a31></time></p></div></div><nav class="prev-next" data-v-0b8e2cba><div class="pager" data-v-0b8e2cba><a class="pager-link prev" 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-0b8e2cba><span class="desc" data-v-0b8e2cba>Previous page</span><span class="title" data-v-0b8e2cba>深入Vue3源码，看看Vue.use后究竟发生了什么？</span></a></div><div class="pager" data-v-0b8e2cba><a class="pager-link next" 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-0b8e2cba><span class="desc" data-v-0b8e2cba>Next page</span><span class="title" data-v-0b8e2cba>深入理解浏览器缓存机制</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-9d158fda data-v-2c80950a><div class="container" data-v-2c80950a><p class="message" data-v-2c80950a>Released under the MIT License.</p><p class="copyright" data-v-2c80950a>Copyright © 2019-present Ziu Chen</p></div></footer><!--[--><!--]--></div></div>
<script>window.__VP_HASH_MAP__=JSON.parse("{\"index.md\":\"48a36636\",\"article_浅析defineproperty与proxy实现的双向绑定.md\":\"13ed773f\",\"article_一文读懂事件冒泡与事件捕获.md\":\"d1929e50\",\"article_深入理解浏览器缓存机制.md\":\"69e6a2c6\",\"article_一文读懂函数中this指向问题.md\":\"28d5e9b4\",\"article_深入javascript数据类型.md\":\"477ee358\",\"note_css.md\":\"fbe56ac3\",\"article_深入理解浏览器运行原理.md\":\"a9684ca4\",\"note_redux.md\":\"02de7bbe\",\"project_smartwordbreak_index.md\":\"66a30ca5\",\"note_javascript.md\":\"45a113ba\",\"article_【快手】深入理解前端面试题.md\":\"d44b9955\",\"article_【字节跳动】前端面试题总结.md\":\"30e03a5f\",\"article_【用友金融】前端面试题总结.md\":\"6d315a97\",\"article_深入vue3源码，看看vue.use后究竟发生了什么？.md\":\"70bae50e\",\"article_一文读懂伪类与伪元素.md\":\"68cce63a\",\"article_从0实现一个年度报告.md\":\"175c992f\",\"article_深入理解proxy与reflect.md\":\"fdad28fc\",\"project_jsrunner_log_index.md\":\"5b2edea9\",\"note_react router.md\":\"8d4994d8\",\"project_clipboardmanager_statement_index.md\":\"158b6468\",\"project_jsrunner_index.md\":\"d62a7429\",\"project_markdown_index.md\":\"5a93c50a\",\"article_【2023】青训营 - 前端练习题汇总解析.md\":\"dd1797c0\",\"project_clipboardmanager_log_index.md\":\"30d348e4\",\"project_clipboardmanager_index.md\":\"a4052946\",\"article_彻底搞懂对象的数据属性描述符、存储属性描述符.md\":\"dd182e72\",\"project_smartwordbreak_log_index.md\":\"6c6fe4e0\",\"project_smartwordbreak_statement_index.md\":\"33bd8d5d\",\"note_mysql.md\":\"45f0f4c7\",\"works_contribution.md\":\"997cb34f\",\"works_opensource.md\":\"db24f357\",\"project_markdown_shortcut_index.md\":\"90359831\",\"project_clipboardmanager_guide_index.md\":\"3c3d400d\",\"project_markdown_log_index.md\":\"bb95b786\",\"note_front-end engineering.md\":\"75c88456\",\"note_ssr.md\":\"ee0ee312\",\"self_index.md\":\"82f653ee\",\"note_react hooks.md\":\"7a05a70a\",\"note_react.md\":\"f9ad4dc2\",\"note_javascriptenhanced.md\":\"f1655783\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZiuChen\",\"description\":\"Unlimited Progress.\",\"base\":\"/\",\"head\":[],\"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\":\"个人介绍\",\"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】青训营 - 前端练习题汇总解析\"},{\"text\":\"【字节跳动】前端面试题总结\",\"link\":\"/article/【字节跳动】前端面试题总结\"},{\"text\":\"【快手】深入理解前端面试题\",\"link\":\"/article/【快手】深入理解前端面试题\"},{\"text\":\"【用友金融】前端面试题总结\",\"link\":\"/article/【用友金融】前端面试题总结\"},{\"text\":\"一文读懂事件冒泡与事件捕获\",\"link\":\"/article/一文读懂事件冒泡与事件捕获\"},{\"text\":\"一文读懂伪类与伪元素\",\"link\":\"/article/一文读懂伪类与伪元素\"},{\"text\":\"一文读懂函数中this指向问题\",\"link\":\"/article/一文读懂函数中this指向问题\"},{\"text\":\"从0实现一个年度报告\",\"link\":\"/article/从0实现一个年度报告\"},{\"text\":\"彻底搞懂对象的数据属性描述符、存储属性描述符\",\"link\":\"/article/彻底搞懂对象的数据属性描述符、存储属性描述符\"},{\"text\":\"浅析defineProperty与Proxy实现的双向绑定\",\"link\":\"/article/浅析defineProperty与Proxy实现的双向绑定\"},{\"text\":\"深入JavaScript数据类型\",\"link\":\"/article/深入JavaScript数据类型\"},{\"text\":\"深入Vue3源码，看看Vue.use后究竟发生了什么？\",\"link\":\"/article/深入Vue3源码，看看Vue.use后究竟发生了什么？\"},{\"text\":\"深入理解Proxy与Reflect\",\"link\":\"/article/深入理解Proxy与Reflect\"},{\"text\":\"深入理解浏览器缓存机制\",\"link\":\"/article/深入理解浏览器缓存机制\"},{\"text\":\"深入理解浏览器运行原理\",\"link\":\"/article/深入理解浏览器运行原理\"}]},{\"text\":\"学习笔记\",\"collapsed\":true,\"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\"}]}],\"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 © 2019-present Ziu Chen\"},\"lastUpdatedText\":\"Updated Date\",\"search\":{\"provider\":\"algolia\",\"options\":{\"appId\":\"LFZ2CPWWUG\",\"apiKey\":\"b4fd296ea5e467b3ac4a582160ff3122\",\"indexName\":\"ziuchenio\"}}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}");</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink