Вызов обычной функции против функции стрелки перед их объявлением в классе

Question

Если я напишу класс React следующим образом:

class SomeClass extends React.Component {
    state = {
        someState: this.someRegularFunction(),
        someOtherState: this.someArrowFunction()
    };

    someRegularFunction() {
        return "someText";
    }

    someArrowFunction = () => {
        return "someOtherText";
    };
}

Помощь кода веб-шторма предупреждает о вызове функции стрелки this.someArrowFunction() говоря:

Поле 'someArrowFunction' равнообъявляется после 'состояния' и, возможно, еще не назначено

Если не предупреждает о вызове обычной функции this.someRegularFunction().

И Webstorm верен, выполнение завершается неудачно, когдавызов this.someArrowFunction() с:

TypeError: _this.someArrowFunction не является функцией

---

Я искал некоторую документацию, объясняющую это поведение, ноне удалось найти ни одного.

Почему вы можете вызывать обычные функции, но не функции стрелок, до их объявления внутри класса?

Answer 1

Поскольку этот код функционально идентичен этому:

class SomeClass extends React.Component {
    constructor(...args) {
        super(...args);
        this.state = {
            someState: this.someRegularFunction(),
            someOtherState: this.someArrowFunction()
        };
        this.someArrowFunction = () => {
            return "someOtherText";
        };
    }

    someRegularFunction() {
        return "someText";
    }
}

Определения полей обрабатываются в порядке исходного кода, когда создается экземпляр .Это как если бы они были вставлены в конструктор перед любым другим кодом (в базовом классе) или сразу после вызова super (в подклассе).

Напротив, someRegularFunction - это методпрототип, который создается при оценке определения класса, а не позднее, когда создается экземпляр.

Это охватывается предложением для свойства полей класса в тексте спецификации.(Однако чтение текста спецификации не для слабонервных! :-))

---

Примечание: возможно, это вопрос стиля, но если вы выполняете эту функцию стрелки, чтобы она моглаиспользуйте this, не беспокоясь о том, как он вызывается (например, в качестве обработчика событий), вы можете подумать о том, чтобы сделать его методом, а затем вместо него использовать bind в конструкторе (или, фактически, в конструкторе):

class SomeClass extends React.Component {
    someFunction = this.someFunction.bind(this);
    state = {
        someState: this.someRegularFunction(),
        someOtherState: this.someFunction()
    };

    someRegularFunction() {
        return "someText";
    }

    someFunction() {
        return "someOtherText";
    }
}

Это лучше всего подходит для тестирования кода, который может нуждаться в макете функции (путем замены ее на прототип).

Но, опять же, это, возможно, вопрос стиля.