在构造函数中初始化的对象与属性之间有什么区别

Question

我在一个项目中也有几个混入。有些在属性中设置了对象，例如：

static get properties() {
  return {
    config: {
      type: Object
    }
  }
}

而其他 mixins 在构造函数中设置了它们的对象，例如：

constructor() {
  super();

  this.language = {
    name: "english",
    label: "EN"
  }
}

我想两者都是全局可访问的，因为 mixins 到处都在加载。但是这两种实现之间有什么区别？

编辑（附加代码）

这些 mixins 是通过以下方式创建的：

MyMixin = function (superClass) {
  return class extends superClass {

    static get properties() {
      return {
        config: {
          type: Object
        }
      }
    }

    constructor() {
      super();
    }

或其他方法：

MyMixin = function (superClass) {
  return class extends superClass {

    static get properties() {
      return {
      }
    }

    constructor() {
      super();
      this.language = {
        name: "english",
        label: "EN"
      }
    }

并且它们被另一个组件以下列方式使用：

class HomePage extends MyMixin(Polymer.Element) {
  ...
}

Answer 1

通过 Properties 对象创建的对象被映射为 HTML 属性，这意味着您可以进行数据绑定，例如：

<my-component config="[[someContent]]"></my-component>

在构造函数或 connectedCallback 中创建的变量未映射为 HTML 属性，因此您无法从外部绑定它们。

document.querySelector('my-component').language

会return

{
  name: "english",
  label: "EN"
}

但是

document.querySelector('my-component').getAttribute('language')

将 return 未定义并且

<my-component language="[[someContent]]"></my-component>

不会工作

在构造函数中初始化的对象与属性之间有什么区别

What's the difference between an object initialised in the constructor vs properties

polymer

polymer-1.0

polymer-2.x