为什么 Webcomponent 对象值在同一 webcomponent 的不同实例之间共享?
Why does Webcomponent object value is shared between the different instances of the same webcomponent?
我使用 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>
我在父元素中创建了两个实例,如下所示:
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:
经过深思熟虑,我找到了解决办法。
测试元素
class TestElement 扩展 Polymer.Element {
静态获取是(){ 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);
}
}
JavaScript 对象通过引用,当您定义默认值时,它是单个对象。
static get properties() {
return {
_myVar: {
type: Object,
value: {},
},
};
}
为避免这种情况,您可以 define a function 为每个组件实例 return 一个新对象。
static get properties() {
return {
_myVar: {
type: Object,
value: function() { return {}; },
},
};
}
我使用 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>
我在父元素中创建了两个实例,如下所示:
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:
经过深思熟虑,我找到了解决办法。
测试元素
class TestElement 扩展 Polymer.Element { 静态获取是(){ 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);
}
}
JavaScript 对象通过引用,当您定义默认值时,它是单个对象。
static get properties() {
return {
_myVar: {
type: Object,
value: {},
},
};
}
为避免这种情况,您可以 define a function 为每个组件实例 return 一个新对象。
static get properties() {
return {
_myVar: {
type: Object,
value: function() { return {}; },
},
};
}