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

我正在阅读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)
        }
    }

那么...为什么起作用？

最佳答案

子类使用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)
    }
}

由于它只是立即将prop2值替换为prop3，因此可以是：

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