javascript - 在声明 polymer 元素的属性时，为什么值有时是返回 {} 的函数？

Question

我很好奇的部分是为什么要使用

value: function() { return {}; }

代替

value: {}

示例代码如下:

<script>
    Polymer({

      is: 'polymer-demo',

      properties: {
        data: {
            type: Object,
            notify: true,
            value: function() { return {}; }
          }
      },

    });
  </script>

Answer 1

这在 example 中有解释:

When initializing a property to an object or array value, use a function to ensure that each element gets its own copy of the value, rather than having an object or array shared across all instances of the element.

虽然您可以使用 {}，但这将是每个元素共享的同一个对象，因此如果一个元素的值发生变化，所有其他元素都会看到应用于它的相同更改.这不是你想要发生的。通过使用函数，将为每个元素调用该函数，并且每次调用都会产生一个新的独立对象。然后，突变将仅应用于该单个元素而不会影响其他元素。