Document

检测内存变化

\n \n \n\n\n\n```\n\n页面上有一个按钮用来开始函数调用，方便我们控制。点击按钮，每个200毫秒执行一次bind函数，即在全局监听click事件，循环次数为50次。\n\n在无法确定是否发生内存泄漏时，我们可以先使用Performance来录制一段页面加载的性能变化，先判断是否有内存泄漏发生。\n\n### Performance\n\n本次案例仅以Chrome浏览器展开描述，其他浏览器可能会有些许差异。首先我们鼠标右键选择检查或者直接F12进入DevTools页面，面板上选择`Performance`，选择后应该是如下页面：\n\n在开始之前，我们先点击一下`Collect garbage`和`clear`来保证内存干净，没有其他遗留内存的干扰。然后我们点击`Record`来开始录制，并且同时我们也要点击页面上的`开始`按钮，让我们的代码跑起来。等到代码结束后，我们再点击`Record`按钮以停止录制，录制的时间跟代码执行的时间相比会有出入，只要保证代码是完全执行完毕的即可。停止录制后，我们会得到如下的结果：\n\n`Performance`的内容很多，我们只需要关注内存的变化，由此图可见，内存这块区域的曲线是在一直升高的并且到达顶点后并没有回落，这就有可能发生了内存泄漏。因为正常的内存变化曲线应该是类似于“锯齿”，也就是有上有下，正常增长后会有一定的回落，但不一定回落到和初始值一样。而且我们还可以隐约看到程序运行结束后，内存从初始的6.2MB增加到了差不多351MB，这个数量级的增加还是挺明显的。我们只是执行了50次循环，如果执行的次数更多，将会耗尽浏览器的内存空间，导致页面卡死。\n\n虽然是有内存泄漏，但是如果我们想进一步看内存泄漏发生的地方，那么`Performance`就不够用了，这个时候我们就需要使用`Memory`面板。\n\n### Memory\n\nDevTools的Memory选项主要是用来录制堆内存的快照，为的是进一步分析内存泄漏的详细信息。有人可能会说，为啥不一开始就直接使用`Memory`呢，反而是先使用`Performance`。因为我们刚开始就说了，内存增长不表示就一定出现了内存泄漏，有可能是正常的增长，直接使用Memory来分析可能得不到正确的结果。\n\n我们先来看一下怎么使用`Memory`：\n\n首先选择`Memory`选项，然后清除缓存，在配置选项中选择堆内存快照。内存快照每次点击录制按钮都会记录当前的内存使用情况，我们可以在程序开始前点击一下记录初始的内存使用，代码结束后再点一下记录最终的内存使用，中间可以点击也可以不点击。最后在快照列表中至少可以得到两个内存记录：\n\n初始内存我们暂时不深究，我们选择列表的最后一条记录，然后在筛选下拉框选择最后一个，即第一个快照和第二个快照的差异。\n\n\n这里我们重点说一下`Shallow Size`和`Retained Size`的区别：\n\n* Shallow Size：对象自身占用的内存大小，一般来说字符串、数组的Shallow Size都会比较大\n* Retained Size：这个是对象自身占用的内存加上无法被GC释放的内存的大小，如果Retained Size和Shallow Size相差不大，基本上可以判定没有发生内存泄漏，但是**如果相差很大**，例如上图的`Object`，这就表明发生了内存泄漏。\n\n我们再来细看一下`Object`，任意展开一个对象，可以在树结构中发现每一个对象都有一个全局事件绑定，并且占用了较大的内存空间。解决本案例涉及的内存泄漏也比较简单，就是及时释放绑定的全局事件。\n\n关于`Performance`和`Memory`的详细使用可以参考：[手把手教你排查Javascript内存泄漏](https://link.juejin.cn?target=https%3A%2F%2Fzhuanlan.zhihu.com%2Fp%2F322356761 \"https://zhuanlan.zhihu.com/p/322356761\")\n",{"_54":841,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/155/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/155/timeline",{"_54":844,"_56":57,"_58":845,"_60":846,"_62":847,"_64":848,"_66":849,"_68":850,"_70":851,"_72":852,"_74":853,"_107":854,"_127":128,"_129":26,"_130":-5,"_131":857,"_133":858,"_155":148,"_149":860,"_151":861,"_154":-5,"_158":159,"_160":862,"_165":-5,"_166":863,"_168":864,"_180":866,"_182":-5,"_183":-5,"_184":140},"https://api.github.com/repos/pro-collection/interview-question/issues/154","https://api.github.com/repos/pro-collection/interview-question/issues/154/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/154/comments","https://api.github.com/repos/pro-collection/interview-question/issues/154/events","https://github.com/pro-collection/interview-question/issues/154",1640787490,"I_kwDOJGDC6c5hzG4i",154,"常见的前端内存泄露场景有哪些？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[855,856],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":827,"_68":828,"_54":829,"_113":830,"_115":831,"_117":26,"_118":832},[],{"_54":208,"_64":209,"_58":210,"_66":211,"_68":212,"_70":213,"_72":214,"_118":215,"_143":859,"_145":217,"_147":148,"_127":128,"_149":218,"_151":219,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-26T06:15:29Z","2023-03-26T06:15:30Z",{"_162":148,"_163":148,"_164":148},"大多数情况下，垃圾回收器会帮我们及时释放内存，一般不会发生内存泄漏。但是有些场景是内存泄漏的高发区，我们在使用的时候一定要注意：\n\n* 我们在开发的时候经常会使用`console`在控制台打印信息，但这也会带来一个问题：被`console`使用的对象是不能被垃圾回收的，这就可能会导致内存泄漏。因此在生产环境中不建议使用`console.log()`的理由就又可以加上一条避免内存泄漏了。\n\n* 被全局变量、全局函数引用的对象，在Vue组件销毁时未清除，可能会导致内存泄漏\n\n ```js\n // Vue3\n \n \n ```\n\n* 定时器未及时在Vue组件销毁时清除，可能会导致内存泄漏\n\n ```js\n // Vue3\n \n \n ```\n\n `setTimeout`和`setInterval`两个定时器在使用时都应该注意是否需要清理定时器，特别是`setInterval`，一定要注意清除。\n\n* 绑定的事件未及时在Vue组件销毁时清除，可能会导致内存泄漏\n\n 绑定事件在实际开发中经常遇到，我们一般使用`addEventListener`来创建。\n\n ```js\n // Vue3\n \n \n ```\n\n* 被自定义事件引用，在Vue组件销毁时未清除，可能会导致内存泄漏\n\n 自定义事件通过`emit/on`来发起和监听，清除自定义事件和绑定事件差不多，不同的是需要调用`off`方法\n\n ```js\n // Vue3\n \n \n ```\n\n除了及时清除监听器、事件等，对于全局变量的引用，我们可以选择`WeakMap`、`WeakSet`等弱引用数据类型。这样的话，即使我们引用的对象数据要被垃圾回收，弱引用的全局变量并不会阻止GC。\n",{"_54":865,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/154/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/154/timeline",{"_54":868,"_56":57,"_58":869,"_60":870,"_62":871,"_64":872,"_66":873,"_68":874,"_70":875,"_72":876,"_74":877,"_107":878,"_127":128,"_129":26,"_130":-5,"_131":880,"_133":881,"_155":140,"_149":883,"_151":884,"_154":-5,"_158":159,"_160":885,"_165":-5,"_166":886,"_168":887,"_180":889,"_182":-5,"_183":-5,"_184":140},"https://api.github.com/repos/pro-collection/interview-question/issues/142","https://api.github.com/repos/pro-collection/interview-question/issues/142/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/142/comments","https://api.github.com/repos/pro-collection/interview-question/issues/142/events","https://github.com/pro-collection/interview-question/issues/142",1637802180,"I_kwDOJGDC6c5hnuDE",142,"事件循环原理?",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[879],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":208,"_64":209,"_58":210,"_66":211,"_68":212,"_70":213,"_72":214,"_118":215,"_143":882,"_145":217,"_147":148,"_127":128,"_149":218,"_151":219,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-23T15:48:30Z","2023-03-23T15:50:30Z",{"_162":148,"_163":148,"_164":148},"通过一道题进入浏览器事件循环原理：\r\n\r\n```arcade\r\nconsole.log('script start')\r\nsetTimeout(function () {\r\n console.log('setTimeout')\r\n}, 0);\r\nPromise.resolve().then(function () {\r\n console.log('promise1')\r\n}).then(function () {\r\n console.log('promise2')\r\n})\r\nconsole.log('script end')\r\n```\r\n\r\n可以先试一下，手写出执行结果，然后看完这篇文章以后，在运行一下这段代码，看结果和预期是否一样\r\n\r\n### 单线程\r\n\r\n#### 定义\r\n\r\n单线程意味着所有的任务需要排队，前一个任务结束，才能够执行后一个任务。如果前一个任务耗时很长，后面一个任务不得不一直等着。\r\n\r\n#### 原因\r\n\r\n`javascript`的单线程，与它的用途有关。作为浏览器脚本语言，`javascript`的主要用途是与用户互动，以及操作`DOM`。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定`javascript`同时有两个线程，一个在添加`DOM`节点，另外一个是删除`DOM`节点，那浏览器应该应该以哪个为准，如果在增加一个线程进行管理多个线程，虽然解决了问题，但是增加了复杂度，为什么不使用单线程呢，执行有个先后顺序，某个时间只执行单个事件。 \r\n为了利用多核`CPU`的计算能力，`HTML5`提出`Web Worker`标准，运行`javascript`创建多个线程，但是子线程完全受主线程控制，且不得操作`DOM`。所以，这个标准并没有改变`javascript`单线程的本质\r\n\r\n### 浏览器中的`Event Loop`\r\n\r\n事件循环这个名字来源于它往往这么实现:\r\n\r\n```cpp\r\nwhile(queue.waitForMessage()) {\r\n queue.processNextMessage();\r\n}\r\n```\r\n\r\n这个模型的优势在于它必须处理完一个消息(run to completion),才会处理下一个消息,使程序可追溯性更强。不像C语言可能随时从一个线程切换到另一个线程。但是缺点也在于此,若同步代码阻塞则会影响用户交互\r\n\r\n#### `macroTask`和`microTask`\r\n\r\n宏队列，`macroTask`也叫`tasks`。包含同步任务，和一些异步任务的回调会依次进入`macro task queue`中，`macroTask`包含:\r\n\r\n* script代码块\r\n* setTimeout\r\n* requestAnimationFrame\r\n* I/O\r\n* UI rendering\r\n\r\n微队列, `microtask`，也叫`jobs`。另外一些异步任务的回调会依次进入`micro task queue`，等待后续被调用，这些异步任务包含:\r\n\r\n* Promise.then\r\n* MutationObserver\r\n\r\n下面是`Event Loop`的示意图\r\n\r\n![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/10/24/16dfca86d30dc6d0~tplv-t2oaga2asx-zoom-in-crop-mark:3024:0:0:0.awebp)\r\n一段`javascript`执行的具体流程就是如下：\r\n1. 首先执行宏队列中取出第一个，一段`script`就是相当于一个`macrotask`,所以他先会执行同步代码，当遇到例如`setTimeout`的时候，就会把这个异步任务推送到宏队列队尾中。\r\n2. 当前`macrotask`执行完成以后，就会从微队列中取出位于头部的异步任务进行执行，然后微队列中任务的长度减一。\r\n3. 然后继续从微队列中取出任务，直到整个队列中没有任务。如果在执行微队列任务的过程中，又产生了`microtask`，那么会加入整个队列的队尾，也会在当前的周期中执行\r\n4. 当微队列的任务为空了，那么就需要执行下一个`macrotask`，执行完成以后再执行微队列，以此反复。 \r\n 总结下来就是不断从`task`队列中按顺序取`task`执行，每执行完一个`task`都会检查`microtask`是否为空，不让过不为空就执行队列中的所有`microtask`。然后在取下一个`task`以此循环\r\n\r\n#### 调用栈和任务队列\r\n\r\n调用栈是一个栈结构，函数调用会形成一个栈帧。栈帧：调用栈中每个实体被称为栈帧，帧中包含了当前执行函数的参数和局部变量等上下文信息，函数执行完成后，它的执行上下文会从栈中弹出。下面是调用栈和任务队列的关系:\r\n\r\n![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/10/25/16e01c44735fee30~tplv-t2oaga2asx-zoom-in-crop-mark:3024:0:0:0.awebp)\r\n分析文章开头的题目，可以通过在题目前面添加`debugger`，结合`chrome`的`call stack`进行分析:\r\n\r\n![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/10/25/16e01cbeaa6b1c05~tplv-t2oaga2asx-zoom-in-crop-mark:3024:0:0:0.awebp)\r\n(这里不知道怎么画动图，在晚上找的一张图，小伙伴们有好的工具，求分享); 下面借助三个数组来分析一下这段代码的执行流程，`call stack`表示调用栈，`macroTasks`表示宏队列，`microTasks`表示微队列：\r\n1. 首先代码执行之前都是三个队列都是空的:\r\n\r\n```apache\r\ncallStack: []\r\nmacroTasks: [main]\r\nmicroTasks: []\r\n```\r\n\r\n在前面提到，整个代码块就相当于一个`macroTask`，所以首先向`callStack`中压入`main()`，`main`相当于整个代码块 \r\n2. 执行`main`，输出同步代码结果:\r\n\r\n```apache\r\ncallStack: [main]\r\nmacroTasks: []\r\nmicroTasks: []\r\n```\r\n\r\n在遇到`setTimeout`和`promise`的时候会向`macroTasks`与`microTasks`中分别推入 \r\n3. 此时的三个队列分别是:\r\n\r\n```apache\r\ncallStack: [main]\r\nmacroTasks: [setTimeout]\r\nmicroTasks: [promise]\r\n```\r\n\r\n当这段代码执行完成以后，会输出:\r\n\r\n```applescript\r\nscript start\r\nscript end\r\n```\r\n\r\n4. 当`main`执行完成以后，会取`microTasks`中的任务，放入`callStack`中，此时的三个队列为:\r\n\r\n```apache\r\ncallStack: [promise]\r\nmacroTasks: [setTimeout]\r\nmicroTask: []\r\n```\r\n\r\n当这个`promise`执行完成后会输出\r\n\r\n```\r\npromise1\r\n```\r\n\r\n后面又有一个`then`，在前面提到如果还有`microtask`就在微队列队尾中加入这个任务，并且在当前`tick`执行。所以紧接着输出`promise2` \r\n5. 当前的`tick`也就完成了，最后在从`macroTasks`取出`task`，此时三个队列的状态如下：\r\n\r\n```apache\r\ncallStack: [setTimeout]\r\nmacroTasks: []\r\nmicroTask: []\r\n```\r\n\r\n最后输出的结果就是`setTimeout`。 \r\n所谓的事件循环就是从两个队列中不断取出事件，然后执行，反复循环就是事件循环。经过上面的示例，理解起来是不是比较简单\r\n\r\n",{"_54":888,"_171":140,"_172":140,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/142/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/142/timeline",{"_54":891,"_56":57,"_58":892,"_60":893,"_62":894,"_64":895,"_66":896,"_68":897,"_70":898,"_72":899,"_74":900,"_107":901,"_127":128,"_129":26,"_130":-5,"_131":903,"_133":904,"_155":148,"_149":906,"_151":907,"_154":-5,"_158":159,"_160":908,"_165":-5,"_166":909,"_168":910,"_180":912,"_182":-5,"_183":-5,"_184":140},"https://api.github.com/repos/pro-collection/interview-question/issues/127","https://api.github.com/repos/pro-collection/interview-question/issues/127/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/127/comments","https://api.github.com/repos/pro-collection/interview-question/issues/127/events","https://github.com/pro-collection/interview-question/issues/127",1630945649,"I_kwDOJGDC6c5hNkFx",127,"如何实现可过期的 localstorage 数据?",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[902],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":208,"_64":209,"_58":210,"_66":211,"_68":212,"_70":213,"_72":214,"_118":215,"_143":905,"_145":217,"_147":148,"_127":128,"_149":218,"_151":219,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-19T13:36:22Z","2024-10-26T08:28:47Z",{"_162":148,"_163":148,"_164":148},"以下是一个封装了支持过期时间的`localStorage`的示例代码：\r\n\r\n```javascript\r\nclass EnhancedLocalStorage {\r\n constructor() {\r\n this.prefix = 'enhanced_storage_';\r\n }\r\n\r\n setItem(key, value, expirationInSeconds) {\r\n const item = {\r\n value,\r\n expirationTime: expirationInSeconds? Date.now() + expirationInSeconds * 1000 : null\r\n };\r\n localStorage.setItem(this.prefix + key, JSON.stringify(item));\r\n }\r\n\r\n getItem(key) {\r\n const itemStr = localStorage.getItem(this.prefix + key);\r\n if (!itemStr) return null;\r\n const item = JSON.parse(itemStr);\r\n if (item.expirationTime && item.expirationTime < Date.now()) {\r\n localStorage.removeItem(this.prefix + key);\r\n return null;\r\n }\r\n return item.value;\r\n }\r\n\r\n removeItem(key) {\r\n localStorage.removeItem(this.prefix + key);\r\n }\r\n}\r\n\r\nconst enhancedStorage = new EnhancedLocalStorage();\r\nexport default enhancedStorage;\r\n```\r\n\r\n使用方法如下：\r\n\r\n```javascript\r\n// 设置带有过期时间的存储项\r\nenhancedStorage.setItem('myKey', 'myValue', 60); // 60 秒后过期\r\n\r\n// 获取存储项\r\nconst value = enhancedStorage.getItem('myKey');\r\nconsole.log(value);\r\n\r\n// 一段时间后，存储项过期\r\nsetTimeout(() => {\r\n const expiredValue = enhancedStorage.getItem('myKey');\r\n console.log(expiredValue); // null\r\n}, 65000);\r\n```\r\n\r\n在这个封装中，使用了一个自定义的前缀来避免与普通的`localStorage`键冲突。设置项时，会记录一个过期时间，如果有过期时间且当前时间超过了过期时间，在获取项时会返回`null`并自动删除该项。",{"_54":911,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/127/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/127/timeline",{"_54":914,"_56":57,"_58":915,"_60":916,"_62":917,"_64":918,"_66":919,"_68":920,"_70":921,"_72":922,"_74":923,"_107":924,"_127":128,"_129":26,"_130":-5,"_131":926,"_133":927,"_155":148,"_149":929,"_151":930,"_154":-5,"_158":159,"_160":931,"_165":-5,"_166":932,"_168":933,"_180":935,"_182":-5,"_183":-5,"_184":140},"https://api.github.com/repos/pro-collection/interview-question/issues/126","https://api.github.com/repos/pro-collection/interview-question/issues/126/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/126/comments","https://api.github.com/repos/pro-collection/interview-question/issues/126/events","https://github.com/pro-collection/interview-question/issues/126",1630945151,"I_kwDOJGDC6c5hNj9_",126,"es5 和 es6 使用 new 关键字实例化对象的流程是一样的吗？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[925],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":208,"_64":209,"_58":210,"_66":211,"_68":212,"_70":213,"_72":214,"_118":215,"_143":928,"_145":217,"_147":148,"_127":128,"_149":218,"_151":219,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-19T13:34:48Z","2023-03-19T13:34:49Z",{"_162":148,"_163":148,"_164":148},"ES5 和 ES6 使用 `new` 关键字实例化对象的流程基本上是一样的，只是在细节上存在一些差异。\n\n在 ES5 中，当使用 `new` 关键字调用一个函数时，会创建一个新的对象，并将这个新对象的 `[[Prototype]]` 属性指向构造函数的 `prototype` 属性。此外，`new` 关键字还会将构造函数内部的 `this` 关键字绑定到新创建的对象上，从而允许我们在构造函数内部添加属性和方法。\n\n在 ES6 中，这些基本的流程也是相同的。但是，ES6 引入了类（class）的概念，从而为面向对象编程提供了更加便利的语法。使用类定义一个对象时，需要使用 `constructor` 方法作为构造函数，而不是普通的函数。类定义的语法糖实际上是对函数的封装，使用 `new` 关键字创建类的实例时，实际上也是在调用类的 `constructor` 方法。\n\n在 ES6 中，可以使用类的继承来创建更复杂的对象。当使用 `new` 关键字创建一个继承自另一个类的类的实例时，会先调用父类的 `constructor` 方法，再调用子类的 `constructor` 方法，从而完成对象实例的创建过程。\n\n需要注意的是，虽然 ES6 的类看起来像是其他面向对象语言中的类，但在 JavaScript 中，类仍然是基于原型继承的。在创建一个类的实例时，实际上是在创建一个新对象，并将这个新对象的原型指向类的原型。因此，实例化对象的流程与使用普通函数或类定义的对象的流程基本上是相同的。",{"_54":934,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/126/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/126/timeline",{"_54":937,"_56":57,"_58":938,"_60":939,"_62":940,"_64":941,"_66":942,"_68":943,"_70":944,"_72":945,"_74":946,"_107":947,"_127":128,"_129":26,"_130":-5,"_131":949,"_133":950,"_155":148,"_149":952,"_151":952,"_154":-5,"_158":159,"_160":953,"_165":-5,"_166":954,"_168":955,"_180":957,"_182":-5,"_183":-5,"_184":140},"https://api.github.com/repos/pro-collection/interview-question/issues/125","https://api.github.com/repos/pro-collection/interview-question/issues/125/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/125/comments","https://api.github.com/repos/pro-collection/interview-question/issues/125/events","https://github.com/pro-collection/interview-question/issues/125",1630942806,"I_kwDOJGDC6c5hNjZW",125,"当使用 new 关键字创建对象时, 会经历哪些步骤？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[948],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":208,"_64":209,"_58":210,"_66":211,"_68":212,"_70":213,"_72":214,"_118":215,"_143":951,"_145":217,"_147":148,"_127":128,"_149":218,"_151":219,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-19T13:30:24Z",{"_162":148,"_163":148,"_164":148},"在 JavaScript 中，`new` 关键字用于创建一个对象实例。当使用 `new` 关键字创建对象时，会发生以下几个步骤：\n\n1. 创建一个空的对象。\n2. 将这个空对象的 `[[Prototype]]` 属性设置为构造函数的 `prototype` 属性。\n3. 将这个空对象赋值给构造函数内部的 `this` 关键字，用于初始化属性和方法。\n4. 如果构造函数返回一个对象，那么返回这个对象；否则，返回第一步创建的对象实例。\n\n以下是一个示例，演示如何使用 `new` 关键字创建一个对象实例：\n\n```javascript\nfunction Person(name, age) {\n this.name = name;\n this.age = age;\n}\n\nconst person = new Person(\"John\", 30);\nconsole.log(person.name); // \"John\"\nconsole.log(person.age); // 30\n```\n\n在上面的示例中，`new Person(\"John\", 30)` 会创建一个新的对象实例。在构造函数 `Person` 中，`this.name` 和 `this.age` 会被赋值为 `\"John\"` 和 `30`。最终，`new` 关键字会返回这个新的对象实例。\n\n需要注意的是，在 JavaScript 中，函数也是对象。因此，我们可以向对象一样定义属性和方法。当我们使用 `new` 关键字调用一个函数时，这个函数会被视为构造函数，从而创建一个新的对象实例。",{"_54":956,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/125/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/125/timeline",{"_54":959,"_56":57,"_58":960,"_60":961,"_62":962,"_64":963,"_66":964,"_68":965,"_70":966,"_72":967,"_74":968,"_107":969,"_127":128,"_129":26,"_130":-5,"_131":971,"_133":972,"_155":148,"_149":974,"_151":975,"_154":-5,"_158":159,"_160":976,"_165":-5,"_166":977,"_168":978,"_180":980,"_182":-5,"_183":-5,"_184":140},"https://api.github.com/repos/pro-collection/interview-question/issues/116","https://api.github.com/repos/pro-collection/interview-question/issues/116/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/116/comments","https://api.github.com/repos/pro-collection/interview-question/issues/116/events","https://github.com/pro-collection/interview-question/issues/116",1625735042,"I_kwDOJGDC6c5g5r-C",116,"React Diff算法是怎么实现的？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[970],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":727,"_64":728,"_58":729,"_66":730,"_68":731,"_70":732,"_72":733,"_118":734,"_143":973,"_145":736,"_147":148,"_127":128,"_149":737,"_151":738,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-15T15:19:56Z","2023-03-15T15:29:45Z",{"_162":148,"_163":148,"_164":148},"### 原理\r\nReact 中的 Diff 算法，是用于比较新旧两个虚拟 DOM 树，找出需要更新的节点并进行更新的算法。React 的 Diff 算法实现基于以下假设：\r\n\r\n1. 两个不同类型的元素会产生不同的树形结构。\r\n2. 对于同一层级的一组子节点，它们可以通过唯一 id 匹配到相同的节点。\r\n3. 每个组件都有一个唯一标识符 key。\r\n\r\n基于以上假设，React 的 Diff 算法分为两个阶段：\r\n\r\n1. `O(n)` 的遍历，对比新旧两棵树的每一个节点，并记录节点的变更。在这个过程中，React 使用了双端队列（Double-ended queue）作为辅助数据结构，以保证遍历的高效性。\r\n2. `O(k)` 的反向遍历，根据记录的变更列表对 DOM 进行更新。\r\n\r\n在第一阶段中，React 的 Diff 算法会从两棵树的根节点开始，依次对比它们的子节点。如果某个节点在新旧两个树中都存在，那么就将其进行更新。如果新树中有新节点，那么就将其插入到旧树中对应的位置。如果旧树中有节点不存在于新树中，那么就将其从 DOM 树中移除。\r\n\r\n在第二阶段中，React 会根据记录的变更列表对 DOM 进行更新。这个过程中，React 会按照更新的优先级进行更新，优先更新需要移动的节点，其次更新需要删除的节点，最后再更新需要插入的节点。\r\n\r\n需要注意的是，React 的 Diff 算法并不保证一定找到最优解，但是它保证了在大多数情况下，找到的解都是比较优的。同时，React 的 Diff 算法也具有一定的限制，比如无法跨越组件边界进行优化，这也是 React 中尽量避免多层嵌套组件的原因之一。\r\n\r\n### 代码模拟实现\r\nReact diff算法是一种优化算法，用于比较两个虚拟DOM树的差异，以最小化DOM操作的数量，从而提高渲染性能。\r\n以下是一个简单的实现React diff算法的代码：\r\n```js\r\nfunction diff(oldTree, newTree) {\r\n const patches = {};\r\n let index = 0;\r\n walk(oldTree, newTree, index, patches);\r\n return patches;\r\n}\r\n\r\nfunction walk(oldNode, newNode, index, patches) {\r\n const currentPatch = [];\r\n\r\n if (!newNode) {\r\n currentPatch.push({ type: \"REMOVE\" });\r\n } else if (typeof oldNode === \"string\" && typeof newNode === \"string\") {\r\n if (oldNode !== newNode) {\r\n currentPatch.push({ type: \"TEXT\", content: newNode });\r\n }\r\n } else if (oldNode.type === newNode.type) {\r\n const attrs = diffAttrs(oldNode.props, newNode.props);\r\n if (Object.keys(attrs).length > 0) {\r\n currentPatch.push({ type: \"ATTRS\", attrs });\r\n }\r\n diffChildren(oldNode.children, newNode.children, index, patches, currentPatch);\r\n } else {\r\n currentPatch.push({ type: \"REPLACE\", newNode });\r\n }\r\n\r\n if (currentPatch.length > 0) {\r\n patches[index] = currentPatch;\r\n }\r\n}\r\n\r\nfunction diffAttrs(oldAttrs, newAttrs) {\r\n const attrs = {};\r\n for (const key in oldAttrs) {\r\n if (oldAttrs[key] !== newAttrs[key]) {\r\n attrs[key] = newAttrs[key];\r\n }\r\n }\r\n for (const key in newAttrs) {\r\n if (!oldAttrs.hasOwnProperty(key)) {\r\n attrs[key] = newAttrs[key];\r\n }\r\n }\r\n return attrs;\r\n}\r\n\r\nfunction diffChildren(oldChildren, newChildren, index, patches, currentPatch) {\r\n const diffs = listDiff(oldChildren, newChildren, \"key\");\r\n newChildren = diffs.children;\r\n\r\n if (diffs.moves.length > 0) {\r\n const reorderPatch = { type: \"REORDER\", moves: diffs.moves };\r\n currentPatch.push(reorderPatch);\r\n }\r\n\r\n let lastIndex = index;\r\n oldChildren.forEach((child, i) => {\r\n const newChild = newChildren[i];\r\n index = lastIndex + 1;\r\n walk(child, newChild, index, patches);\r\n lastIndex = index;\r\n });\r\n}\r\n\r\nfunction listDiff(oldList, newList, key) {\r\n const oldMap = makeKeyIndexAndFree(oldList, key);\r\n const newMap = makeKeyIndexAndFree(newList, key);\r\n\r\n const newFree = newMap.free;\r\n\r\n const moves = [];\r\n\r\n const children = [];\r\n let i = 0;\r\n let item;\r\n let itemIndex;\r\n let freeIndex = 0;\r\n\r\n while (i < oldList.length) {\r\n item = oldList[i];\r\n itemIndex = oldMap.keyIndex[item[key]];\r\n if (itemIndex === undefined) {\r\n moves.push({ index: i, type: \"REMOVE\" });\r\n } else {\r\n children.push(newList[itemIndex]);\r\n if (itemIndex >= freeIndex) {\r\n freeIndex = itemIndex + 1;\r\n } else {\r\n moves.push({ index: itemIndex, type: \"INSERT\", item: item });\r\n }\r\n }\r\n i++;\r\n }\r\n\r\n const remaining = newFree.slice(freeIndex);\r\n remaining.forEach(item => {\r\n moves.push({ index: newList.indexOf(item), type: \"INSERT\", item: item });\r\n });\r\n\r\n return { moves, children };\r\n}\r\n\r\nfunction makeKeyIndexAndFree(list, key) {\r\n const keyIndex = {};\r\n const free = [];\r\n for (let i = 0; i < list.length; i++) {\r\n const item = list[i];\r\n if (item[key] !== undefined) {\r\n keyIndex[item[key]] = i;\r\n } else {\r\n free.push(item);\r\n }\r\n }\r\n return { keyIndex, free };\r\n}\r\n```",{"_54":979,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/116/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/116/timeline","pagination",{"_983":984,"_162":985},"value",5,7,"actionData","errors"]