es6 Class 的静态属性和实例属性

Class 的静态属性和实例属性

静态属性指的是 Class 本身的属性，即Class.propName，而不是定义在实例对象（this）上的属性。

1. class Foo {
2. }
4. Foo.prop = 1;
5. Foo.prop // 1

上面的写法为Foo类定义了一个静态属性prop。

目前，只有这种写法可行，因为 ES6 明确规定，Class 内部只有静态方法，没有静态属性。

1. // 以下两种写法都无效
2. class Foo {
3. // 写法一
4. prop: 2
6. // 写法二
7. static prop: 2
8. }
10. Foo.prop // undefined

目前有一个静态属性的提案，对实例属性和静态属性都规定了新的写法。

（1）类的实例属性

类的实例属性可以用等式，写入类的定义之中。

1. class MyClass {
2. myProp = 42;
4. constructor() {
5. console.log(this.myProp); // 42
6. }
7. }

上面代码中，myProp就是MyClass的实例属性。在MyClass的实例上，可以读取这个属性。

以前，我们定义实例属性，只能写在类的constructor方法里面。

1. class ReactCounter extends React.Component {
2. constructor(props) {
3. super(props);
4. this.state = {
5. count: 0
6. };
7. }
8. }

上面代码中，构造方法constructor里面，定义了this.state属性。

有了新的写法以后，可以不在constructor方法里面定义。

1. class ReactCounter extends React.Component {
2. state = {
3. count: 0
4. };
5. }

这种写法比以前更清晰。

为了可读性的目的，对于那些在constructor里面已经定义的实例属性，新写法允许直接列出。

1. class ReactCounter extends React.Component {
2. state;
3. constructor(props) {
4. super(props);
5. this.state = {
6. count: 0
7. };
8. }
9. }

（2）类的静态属性

类的静态属性只要在上面的实例属性写法前面，加上static关键字就可以了。

1. class MyClass {
2. static myStaticProp = 42;
4. constructor() {
5. console.log(MyClass.myStaticProp); // 42
6. }
7. }

同样的，这个新写法大大方便了静态属性的表达。

1. // 老写法
2. class Foo {
3. // ...
4. }
5. Foo.prop = 1;
7. // 新写法
8. class Foo {
9. static prop = 1;
10. }

上面代码中，老写法的静态属性定义在类的外部。整个类生成以后，再生成静态属性。这样让人很容易忽略这个静态属性，也不符合相关代码应该放在一起的代码组织原则。另外，新写法是显式声明（declarative），而不是赋值处理，语义更好。