为什么 Webcomponent 对象的值在同一个 webcomponent 的不同实例之间共享？答案

【问题标题】：Why does Webcomponent object value is shared between the different instances of the same webcomponent?为什么 Webcomponent 对象的值在同一个 webcomponent 的不同实例之间共享？
【发布时间】：2020-03-02 06:46:18
【问题描述】：

我使用 Polymer 创建了一个名为 TestElement 的 Web 组件，如下所示。它只是有一个对象值和一个向这个组件添加值的函数。

<dom-module id="test-element">
  <template>Test Element</template>

  <script>
    class TestElement extends Polymer.Element {
    static get is() { return "test-element"; }

    static get properties() {
      return {
        _myVar: {
          type: Object,
          value: {},
        },
      };
    }

    addNew(key, val) {
      this._myVar[key] = val;
    }
  }

  customElements.define(TestElement.is, TestElement);
</script>
</dom-module>

我在父元素中创建了两个 this 实例，如下所示：

class ParentElement extends Polymer.Element {
  static get is() { return "parent-element"; }

  ready() {
    super.ready();
    this.$.myElement.addNew('key1', 'val-1');
    this.$.myElement2.addNew('key2', 'val2'); 
    console.log(this.$.myElement._myVar); // Expected to have {'key1': 'val-1'} but got {'key1': 'val-1', 'key2': 'val2'}. Why?
  }
}

在上面的控制台日志中，我希望有{'key1': 'val-1'}，但得到了{'key1': 'val-1', 'key2': 'val2'}。为什么？

如果你想有一个工作示例，请参考这个 plunkr：

http://plnkr.co/edit/7jSwTTBbBxD4qCbUoCGI?p=preview

【问题讨论】：

标签： polymer web-component polymer-2.x

【解决方案1】：

JavaScript 对象是通过引用实现的，当您定义默认值时，它就是一个对象。

static get properties() {
  return {
    _myVar: {
      type: Object,
      value: {},
    },
  };
}

为避免这种情况，您可以define a function 为每个组件实例返回一个新对象。

static get properties() {
  return {
    _myVar: {
      type: Object,
      value: function() { return {}; },
    },
  };
}

【讨论】：

【解决方案2】：

在思考的过程中，我找到了解决方案。

测试元素

类 TestElement 扩展 Polymer.Element { static get is() { return "test-element"; }

static get properties() {
  return {
    _myVar: {
      type: Object,
      value: {},
    },
  };
}

ready() {
  super();
  _myVar = {}; // if initialized like this, the objects are not shared anymore.
}

addNew(key, val) {
  this._myVar[key] = val;
}

}

customElements.define(TestElement.is, TestElement);

所以下面，记录我的预期：

class ParentElement extends Polymer.Element {
     static get is() { return "parent-element"; }

  ready() {
    super.ready();
    this.$.myElement.addNew('key1', 'val-1');
    this.$.myElement2.addNew('key2', 'val2'); 
    // Expected to have {'key1': 'val-1'} and got {'key1': 'val-1'} check! :)
    console.log(this.$.myElement._myVar); 
  }
}

【讨论】：