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"