javascript 自定义元素构造函数是否共享相同的内存？答案

【问题标题】：Do the javascript custom elements constructors share the same memory?javascript 自定义元素构造函数是否共享相同的内存？
【发布时间】：2021-06-07 01:15:00
【问题描述】：

当我像这样定义自定义元素时：

customElements.define(
   "my-tag",
   class extends HTMLElement {
      constructor() {
         var data = {};
         ...

当我多次使用该元素时，例如：

<div>
   <my-tag yadda="yadda"></my-tag>
   <my-tag yadda="yadda2"></my-tag>
</div>

我注意到“数据”在“我的标签”的所有实例之间共享。

我也尝试将其创建为属性，例如：

customElements.define(
   "my-tag",
   class extends HTMLElement {
      constructor() {
         this.data = {};
         ...

但仍然在各个实例之间获得相同的共享内存。

我错过了什么？

【问题讨论】：

帖子不清楚您的问题是什么。由于my-tag 在其构造函数中定义了属性data，因此 my-tag 的所有实例都将包含定义的数据属性，其中包含该实例的值 Local。
请您确认每个实例实际上共享相同的值吗？正如@EthanSnow 所说。
发布一个工作（或在您的情况下失败）示例；使用 SO 编辑器中的 [ ] 按钮添加代码。因为您显示的 incomplete 代码不应表现出您描述的行为...我能想到的一件事..您是否使用document.querySelector("my-tag") 并因此始终获得 first 标签？
我终于设法检测到我的代码的一部分，其中局部变量数据被其他实例的值取代。所以，我错误地认为，以某种神秘的方式，变量不是本地的，而是全局的。所以，我必须对我提出这个问题造成的所有不便表示歉意！对不起我的错误！

标签： javascript class memory-management custom-element

【解决方案1】：

每个自定义元素都有自己的范围：

<my-tag id="ONE"></my-tag>
<my-tag id="TWO"></my-tag>

<script>
  customElements.define(
    "my-tag",
    class extends HTMLElement {
      constructor() {
        super() // sets AND returns this scope
              .data = Math.random(); // chain on super, just because we can
        console.log("constructor", this);
      }
      connectedCallback() {
        console.log("connected" , this.id, this.data, this);
      }
      
    })
</script>

【讨论】：