js class static property & public class fields & private class fields

js class static property

class static property (public class fields)

const log = console.log;

class ESNextStaticProperty {
  static username = "xgqfrms";
}

log(ESNextStaticProperty.username);
// "xgqfrms"

ESNextStaticProperty.name;
// "ESNextStaticProperty"

equal to

const log = console.log;

class ES6StaticProperty {
  // static name = "xgqfrms";
}

ES6StaticProperty.username = "xgqfrms";

log(ESNextStaticProperty.username);
// "xgqfrms"

ES6StaticProperty.name;
// "ES6StaticProperty"

https://javascript.info/static-properties-methods#static-properties

public class fields

class ClassWithInstanceField {
  instanceField = 'instance field'
}

class ClassWithStaticField {
  static staticField = 'static field'
}

class ClassWithPublicInstanceMethod {
  publicMethod() {
    return 'hello world'
  }
}

private class fields

class ClassWithPrivateField {
  #privateField
}

class ClassWithPrivateMethod {
  #privateMethod() {
    return 'hello world'
 }
}

class ClassWithPrivateStaticField {
  static #PRIVATE_STATIC_FIELD
}

demos

static properties

const log = console.log;

class ClassWithStaticProperty {
  static staticProperty = `this is a static property `;
}

const test = ClassWithStaticProperty.staticProperty;
log(test);
// "this is a static property"

static methods

const log = console.log;

class ClassWithStaticMethod {
  static staticMethod() {
    log(`static method has been called`);
    return `static method`;
  }
}

const test = ClassWithStaticMethod.staticMethod();
// "static method has been called"
log(test);
// "static method"

web components

class EmojiElement extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.shadowRoot;
    // ... web components
    const template = document.querySelect(`[data-template="emoji-template"]`);
    this.templateContent = template.content.cloneNode(true);
    this.shadowEmoji.appendChild(this.templateContent);
    // 添加样式到 Shadow DOM （template）
    if (window.ShadyCSS) {
      window.ShadyCSS.prepareTemplate(template, EmojiElement.tagName);
    }
  }
  static tagName = `emoji-element`;
  connect() {
    log(`connect`);
  }
  disconnect() {
    log(`disconnect`);
  }
}

customElements.define(EmojiElement.tagName, EmojiElement);

Emoji.tagName;
// "emoji-element"

refs

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/static

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Public_class_fields

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_class_fields

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#Static_methods

https://javascript.info/static-properties-methods#static-properties

http://thecodebarbarian.com/static-properties-in-javascript-with-inheritance.html

https://www.sitepoint.com/javascript-private-class-fields/

https://medium.com/@assortedPickle/es6-static-properties-b7fd2a163328

---

---

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---