es6 class类的使用总结

目录

1 js类的声明

2 js类的成员变量

3 js类的getter和setter方法

4 js类的私有成员变量及私有方法

5 js类的静态成员变量及静态方法

6 js类的单例实现方式探讨

7 js类的加载顺序探讨

---

 

/**
 * js类的声明
 */
MyClass = class MyClass{
    
    /**
     * 成员变量,公有
     */
    name = '我的自定义类';

    /**
     * 私有成员变量,使用'#'井号开头定义变量,外部不可访问
     */
    #className = 'MyClass';

    /**
     * 静态变量,类加载时便会初始化,从上到下顺序初始化(具体尚未详细验证研究)
     */
    static #instance = new MyClass();

  /*
   * js类的构造方法
   * 在此处执行一些初始化逻辑或调用初始化方法
   */

  constructor(){
    console.log('constructor MyClass');
    // 单例的一种方式, 禁止重复初始化
    if(globalThis.MyClass === undefined){
        this.#doInit();
    }

  }

    /*
     * 私有成员方法,用#井号开头,将一个匿名函数赋值给私有成员变量;
     * (这是一种兼容方法,兼容nodejs12版本)
     * 在最新的^chrome 89.0.4389.114版本以上可以直接写为#doInit(){}
     */
    #doInit = ()=>{
        console.log('doInit sTh...');
        this.name += String(Math.random()).substr(2);
    }

    /*
     * 成员方法声明,可直接通过对象调用
     */
    sayClassName(){
        // 私有成员变量直接用 this.# + 私有变量名 来访问,只可在类内部访问
        let cn = this.#className;
        console.log('我的类名为: ', cn);
    }

    /*
     * 静态成员方法声明,可直接通过类调用该方法
     */
    static getInstance(){
        //私有静态成员访问方式: 类名.# + 私有静态变量名
        return MyClass.#instance;
    }

    /*
     * getter方法,可改变返回内容,也可以控制访问权限
     */
    get name(){
        return '获取name为 ' + this.name;
    }

    /*
     * setter方法,可进行值的有效性验证等等等处理
     */
    set name(aName){
        console.log('更改新的name值: ', aName);
        this.name = aName;
    }

} 

js类的加载顺序探讨

尚未研究, 自己手动控制.