javascript - 子类声明中的赋值 - React.Component

Question

我正在阅读 Egghead 的 React 教程，在其中一节课中我发现了以下类声明:

class StopWatch extends React.Component {
        state = {lapse: 0, running: false}

        render() {
            const {lapse, running} = this.state
            const buttonStyles = {
                border: '1px solid #ccc',
                background: '#fff',
                fontSize: '2em',
                padding: 15,
                margin: 5,
                width: 200
            }
            return (
                <div style={{textAlign: 'center'}}>
                    <label style={{fontSize: '5em', display: 'block'}}>
                        {lapse}ms
                    </label>
                    <button style={buttonStyles}>{running ? 'Stop' : 'Start'}</button>
                    <button style={buttonStyles}>Clear</button>
                </div>
            )

        }
    }

所以看着代码，我只是对顶部的那个分配感到好奇。我查看了类并扩展了 MDN 上的文档，它没有说明允许在类声明中进行赋值。

此外，我在示例代码上进行了尝试，但它抛出了一个错误:

class Square {
        constructor(prop1, prop2) {
            this.prop1 = prop1
            this.prop2 = prop2
        }
    }

    class Polygon extends Square {
        constructor(prop1, prop2, prop3) {
            super(prop1, prop2)
        }
        prop2 = prop3
        render() {
            console.log(prop2)
        }
    }

那么...为什么它有效？

Answer 1

子类使用类字段 stage 3 proposal并且不是现有标准的一部分。它们为构造函数主体提供语法糖。如 this question 中所述, 有一个执行类字段分配的特定顺序。

该子类与此 ES6 类相同(另请查看 Babel output 了解发生了什么):

class Polygon extends Square {
    constructor(prop1, prop2, prop3_that_doesnt_collide) {
        super(prop1, prop2);
        this.prop2 = prop3;
    }

    render() {
        console.log(prop2)
    }
}

console.log(prop2) 指的是不存在的 prop2 变量而不是 prop2 属性。

请注意，因为 prop3 位于构造函数方法之外，所以它不引用 prop3 构造函数参数，而是引用一些不存在的 prop3变量，因此 prop3_that_doesnt_collide 参数和 prop3 不会发生碰撞。

由于prop2 赋值依赖于构造器参数，所以它应该放在构造器方法中:

class Polygon extends Square {
    constructor(prop1, prop2, prop3) {
        super(prop1, prop2);
        this.prop2 = prop3;
    }

    render() {
        console.log(this.prop2)
    }
}

因为它只是立即用 prop3 替换 prop2 值，所以它可以是:

constructor(prop1, prop2, prop3) {
    super(prop1, prop3);
}