如何访问用于 Web 组件的基础 class 上的属性？

Question

我想为 Base class 上的组件设置 html 命名空间，但似乎 NavBar.ns 不创建实例就无法做到，这使得Web 组件未呈现。

import Base from './Base.js';

class NavBar extends Base {
  constructor() {
    super();
  }

  connectedCallback() {
    console.log('ns', this.ns);
    this.innerHTML = '...';
  }
}

console.log('ns2', NavBar.ns);  // undefined here
customElements.define(`${NavBar.ns}-navbar`, NavBar);

Base.js:

class Base extends HTMLElement {
  constructor() {
    super();
    this.ns = 'wce';
  }


}

export default Base;

Answer 1

您无法访问 Navbar.ns，因为您没有创建导航栏的实例（对象），this.ns 将应用于每个导航栏new 调用导航栏，例如const navbar = new Navbar(); navbar.ns; // <-- wce。您没有创建 Navbar 的 instance，因此您可以创建一个 static 字段，它允许您访问一个字段而无需创建一个 class 实例。

在base.js中：

class Base extends HTMLElement {
  constructor() {
    super();
  }
  static get ns() {
    return 'wce';
  }
}

export default Base;

static 允许我们在不创建 new 实例的情况下访问 class 字段。
现在，当您调用 NavBar.ns 时，它将 return "wce" 使用 getter.

但是，您还希望在 (customElements.define) 创建新实例时能够访问 .ns。您必须设置一个附加 this 调用：

class Base extends HTMLElement {
  constructor() {
    super();
    this.ns = 'hello';
  }
  static get ns() {
    return 'world';
  }
}

export default Base;

在你的情况下，如果你希望它们“以相同的方式工作”，你可以将“hello”和“world”都更改为“wce”。

现在，假设您要访问 ns，如果您不创建实例，您会这样做：

NavBar.ns; // <-- "world"

但是如果你正在创建一个实例（比如在 customElements.define 中），你可以使用 new 运算符来访问 this.ns:

const navbar = new NavBar();
navbar.ns; // "hello"

（为了说明，我使用了“hello”和“world”而不是“wce”。）
现在使用添加的代码，您可以像示例中那样使用它：

                       /*  "wce-navbar"  */
customElements.define(`${NavBar.ns}-navbar`, NavBar);

Some docs about static.

如何访问用于 Web 组件的基础 class 上的属性？

How do I access a property on a base class that is for a web component?

javascript

ecmascript-6

web-component

native-web-component

如何访问用于 Web 组件的基础 class 上的 属性？

How do I access a property on a base class that is for a web component?

javascript

ecmascript-6

web-component

native-web-component

如何访问用于 Web 组件的基础 class 上的属性？