study/ZiuChen.github.io
1
0
Fork 0
mirror of https://github.com/ZiuChen/ZiuChen.github.io.git synced 2025-08-18 07:29:33 +08:00
Code Issues Packages Projects Releases Wiki Activity
ZiuChen.github.io/article/一文读懂函数中this指向问题.html

174 lines
61 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>一文读懂函数中this指向问题 | ZiuChen</title>
<meta name="description" content="Unlimited Progress.">
<link rel="preload stylesheet" href="/assets/style.6d715206.css" as="style">
<link rel="modulepreload" href="/assets/app.94d5b31a.js">
<link rel="modulepreload" href="/assets/article_一文读懂函数中this指向问题.md.e6d6ad8a.lean.js">
<link rel="icon" href="/logo.png">
<script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
</head>
<body>
<div id="app"><div class="Layout" data-v-23299678><!--[--><!--]--><!--[--><span tabindex="-1" data-v-4510101b></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-4510101b> Skip to content </a><!--]--><!----><header class="VPNav" data-v-23299678 data-v-55561c08><div class="VPNavBar has-sidebar" data-v-55561c08 data-v-b274701f><div class="container" data-v-b274701f><div class="title" data-v-b274701f><div class="VPNavBarTitle has-sidebar" data-v-b274701f data-v-549de4de><a class="title" href="/" data-v-549de4de><!--[--><!--]--><!--[--><img class="VPImage logo" src="/logo.png" alt data-v-079e60c3><!--]--><!--[-->ZiuChen<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-b274701f><div class="curtain" data-v-b274701f></div><div class="content-body" data-v-b274701f><!--[--><!--]--><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-b274701f data-v-33721c64><span id="main-nav-aria-label" class="visually-hidden" data-v-33721c64>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/" data-v-33721c64 data-v-b293d4cd data-v-857b9044><!--[-->首页<!--]--><!----></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-33721c64 data-v-49ae13ed><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-49ae13ed><span class="text" data-v-49ae13ed><!----> 我的项目 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-49ae13ed><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-49ae13ed><div class="VPMenu" data-v-49ae13ed data-v-5ba41aea><div class="items" data-v-5ba41aea><!--[--><!--[--><div class="VPMenuLink" data-v-5ba41aea data-v-4055455f><a class="VPLink link" href="/project/ClipboardManager/" data-v-4055455f data-v-857b9044><!--[-->超级剪贴板<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-5ba41aea data-v-4055455f><a class="VPLink link" href="/project/SmartWordBreak/" data-v-4055455f data-v-857b9044><!--[-->超级分词<!--]--><!----></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-33721c64 data-v-49ae13ed><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-49ae13ed><span class="text" data-v-49ae13ed><!----> 开源作品 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-49ae13ed><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-49ae13ed><div class="VPMenu" data-v-49ae13ed data-v-5ba41aea><div class="items" data-v-5ba41aea><!--[--><!--[--><div class="VPMenuLink" data-v-5ba41aea data-v-4055455f><a class="VPLink link" href="/works/opensource.html" data-v-4055455f data-v-857b9044><!--[-->个人作品<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-5ba41aea data-v-4055455f><a class="VPLink link" href="/works/contribution.html" data-v-4055455f data-v-857b9044><!--[-->社区贡献<!--]--><!----></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-33721c64 data-v-49ae13ed><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-49ae13ed><span class="text" data-v-49ae13ed><!----> 学习笔记 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-49ae13ed><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-49ae13ed><div class="VPMenu" data-v-49ae13ed data-v-5ba41aea><div class="items" data-v-5ba41aea><!--[--><!--[--><div class="VPMenuLink" data-v-5ba41aea data-v-4055455f><a class="VPLink link" href="/note/JavaScript.html" data-v-4055455f data-v-857b9044><!--[-->JavaScript基础<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-5ba41aea data-v-4055455f><a class="VPLink link" href="/note/CSS.html" data-v-4055455f data-v-857b9044><!--[-->CSS基础<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-5ba41aea data-v-4055455f><a class="VPLink link" href="/note/JavaScriptEnhanced.html" data-v-4055455f data-v-857b9044><!--[-->JavaScript进阶<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-5ba41aea data-v-4055455f><a class="VPLink link" href="/note/Front-end%20Engineering.html" data-v-4055455f data-v-857b9044><!--[-->前端工程化<!--]--><!----></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" 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-33721c64 data-v-b293d4cd data-v-857b9044><!--[-->文章创作<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/self/" data-v-33721c64 data-v-b293d4cd data-v-857b9044><!--[-->个人介绍<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-b274701f data-v-368654cb><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" aria-checked="false" data-v-368654cb data-v-b602623b data-v-d161f211><span class="check" data-v-d161f211><span class="icon" data-v-d161f211><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-b602623b><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-b602623b><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-b274701f data-v-b74b5d6b data-v-6f460e71><!--[--><a class="VPSocialLink" href="https://ziuchen.github.io/" target="_blank" rel="noopener" data-v-6f460e71 data-v-51a76c22><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" href="https://juejin.cn/user/1887205216238477" target="_blank" rel="noopener" data-v-6f460e71 data-v-51a76c22><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-b274701f data-v-d5f0985d data-v-49ae13ed><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-49ae13ed><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-49ae13ed><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-49ae13ed><div class="VPMenu" data-v-49ae13ed data-v-5ba41aea><!----><!--[--><!--[--><!----><div class="group" data-v-d5f0985d><div class="item appearance" data-v-d5f0985d><p class="label" data-v-d5f0985d>Appearance</p><div class="appearance-action" data-v-d5f0985d><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" aria-checked="false" data-v-d5f0985d data-v-b602623b data-v-d161f211><span class="check" data-v-d161f211><span class="icon" data-v-d161f211><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-b602623b><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-b602623b><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-d5f0985d><div class="item social-links" data-v-d5f0985d><div class="VPSocialLinks social-links-list" data-v-d5f0985d data-v-6f460e71><!--[--><a class="VPSocialLink" href="https://ziuchen.github.io/" target="_blank" rel="noopener" data-v-6f460e71 data-v-51a76c22><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" href="https://juejin.cn/user/1887205216238477" target="_blank" rel="noopener" data-v-6f460e71 data-v-51a76c22><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-b274701f data-v-7b6c7fd5><span class="container" data-v-7b6c7fd5><span class="top" data-v-7b6c7fd5></span><span class="middle" data-v-7b6c7fd5></span><span class="bottom" data-v-7b6c7fd5></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav" data-v-23299678 data-v-9fc14245><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-9fc14245><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-9fc14245><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-9fc14245>Menu</span></button><a class="top-link" href="#" data-v-9fc14245>Return to top</a></div><aside class="VPSidebar" data-v-23299678 data-v-8a8550ea><div class="curtain" data-v-8a8550ea></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-8a8550ea><span class="visually-hidden" id="sidebar-aria-label" data-v-8a8550ea> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-8a8550ea><section class="VPSidebarItem level-0 collapsible" data-v-8a8550ea data-v-6646d2d3><div class="item" role="button" data-v-6646d2d3><div class="indicator" data-v-6646d2d3></div><a class="VPLink link" data-v-6646d2d3 data-v-857b9044><!--[--><h2 class="text" data-v-6646d2d3>我的项目</h2><!--]--><!----></a><div class="caret" role="button" data-v-6646d2d3><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-6646d2d3><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-6646d2d3><!--[--><div class="VPSidebarItem level-1 is-link" data-v-6646d2d3 data-v-6646d2d3><div class="item" data-v-6646d2d3><div class="indicator" data-v-6646d2d3></div><a class="VPLink link link" href="/project/ClipboardManager/" data-v-6646d2d3 data-v-857b9044><!--[--><p class="text" data-v-6646d2d3>超级剪贴板</p><!--]--><!----></a><div class="caret" role="button" data-v-6646d2d3><!----></div></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6646d2d3 data-v-6646d2d3><div class="item" data-v-6646d2d3><div class="indicator" data-v-6646d2d3></div><a class="VPLink link link" href="/project/SmartWordBreak/" data-v-6646d2d3 data-v-857b9044><!--[--><p class="text" data-v-6646d2d3>超级分词</p><!--]--><!----></a><div class="caret" role="button" data-v-6646d2d3><!----></div></div><!----></div><!--]--></div></section></div><div class="group" data-v-8a8550ea><section class="VPSidebarItem level-0 collapsible" data-v-8a8550ea data-v-6646d2d3><div class="item" role="button" data-v-6646d2d3><div class="indicator" data-v-6646d2d3></div><a class="VPLink link" data-v-6646d2d3 data-v-857b9044><!--[--><h2 class="text" data-v-6646d2d3>开源作品</h2><!--]--><!----></a><div class="caret" role="button" data-v-6646d2d3><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-6646d2d3><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-6646d2d3><!--[--><div class="VPSidebarItem level-1 is-link" data-v-6646d2d3 data-v-6646d2d3><div class="item" data-v-6646d2d3><div class="indicator" data-v-6646d2d3></div><a class="VPLink link link" href="/works/opensource.html" data-v-6646d2d3 data-v-857b9044><!--[--><p class="text" data-v-6646d2d3>个人作品</p><!--]--><!----></a><div class="caret" role="button" data-v-6646d2d3><!----></div></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6646d2d3 data-v-6646d2d3><div class="item" data-v-6646d2d3><div class="indicator" data-v-6646d2d3></div><a class="VPLink link link" href="/works/contribution.html" data-v-6646d2d3 data-v-857b9044><!--[--><p class="text" data-v-6646d2d3>社区贡献</p><!--]--><!----></a><div class="caret" role="button" data-v-6646d2d3><!----></div></div><!----></div><!--]--></div></section></div><div class="group" data-v-8a8550ea><section class="VPSidebarItem level-0 collapsible has-active" data-v-8a8550ea data-v-6646d2d3><div class="item" role="button" data-v-6646d2d3><div class="indicator" data-v-6646d2d3></div><a class="VPLink link" data-v-6646d2d3 data-v-857b9044><!--[--><h2 class="text" data-v-6646d2d3>文章创作</h2><!--]--><!----></a><div class="caret" role="button" data-v-6646d2d3><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-6646d2d3><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-6646d2d3><!--[--><div class="VPSidebarItem level-1 is-link" data-v-6646d2d3 data-v-6646d2d3><div class="item" data-v-6646d2d3><div class="indicator" data-v-6646d2d3></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-6646d2d3 data-v-857b9044><!--[--><p class="text" data-v-6646d2d3>【2023】青训营 - 前端练习题汇总解析</p><!--]--><!----></a><div class="caret" role="button" data-v-6646d2d3><!----></div></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6646d2d3 data-v-6646d2d3><div class="item" data-v-6646d2d3><div class="indicator" data-v-6646d2d3></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-6646d2d3 data-v-857b9044><!--[--><p class="text" data-v-6646d2d3>一文读懂事件冒泡与事件捕获</p><!--]--><!----></a><div class="caret" role="button" data-v-6646d2d3><!----></div></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6646d2d3 data-v-6646d2d3><div class="item" data-v-6646d2d3><div class="indicator" data-v-6646d2d3></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-6646d2d3 data-v-857b9044><!--[--><p class="text" data-v-6646d2d3>一文读懂伪类与伪元素</p><!--]--><!----></a><div class="caret" role="button" data-v-6646d2d3><!----></div></div><!----></div><div class="VPSidebarItem level-1 is-link is-active has-active" data-v-6646d2d3 data-v-6646d2d3><div class="item" data-v-6646d2d3><div class="indicator" data-v-6646d2d3></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-6646d2d3 data-v-857b9044><!--[--><p class="text" data-v-6646d2d3>一文读懂函数中this指向问题</p><!--]--><!----></a><div class="caret" role="button" data-v-6646d2d3><!----></div></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6646d2d3 data-v-6646d2d3><div class="item" data-v-6646d2d3><div class="indicator" data-v-6646d2d3></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-6646d2d3 data-v-857b9044><!--[--><p class="text" data-v-6646d2d3>从0实现一个年度报告</p><!--]--><!----></a><div class="caret" role="button" data-v-6646d2d3><!----></div></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6646d2d3 data-v-6646d2d3><div class="item" data-v-6646d2d3><div class="indicator" data-v-6646d2d3></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-6646d2d3 data-v-857b9044><!--[--><p class="text" data-v-6646d2d3>彻底搞懂对象的数据属性描述符、存储属性描述符</p><!--]--><!----></a><div class="caret" role="button" data-v-6646d2d3><!----></div></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6646d2d3 data-v-6646d2d3><div class="item" data-v-6646d2d3><div class="indicator" data-v-6646d2d3></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-6646d2d3 data-v-857b9044><!--[--><p class="text" data-v-6646d2d3>深入Vue3源码，看看Vue.use后究竟发生了什么？</p><!--]--><!----></a><div class="caret" role="button" data-v-6646d2d3><!----></div></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6646d2d3 data-v-6646d2d3><div class="item" data-v-6646d2d3><div class="indicator" data-v-6646d2d3></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-6646d2d3 data-v-857b9044><!--[--><p class="text" data-v-6646d2d3>深入理解Proxy与Reflect</p><!--]--><!----></a><div class="caret" role="button" data-v-6646d2d3><!----></div></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6646d2d3 data-v-6646d2d3><div class="item" data-v-6646d2d3><div class="indicator" data-v-6646d2d3></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-6646d2d3 data-v-857b9044><!--[--><p class="text" data-v-6646d2d3>深入理解浏览器缓存机制</p><!--]--><!----></a><div class="caret" role="button" data-v-6646d2d3><!----></div></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6646d2d3 data-v-6646d2d3><div class="item" data-v-6646d2d3><div class="indicator" data-v-6646d2d3></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-6646d2d3 data-v-857b9044><!--[--><p class="text" data-v-6646d2d3>深入理解浏览器运行原理</p><!--]--><!----></a><div class="caret" role="button" data-v-6646d2d3><!----></div></div><!----></div><!--]--></div></section></div><div class="group" data-v-8a8550ea><section class="VPSidebarItem level-0 collapsible" data-v-8a8550ea data-v-6646d2d3><div class="item" role="button" data-v-6646d2d3><div class="indicator" data-v-6646d2d3></div><a class="VPLink link" data-v-6646d2d3 data-v-857b9044><!--[--><h2 class="text" data-v-6646d2d3>学习笔记</h2><!--]--><!----></a><div class="caret" role="button" data-v-6646d2d3><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-6646d2d3><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-6646d2d3><!--[--><div class="VPSidebarItem level-1 is-link" data-v-6646d2d3 data-v-6646d2d3><div class="item" data-v-6646d2d3><div class="indicator" data-v-6646d2d3></div><a class="VPLink link link" href="/note/JavaScript.html" data-v-6646d2d3 data-v-857b9044><!--[--><p class="text" data-v-6646d2d3>JavaScript基础</p><!--]--><!----></a><div class="caret" role="button" data-v-6646d2d3><!----></div></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6646d2d3 data-v-6646d2d3><div class="item" data-v-6646d2d3><div class="indicator" data-v-6646d2d3></div><a class="VPLink link link" href="/note/CSS.html" data-v-6646d2d3 data-v-857b9044><!--[--><p class="text" data-v-6646d2d3>CSS基础</p><!--]--><!----></a><div class="caret" role="button" data-v-6646d2d3><!----></div></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6646d2d3 data-v-6646d2d3><div class="item" data-v-6646d2d3><div class="indicator" data-v-6646d2d3></div><a class="VPLink link link" href="/note/JavaScriptEnhanced.html" data-v-6646d2d3 data-v-857b9044><!--[--><p class="text" data-v-6646d2d3>JavaScript进阶</p><!--]--><!----></a><div class="caret" role="button" data-v-6646d2d3><!----></div></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6646d2d3 data-v-6646d2d3><div class="item" data-v-6646d2d3><div class="indicator" data-v-6646d2d3></div><a class="VPLink link link" href="/note/Front-end%20Engineering.html" data-v-6646d2d3 data-v-857b9044><!--[--><p class="text" data-v-6646d2d3>前端工程化</p><!--]--><!----></a><div class="caret" role="button" data-v-6646d2d3><!----></div></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-23299678 data-v-f76a1d95><div class="VPDoc has-sidebar has-aside" data-v-f76a1d95 data-v-e32ad3fb><div class="container" data-v-e32ad3fb><div class="aside" data-v-e32ad3fb><div class="aside-curtain" data-v-e32ad3fb></div><div class="aside-container" data-v-e32ad3fb><div class="aside-content" data-v-e32ad3fb><div class="VPDocAside" data-v-e32ad3fb data-v-1b364ca7><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" data-v-1b364ca7 data-v-ac019323><div class="content" data-v-ac019323><div class="outline-marker" data-v-ac019323></div><div class="outline-title" data-v-ac019323>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-ac019323><span class="visually-hidden" id="doc-outline-aria-label" data-v-ac019323> Table of Contents for current page </span><ul class="root" data-v-ac019323 data-v-e23b97f7><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-1b364ca7></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-e32ad3fb><div class="content-container" data-v-e32ad3fb><!--[--><!--]--><main class="main" data-v-e32ad3fb><div style="position:relative;" class="vp-doc _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" data-v-e32ad3fb><div><h1 id="一文读懂函数中this指向问题" tabindex="-1">一文读懂函数中this指向问题 <a class="header-anchor" href="#一文读懂函数中this指向问题" aria-hidden="true">#</a></h1><h2 id="函数中this指向" tabindex="-1">函数中this指向 <a class="header-anchor" href="#函数中this指向" aria-hidden="true">#</a></h2><p>函数在调用时, Javascript会默认为this绑定一个值</p><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">// 定义一个函数</span></span>
<span class="line"><span style="color:#A6ACCD;">function foo() {</span></span>
<span class="line"><span style="color:#A6ACCD;">  console.log(this)</span></span>
<span class="line"><span style="color:#A6ACCD;">}</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">// 1. 直接调用</span></span>
<span class="line"><span style="color:#A6ACCD;">foo() // Window</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">// 2. 绑定对象调用</span></span>
<span class="line"><span style="color:#A6ACCD;">const obj = { name: &#39;ziu&#39;, aaa: foo }</span></span>
<span class="line"><span style="color:#A6ACCD;">obj.aaa() // obj</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">// 3. 通过call/apply调用</span></span>
<span class="line"><span style="color:#A6ACCD;">foo.call(&#39;Ziu&#39;) // String {&#39;Ziu&#39;}</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><p>this的绑定:</p><ul><li>和定义的位置没有关系</li><li>和调用方式/调用位置有关系</li><li>是在运行时被绑定的</li></ul><p><strong>this始终指向最后调用它的对象</strong></p><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">function foo() {</span></span>
<span class="line"><span style="color:#A6ACCD;">  console.log(this)</span></span>
<span class="line"><span style="color:#A6ACCD;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">foo() // Window</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">const obj = {</span></span>
<span class="line"><span style="color:#A6ACCD;">  name: &#39;ziu&#39;,</span></span>
<span class="line"><span style="color:#A6ACCD;">  bar: function () {</span></span>
<span class="line"><span style="color:#A6ACCD;">    console.log(this)</span></span>
<span class="line"><span style="color:#A6ACCD;"> }</span></span>
<span class="line"><span style="color:#A6ACCD;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">obj.bar() // obj</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">const baz = obj.bar</span></span>
<span class="line"><span style="color:#A6ACCD;">baz() // Window</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h2 id="如何改变this的指向" tabindex="-1">如何改变this的指向 <a class="header-anchor" href="#如何改变this的指向" aria-hidden="true">#</a></h2><h3 id="new-实例化一个函数" tabindex="-1">new 实例化一个函数 <a class="header-anchor" href="#new-实例化一个函数" aria-hidden="true">#</a></h3><blockquote><p>new一个对象时发生了什么:</p><ol start="0"><li>创建一个空对象</li><li>这个空对象会被执行prototype连接</li><li>将this指向这个空对象</li><li>执行函数体中的代码</li><li>没有显式返回这个对象时 会默认返回这个对象</li></ol></blockquote><p>函数可以作为一个构造函数, 作为一个类, 可以通过new关键字将其实例化</p><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">function foo() {</span></span>
<span class="line"><span style="color:#A6ACCD;">  console.log(this)</span></span>
<span class="line"><span style="color:#A6ACCD;">  this.name = &#39;Ziu&#39;</span></span>
<span class="line"><span style="color:#A6ACCD;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">foo() // 直接调用的话 this为Window</span></span>
<span class="line"><span style="color:#A6ACCD;">​</span></span>
<span class="line"><span style="color:#A6ACCD;">new foo() // 通过new关键字调用 则this指向空对象</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="使用-call-apply-bind" tabindex="-1">使用 call apply bind <a class="header-anchor" href="#使用-call-apply-bind" aria-hidden="true">#</a></h3><p>在 JavaScript 中, 函数是对象。</p><p>JavaScript 函数有它的属性和方法。call() 和 apply() 是预定义的函数方法。</p><p>两个方法可用于调用函数，两个方法的第一个参数必须是对象本身</p><hr><p>要将<code>foo</code>函数中的<code>this</code>指向<code>obj</code>，可以通过赋值的方式：</p><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">obj.foo = foo // 绑定</span></span>
<span class="line"><span style="color:#A6ACCD;">obj.foo() // 调用</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>但是也可以通过对函数调用call / apply实现</p><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">var obj = {</span></span>
<span class="line"><span style="color:#A6ACCD;">  name: &#39;Ziu&#39;</span></span>
<span class="line"><span style="color:#A6ACCD;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">​</span></span>
<span class="line"><span style="color:#A6ACCD;">function foo() {</span></span>
<span class="line"><span style="color:#A6ACCD;">  console.log(this)</span></span>
<span class="line"><span style="color:#A6ACCD;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">​</span></span>
<span class="line"><span style="color:#A6ACCD;">foo.call(obj) // 将foo执行时的this显式绑定到了obj上 并调用foo</span></span>
<span class="line"><span style="color:#A6ACCD;">foo.call(123) // foo的this被绑定到了 Number { 123 } 上</span></span>
<span class="line"><span style="color:#A6ACCD;">foo.call(&quot;ziu&quot;) // 绑定到了 String { &quot;ziu&quot; } 上</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h4 id="包装类对象" tabindex="-1">包装类对象 <a class="header-anchor" href="#包装类对象" aria-hidden="true">#</a></h4><p>当我们直接使用类似：</p><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">&quot;ZiuChen&quot;.length // String.length</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>的语句时，<code>JS</code>会为字符串 <code>ZiuChen</code> 包装一个对象，随后在这个对象上调用 <code>.length</code> 属性</p><h4 id="call和apply的区别" tabindex="-1">call和apply的区别 <a class="header-anchor" href="#call和apply的区别" aria-hidden="true">#</a></h4><ul><li><p>相同点：第一个参数都是相同的，要求传入一个对象</p><ul><li>在函数调用时，会将this绑定到这个传入的对象上</li></ul></li><li><p>不同点：后面的参数</p><ul><li>apply 传入的是一个数组</li><li>call 传入的是参数列表</li></ul></li></ul><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">function foo(name, age, height) {</span></span>
<span class="line"><span style="color:#A6ACCD;">  console.log(this)</span></span>
<span class="line"><span style="color:#A6ACCD;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">​</span></span>
<span class="line"><span style="color:#A6ACCD;">foo(&#39;Ziu&#39;, 18, 1.88)</span></span>
<span class="line"><span style="color:#A6ACCD;">​</span></span>
<span class="line"><span style="color:#A6ACCD;">foo.apply(&#39;targetThis&#39;, &#39;Ziu&#39;, 18, 1.88)</span></span>
<span class="line"><span style="color:#A6ACCD;">​</span></span>
<span class="line"><span style="color:#A6ACCD;">foo.call(&#39;targetThis&#39;, [&#39;Ziu&#39;, 18, 1.88])</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>当我们需要给一个带参数的函数通过call/apply的方式绑定this时，就需要使用到call/apply的第二个入参了。</p><h4 id="参数列表" tabindex="-1">参数列表 <a class="header-anchor" href="#参数列表" aria-hidden="true">#</a></h4><p>当传入函数的参数有多个时，可以通过<code>...args</code>将参数合并到一个数组中去</p><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">function foo(...args) {</span></span>
<span class="line"><span style="color:#A6ACCD;">  console.log(args)</span></span>
<span class="line"><span style="color:#A6ACCD;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">​</span></span>
<span class="line"><span style="color:#A6ACCD;">foo(&quot;Ziu&quot;, 18, 1.88) // [&quot;Ziu&quot;, 18, 1.88]</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h4 id="bind绑定" tabindex="-1">bind绑定 <a class="header-anchor" href="#bind绑定" aria-hidden="true">#</a></h4><p>如果我们希望：在每次调用<code>foo</code>时，都能将<code>obj</code>绑定到<code>foo</code>的<code>this</code>上，那么就需要用到<code>bind</code></p><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">// 将obj绑定到foo上</span></span>
<span class="line"><span style="color:#A6ACCD;">const fun = foo.bind(obj)</span></span>
<span class="line"><span style="color:#A6ACCD;">// 在后续每次调用foo时, foo内的this都将指向obj</span></span>
<span class="line"><span style="color:#A6ACCD;">fun() // obj</span></span>
<span class="line"><span style="color:#A6ACCD;">fun() // obj</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p><code>bind()</code>方法将创建一个新的函数，当被调用时，将其<code>this</code>关键字</p><h2 id="箭头函数" tabindex="-1">箭头函数 <a class="header-anchor" href="#箭头函数" aria-hidden="true">#</a></h2><p>箭头函数是<code>ES6</code>新增的编写函数的方式，更简洁。</p><ul><li>箭头函数不会绑定<code>this</code>、<code>argument</code>属性</li><li>箭头函数不能作为构造函数来使用（不能与<code>new</code>同用，会报错）</li></ul><h3 id="箭头函数中的this" tabindex="-1">箭头函数中的this <a class="header-anchor" href="#箭头函数中的this" aria-hidden="true">#</a></h3><p>在箭头函数中是没有<code>this</code>的：</p><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">const foo = () =&gt; {</span></span>
<span class="line"><span style="color:#A6ACCD;">  console.log(this)</span></span>
<span class="line"><span style="color:#A6ACCD;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">foo() // window</span></span>
<span class="line"><span style="color:#A6ACCD;">console.log(this) // window</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>之所以找到了<code>Window</code>对象，是因为在调用<code>foo()</code>时，函数内部作用域并没有找到<code>this</code>，转而向上层作用域找<code>this</code></p><p>因此找到了顶层的全局<code>this</code>，也即<code>Window</code>对象</p><h3 id="箭头函数中this的查找规则" tabindex="-1">箭头函数中this的查找规则 <a class="header-anchor" href="#箭头函数中this的查找规则" aria-hidden="true">#</a></h3><p>检查以下代码：</p><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">const obj = {</span></span>
<span class="line"><span style="color:#A6ACCD;">  name: &quot;obj&quot;,</span></span>
<span class="line"><span style="color:#A6ACCD;">  foo: function () {</span></span>
<span class="line"><span style="color:#A6ACCD;">    const bar = () =&gt; {</span></span>
<span class="line"><span style="color:#A6ACCD;">      console.log(this)</span></span>
<span class="line"><span style="color:#A6ACCD;">   }</span></span>
<span class="line"><span style="color:#A6ACCD;">    return bar</span></span>
<span class="line"><span style="color:#A6ACCD;"> }</span></span>
<span class="line"><span style="color:#A6ACCD;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">const fn = obj.foo()</span></span>
<span class="line"><span style="color:#A6ACCD;">fn() // obj</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p>代码执行完毕，控制台输出<code>this</code>值为<code>obj</code>对象，这是为什么？</p><p>箭头函数中没有<code>this</code>，故会向上层作用域寻找<code>this</code>，<code>bar</code>的上层作用域为函数<code>foo</code>，而函数<code>foo</code>的<code>this</code>由其调用决定</p><p>调用<code>foo</code>函数的为<code>obj</code>对象，故内部箭头函数中的<code>this</code>指向的是<code>obj</code></p><p>检查以下代码：</p><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">const obj = {</span></span>
<span class="line"><span style="color:#A6ACCD;">  name: &quot;obj&quot;,</span></span>
<span class="line"><span style="color:#A6ACCD;">  foo: () =&gt; {</span></span>
<span class="line"><span style="color:#A6ACCD;">    const bar = () =&gt; {</span></span>
<span class="line"><span style="color:#A6ACCD;">      console.log(this)</span></span>
<span class="line"><span style="color:#A6ACCD;">   }</span></span>
<span class="line"><span style="color:#A6ACCD;">    return bar</span></span>
<span class="line"><span style="color:#A6ACCD;"> }</span></span>
<span class="line"><span style="color:#A6ACCD;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">const fn = obj.foo()</span></span>
<span class="line"><span style="color:#A6ACCD;">fn() // Window</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p>和上面的代码不同之处在于：<code>foo</code>也是由箭头函数定义的，<code>bar</code>向上找不到<code>foo</code>的<code>this</code>，故而继续向上，找到了全局<code>this</code>，也即<code>Window</code>对象</p><h3 id="严格模式" tabindex="-1">严格模式 <a class="header-anchor" href="#严格模式" aria-hidden="true">#</a></h3><ul><li>在严格模式下，全局的<code>this</code>不是<code>Window</code>对象，而是<code>undefined</code>。</li><li>在 JavaScript 严格模式(strict mode)下, 在调用函数时第一个参数会成为 this 的值， 即使该参数不是一个对象。</li><li>在 JavaScript 非严格模式(non-strict mode)下, 如果第一个参数的值是 null 或 undefined, 它将使用全局对象替代。</li></ul><h2 id="this面试题" tabindex="-1">this面试题 <a class="header-anchor" href="#this面试题" aria-hidden="true">#</a></h2><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">var name = &#39;window&#39;</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">var person = {</span></span>
<span class="line"><span style="color:#A6ACCD;">  name: &#39;person&#39;,</span></span>
<span class="line"><span style="color:#A6ACCD;">  sayName: function () {</span></span>
<span class="line"><span style="color:#A6ACCD;">    console.log(this.name)</span></span>
<span class="line"><span style="color:#A6ACCD;"> }</span></span>
<span class="line"><span style="color:#A6ACCD;">}</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">function sayName() {</span></span>
<span class="line"><span style="color:#A6ACCD;">  var sss = person.sayName</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">  sss() // 默认绑定: window</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">  person.sayName();  // 隐式绑定: person</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;"> (person.sayName)() // 隐式绑定: person, 本质与上一行代码相同</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;"> ;(person.sayName = person.sayName)() // 间接调用: window</span></span>
<span class="line"><span style="color:#A6ACCD;">}</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">sayName()</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">var name = &#39;window&#39;</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">var person1 = {</span></span>
<span class="line"><span style="color:#A6ACCD;">  name: &#39;person1&#39;,</span></span>
<span class="line"><span style="color:#A6ACCD;">  foo1: function () {</span></span>
<span class="line"><span style="color:#A6ACCD;">    console.log(this.name)</span></span>
<span class="line"><span style="color:#A6ACCD;"> },</span></span>
<span class="line"><span style="color:#A6ACCD;">  foo2: () =&gt; console.log(this.name),</span></span>
<span class="line"><span style="color:#A6ACCD;">  foo3: function () {</span></span>
<span class="line"><span style="color:#A6ACCD;">    return function () {</span></span>
<span class="line"><span style="color:#A6ACCD;">      console.log(this.name)</span></span>
<span class="line"><span style="color:#A6ACCD;">   }</span></span>
<span class="line"><span style="color:#A6ACCD;"> },</span></span>
<span class="line"><span style="color:#A6ACCD;">  foo4: function () {</span></span>
<span class="line"><span style="color:#A6ACCD;">    return () =&gt; console.log(this.name)</span></span>
<span class="line"><span style="color:#A6ACCD;"> }</span></span>
<span class="line"><span style="color:#A6ACCD;">}</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">var person2 = {</span></span>
<span class="line"><span style="color:#A6ACCD;">  name: &#39;person2&#39;</span></span>
<span class="line"><span style="color:#A6ACCD;">}</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">person1.foo1() // 隐式绑定: person1</span></span>
<span class="line"><span style="color:#A6ACCD;">person1.foo1.call(person2) // 显式绑定: person2</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">person1.foo2() // 上层作用域: window</span></span>
<span class="line"><span style="color:#A6ACCD;">person1.foo2.call(person2) // 上层作用域: window</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">person1.foo3()() // 默认绑定: window</span></span>
<span class="line"><span style="color:#A6ACCD;">person1.foo3.call(person2)() // 默认绑定: window</span></span>
<span class="line"><span style="color:#A6ACCD;">person1.foo3().call(person2) // 显式绑定: person2</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">person1.foo4()() // 隐式绑定: person1</span></span>
<span class="line"><span style="color:#A6ACCD;">person1.foo4.call(person2)() // 显式绑定: person2</span></span>
<span class="line"><span style="color:#A6ACCD;">person1.foo4().call(person2) // 隐式绑定: person1</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br></div></div></div></div></main><!--[--><!--]--><footer class="VPDocFooter" data-v-e32ad3fb data-v-26128c3c><div class="edit-info" data-v-26128c3c><div class="edit-link" data-v-26128c3c><a class="VPLink link edit-link-button" href="https://github.com/ZiuChen/ZiuChen.github.io/edit/main/docs/article/一文读懂函数中this指向问题.md" target="_blank" rel="noreferrer" data-v-26128c3c data-v-857b9044><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" data-v-26128c3c><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-26128c3c><p class="VPLastUpdated" data-v-26128c3c data-v-a6a422eb>Updated Date: <time datetime="2023-02-11T04:52:34.000Z" data-v-a6a422eb></time></p></div></div><div class="prev-next" data-v-26128c3c><div class="pager" data-v-26128c3c><a class="pager-link prev" 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-26128c3c><span class="desc" data-v-26128c3c>Previous page</span><span class="title" data-v-26128c3c>一文读懂伪类与伪元素</span></a></div><div class="has-prev pager" data-v-26128c3c><a class="pager-link next" 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-26128c3c><span class="desc" data-v-26128c3c>Next page</span><span class="title" data-v-26128c3c>从0实现一个年度报告</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-23299678 data-v-bfc7af0b><div class="container" data-v-bfc7af0b><p class="message" data-v-bfc7af0b>Released under the MIT License.</p><p class="copyright" data-v-bfc7af0b>Copyright © 2019-present Ziu Chen</p></div></footer><!--[--><!--]--></div></div>
<script>__VP_HASH_MAP__ = JSON.parse("{\"article_一文读懂伪类与伪元素.md\":\"d87febc5\",\"article_从0实现一个年度报告.md\":\"822c67fc\",\"article_一文读懂函数中this指向问题.md\":\"e6d6ad8a\",\"article_深入理解浏览器缓存机制.md\":\"03b91a53\",\"article_深入理解浏览器运行原理.md\":\"b3f5f741\",\"index.md\":\"53ad158c\",\"article_【2023】青训营 - 前端练习题汇总解析.md\":\"349357d5\",\"article_一文读懂事件冒泡与事件捕获.md\":\"79af3ad0\",\"article_深入vue3源码，看看vue.use后究竟发生了什么？.md\":\"a06e08aa\",\"article_彻底搞懂对象的数据属性描述符、存储属性描述符.md\":\"b5da8518\",\"article_深入理解proxy与reflect.md\":\"7437908a\",\"note_javascript.md\":\"5a5f6c4a\",\"note_front-end engineering.md\":\"22ad919e\",\"note_css.md\":\"3b8533bc\",\"self_index.md\":\"e7799ff9\",\"project_clipboardmanager_guide_index.md\":\"d79db456\",\"project_clipboardmanager_log_index.md\":\"a816cbe7\",\"project_clipboardmanager_vip_index.md\":\"85f6e152\",\"project_smartwordbreak_index.md\":\"838eb3ab\",\"project_smartwordbreak_statement_index.md\":\"84fbd8d4\",\"project_smartwordbreak_log_index.md\":\"0a1e51f1\",\"project_clipboardmanager_index.md\":\"ae86f8f0\",\"project_clipboardmanager_statement_index.md\":\"0bd894c3\",\"works_opensource.md\":\"cf3366af\",\"works_contribution.md\":\"b545933b\",\"note_javascriptenhanced.md\":\"15a0da13\"}")</script>
<script type="module" async src="/assets/app.94d5b31a.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink