ES6之Class

迈不过友情╰ 2022-05-22 06:09 181阅读 0赞

# **Class 的静态属性和实例属性** #

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

class Foo { } Foo.prop = 1; Foo.prop // 1

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

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

// 以下两种写法都无效 class Foo { // 写法一 prop: 2 // 写法二 static prop: 2 } Foo.prop // undefined

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

#### （1）类的实例属性 ####

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

class MyClass { myProp = 42; constructor() { console.log(this.myProp); // 42 } }

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

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

class ReactCounter extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } }

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

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

class ReactCounter extends React.Component { state = { count: 0 }; }

这种写法比以前更清晰。

#### （2）类的静态属性 ####

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

class MyClass { static myStaticProp = 42; constructor() { console.log(MyClass.myStaticProp); // 42 } }

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

// 老写法 class Foo { // ... } Foo.prop = 1; // 新写法 class Foo { static prop = 1; }

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

**补充（在RN中）：**

export default class Page1 extends Component{
        Shape=21;
        render() {
      //渲染函数
            let myProp = 42;
            return (
                <View style={styles.container}>
                    <Text>{
      this.Shape}--------------{myProp}</Text>
                </View>
            );
        }
    }

[Link 1]: https://github.com/tc39/proposal-class-fields