为什么onevent属性被视为内存快照中的闭包？

huangapple
go评论136阅读模式
英文:

Why the onevent properties are being treated as closure in memory snapshot?

问题

当我在触发largeClosures()和stopAndClear()点击事件处理程序之后，拍摄内存快照，我可以看到(closure)行包含这些事件处理程序。

这些事件处理程序通过使用onevent属性绑定到DOM元素。

例如：

  1. <!-- begin snippet: js hide: false console: true babel: false -->
  3. <!-- language: lang-html -->
  4. <!DOCTYPE html>
  5. <html lang="en">
  7. <head>
  8.   <meta charset="UTF-8">
  9.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  10.   <title>Document</title>
  11. </head>
  13. <body>
  14.   <p>Analyze the impact of closures on memory</p>
  15.   <p>
  16.     <button onclick="largeClosures()">
  17.       Closures maintain hold on large string
  18.     </button>
  19.   </p>
  20.   <p>
  21.     <button onclick="smallClosures()">
  22.       Closures maintain hold only on small strings
  23.     </button>
  24.   </p>
  25.   <p>
  26.     <button onclick="evalClosures()">Closures with <code>eval</code></button>
  27.   </p>
  28.   <button onclick="stopAndClear()">Stop and clear</button>
  29.   <script>
  30.     var closures = [];
  32.     function createLargeClosure() {
  33.       var largeStr = new Array(1000000).join("x");
  34.       return function lC() {
  35.         return largeStr;
  36.       };
  37.     }
  39.     function createSmallClosure() {
  40.       var smallStr = "x";
  41.       var largeStr = new Array(1000000).join("x");
  42.       return function sC() {
  43.         return smallStr;
  44.       };
  45.     }
  47.     function createEvalClosure() {
  48.       var smallStr = "x";
  49.       var largeStr = new Array(1000000).join("x");
  50.       return function eC() {
  51.         eval("");
  52.         return smallStr;
  53.       };
  54.     }
  56.     function largeClosures() {
  57.       closures.push(createLargeClosure());
  58.     }
  60.     function smallClosures() {
  61.       closures.push(createSmallClosure());
  62.     }
  64.     function evalClosures() {
  65.       closures.push(createEvalClosure());
  66.     }
  68.     function clear() {
  69.       closures.length = 0;
  70.     }
  72.     function stopAndClear() {
  73.       clear();
  74.     }
  75.   </script>
  76. </body>
  78. </html>
  80. <!-- end snippet -->

内存快照（使用Microsoft Edge Developer Tool - Memory）：

为什么onevent属性被视为内存快照中的闭包？

正如你所见，(closure)包含这两个点击事件处理程序。它们每个都分配了32字节的内存。为什么它们被视为闭包？传统的闭包应该像lC，sC和eC函数一样。

英文:

When I take a memory snapshot after triggering the largeClosures() and stopAndClear() click event handler. I can see the (closure) row contains these event handlers.

These event handlers are bound to the DOM element by Using onevent properties.

For example:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  3. &lt;head&gt;
  4. &lt;meta charset=&quot;UTF-8&quot;&gt;
  5. &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  6. &lt;title&gt;Document&lt;/title&gt;
  7. &lt;/head&gt;
  8. &lt;body&gt;
  9. &lt;p&gt;Analyze the impact of closures on memory&lt;/p&gt;
  10. &lt;p&gt;
  11. &lt;button onclick=&quot;largeClosures()&quot;&gt;
  12. Closures maintain hold on large string
  13. &lt;/button&gt;
  14. &lt;/p&gt;
  15. &lt;p&gt;
  16. &lt;button onclick=&quot;smallClosures()&quot;&gt;
  17. Closures maintain hold only on small strings
  18. &lt;/button&gt;
  19. &lt;/p&gt;
  20. &lt;p&gt;
  21. &lt;button onclick=&quot;evalClosures()&quot;&gt;Closures with &lt;code&gt;eval&lt;/code&gt;&lt;/button&gt;
  22. &lt;/p&gt;
  23. &lt;button onclick=&quot;stopAndClear()&quot;&gt;Stop and clear&lt;/button&gt;
  24. &lt;script&gt;
  25. var closures = [];
  26. function createLargeClosure() {
  27. var largeStr = new Array(1000000).join(&quot;x&quot;);
  28. return function lC() {
  29. return largeStr;
  30. };
  31. }
  32. function createSmallClosure() {
  33. var smallStr = &quot;x&quot;;
  34. var largeStr = new Array(1000000).join(&quot;x&quot;);
  35. return function sC() {
  36. return smallStr;
  37. };
  38. }
  39. function createEvalClosure() {
  40. var smallStr = &quot;x&quot;;
  41. var largeStr = new Array(1000000).join(&quot;x&quot;);
  42. return function eC() {
  43. eval(&quot;&quot;);
  44. return smallStr;
  45. };
  46. }
  47. function largeClosures() {
  48. closures.push(createLargeClosure());
  49. }
  50. function smallClosures() {
  51. closures.push(createSmallClosure());
  52. }
  53. function evalClosures() {
  54. closures.push(createEvalClosure());
  55. }
  56. function clear() {
  57. closures.length = 0;
  58. }
  59. function stopAndClear() {
  60. clear();
  61. }
  62. &lt;/script&gt;
  63. &lt;/body&gt;
  64. &lt;/html&gt;

<!-- end snippet -->

Memory snapshot(using Microsoft Edge Developer Tool - Memory):

为什么onevent属性被视为内存快照中的闭包？

As you can see, the (closure) contains these two click event handlers. Each of them has 32 bytes of memory allocated. Why they are being treated as a closure? The traditional closure should be like lC, sC, and eC functions.

答案1

得分: 0

事件处理程序 捕获它们创建时的周围上下文，形成一个 闭包 来保持对在定义它们时处于范围内的变量和函数的访问。

在您的 HTML 代码 中，当您为按钮定义一个 onclick 属性，比如 button onclick="largeClosures()"，实际上是创建了一个包含整个函数定义所在范围的函数（闭包），其中包括闭包数组和在 :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定