Static Properties in ES Class

问题

ES6 的 class 支持 static property 吗?

static property, 即类(class,在 JS 中即构造函数 constructor)上的静态属性,代码示例如下:

class MyClass {
  static myStaticProp = 42;

  constructor() {
    console.log(MyClass.myStaticProp); // Prints '42'
  }
}

背景

ES6,更合适的说法是 ES2015,所支持的 class 语法如下(来自 babel - Learn ES2015):

class SkinnedMesh extends THREE.Mesh {
  constructor(geometry, materials) {
    super(geometry, materials);

    this.idMatrix = SkinnedMesh.defaultMatrix();
    this.bones = [];
    this.boneMatrices = [];
    //...
  }
  update(camera) {
    //...
    super.update();
  }
  static defaultMatrix() {
    return new THREE.Matrix4();
  }
}

其中有 instance property(通过在 constructor 中赋值), instance method 以及 static method 的示例,但唯独没有 static property 的示例。而到底这一特性是否支持,不同来源的说法不太一致。

理论上,使用已知的 ES2015 语法,可以通过对 class 定义 getter 实现 static property,写法如下:

class MyClass {
  get myStaticProp() {
    return 42
  }
}

但是这么写很傻,我们只是需要一个简单的 property 而已。

这个问题之所以重要,就要说到 react。react 的 component 定义支持 ES5 及 ES6 两种方式:

// The ES5 way
var HelloMessage = React.createClass({
  render: function () {
    return <div>Hello {this.props.name}</div>;
  }
})

// the ES6 way
class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

但是在 ES6 的写法下,initialStatedefaultProps 以及 propTypes 的声明与 ES5 写法下有较大区别,官方文档见此,ES5 的版本是:

// The ES5 way
var Counter = React.createClass({
  getDefaultProps: function() {
    return {
      initialCount: 0
    };
  },
  getInitialState: function() {
    return {
      count: this.props.initialCount
    };
  },
  propTypes: {
    initialCount: React.PropTypes.number
  }
});

在 ES6 写法下,initialState 要求通过在初始化的时候给 this.state 赋值实现,而 defaultPropspropTypes 需要通过在构造函数上定义同名属性(Counter.defaultPropsCounter.propTypes)实现,具体是这样的:

export class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: props.initialCount};
  }
}
Counter.propTypes = { initialCount: React.PropTypes.number };
Counter.defaultProps = { initialCount: 0 };

类的实现代码分割成了两块,很丑陋,这也正是我一度不愿意使用 ES6 的写法的原因。可是,如果 ES6 的 class 支持 static property 的定义的话,我们就可以写成这样:

export class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: props.initialCount};
  }
  static propTypes = {
    initialCount: React.PropTypes.number
  };
  static defaultProps = {
    initialCount: 0
  };
}

看起来会好很多。

答案

static property 并不在 ES2015 范围以内。目前是 stage-1 的提案。将来如果会通过,大概也是 ES7(ES2016),而不是 ES2015 的一部分了。这个提案同时也包含了 instance property (实例属性,在提案中被称为 instance fields) 的部分,如下的写法会在 ClassWithInits 的构造函数执行的时候给实例添加属性 myProp,值为 42:

class ClassWithInits {
  myProp = 42;
}

这个提案对应的 babel plugin 是 transform-class-properties,可以通过在 babel 中配置这个 plugin 或者配置 presets 中添加 stage-1(包含了 plugin transform-class-properties)以支持这一特性。

最后,得到的经验是,得益于 babel 的语法转换功能,在新的开发模式下,在考察语法特性时,不需要考虑是否某一规范(ES6、ES7,…)的组成部分,对应规范是否已正式发布,各大浏览器是否支持,只需要考虑是否可以通过对应的转换插件支持,在自己的开发中使用即可。代码要转换,思维方式更要转换。

参考

comments powered by Disqus