ES6 类的正确定义方式 公有类字段 getter / setter

类字段提案

https://github.com/tc39/proposal-class-fields
https://wenjun.me/2019/07/public-class-fields.html

Webpack 内置的js打包程序不支持类字段, 然而Chrome和FF已原生支持....

getter / setter

注意与Java区别.

• setter函数的定义
  setter函数, 对该属性赋值时触发函数调用.

class A {
    constructor() {
        this.field = 'init from contructor()'; # 这里也会触发setter, 即使这里没有分配field变量, 之后的赋值语句也会将setter函数触发
    }
    set field(value) {
        console.log(`setter被触发, 你想将field设置为${typeof value}: ${value}`);
    }
}

let a = new A(); // setter被触发, 你想将field设置为string: init from contructor()
a.field = 'trigger setter()'; // setter被触发, 你想将field设置为string: trigger setter()
console.log(a.field); // undefined

• getter函数
  与setter类似.

...
    get field() {
        console.log('你想获取field的值'); // 被打印
        return '未知';
    }
...
console.log(a.field); // 未知

• 如何工作
  我们想当然地以为下面的代码可以工作, 事实却很残酷:

set field(value) {
    console.log(`setter被触发, 你想将field设置为${typeof value}: ${value}`); # 不断打印该行, 直到报错
    this.field = value; # 会导致递归地调用该函数
}

如何解决? 使用私有的公有类字段即可:
getter 与 setter 在访问公有类字段的时候不会被触发, 在公有类中可以定义一个私有的公有类字段来缓存.

class A {
    #field = undefined; // #开头的公有字段是私有的, 不可以通过实例名直接访问
    constructor() {
    }
    set field(value) {
        console.log(`setter被触发, 你想将field设置为${typeof value}: ${value}`);
        this.#field = value;
    }
    get field() {
        console.log('你想获取field的值');
        return this.#field;
    }
}

let a = new A();
a.field = 'trigger setter()';
console.log(a.field);


setter被触发, 你想将field设置为string: trigger setter()
你想获取field的值
trigger setter()

这里使用了#声明私有的公有类字段, 保证字段不会被外界获取, 即使使用以下方式:

function tryGetPrivateField() {
    return this.#field;
}

console.log(tryGetPrivateField.apply(a)); # 语法错误：私有字段“#field”必须在封闭类中声明

实例字段与静态字段

• 静态字段
  类也是一个对象, 可以为类赋值, 通过类名获取变量值, 称为静态字段:

class A {}
A.field = 'value';

// 静态字段的便捷写法: 使用static关键字以及公有字段的声明方式
class A {
      static field = 'value';
}

• 实例字段
  实例字段比较常见, 通常在构造函数中动态赋值. 当然, 我们建议使用公有字段的声明方式.
  赋值和公有字段的区别: 前者使用"分配", 后者使用"定义". 即普通赋值和Object.defineProperty()函数. 这两者又有什么区别?

共有类字段

JavaScript的类只有函数是可复用的, 一般来说没有什么问题:
如果字段需要共享, 那么可能直接往类的原型CustomClass.prototype上添加属性即可, 原型委托机制能让类的实例访问这些共享字段. (使用静态字段也何尝不可)

类特有的字段只能在构造函数中动态赋值, 但是这对于IDE来说不友好, 因为我们希望一些字段是通用的, 公有的, 可提示的.

ES6有一个提案: 公有类字段, 可以提供实现:

class CustomClass {
      version = '1.0'; // 声明公有类字段
      /** 创建该类的作者 */ // 为字段编写文档
      author; // 可以声明但不赋值

      constructor(version, author = 'Develon') { // 如果需要在构造函数中提供赋值的话, 可以使用默认参数, 而不在声明author时赋值
            // this.version = version; // 不建议单独在构造函数中使用this关键字构造字段, 而省略公有类字段的声明
            if (version !== undefined) this.version = version; // 公有类字段的正确构造方法, 毕竟构造函数不可重载(难不成基于参数个数重载? 可变参数咋办呢....)
            this.author = author;
      }

      printVersion() {
            console.log(this.version);
      }
}

new CustomClass().printVersion(); // 1.0
console.log(new CustomClass()); // CustomClass { version: '1.0', author: 'Deve'on' }

共有类字段也可以是函数, 一般来说是箭头函数, 可以捕获this关键字, 这在React中有应用:

class CustomComponent extends Component {
      constructor(props) {
            super(props);
      }
      handleClick = event => { // 要紧: 公有类字段 + 箭头函数
            this === inst of CustomComponent // 捕获到this关键字, 将函数引用注册到按钮事件也不会丢失this值
            use event && this.setState(...); // 正确执行, 根据事件设置组件状态
      };
      render() {
            return createElement('button', {
                  onClick: this.handleClick,
                  onClick: event => { this.handleClick(event); }, // 也可以直接在这里使用this关键字, 但是需要显式传递事件
            });
      }
}

私有类字段

使用#符号即可.