Разница между funcName () {} и funcName = () => {} в ES6

Question

Разница между funcName () {} и funcName = () => {} в ES6

1

Недавно я изучал React Native, и мне нужно было получить доступ к пользовательским свойствам компонента после того, как компонент был, например, затронут. Я определил следующий компонент:

export class OperationBox extends React.Component {
  constructor(props) {
    super(props);
  }

  startOperation() {
    Alert.alert("starting operation " + this.props.operation);
  }

  render() {
    return (
      <TouchableHighlight onPress={this.startOperation}>
          <Text>{this.props.operation}</Text>
      </TouchableHighlight>

    );
  }
}

Приложение сбой, когда компонент коснулся, говоря, что undefined is not an object when evaluating this.props.operation. Однако, если я определяю функцию startOperation() следующим образом: startOperation =() => {... }, я получаю ожидаемое поведение.

Теперь я подумал, что понял, как работают эти функции стрелок. Исходя из Быстрого фона, я думал, что они просто закрыты, но, конечно, я чего-то не хватает? Почему первый способ не работает, но второй делает?

Youssef Moawad 05 нояб. 2017, в 20:25

Источник

Теги:

javascript

ecmascript-6

react-native

arrow-functions

2 ответа

0

Поскольку функция не привязана к классу, если она определена как:

someFunction() { }

И привязывается, если определено как:

someFunction = () => { }

Другая возможность заключается в явной привязке его в конструкторе:

constructor(props) {
    super(props);
    this.someFunction = this.someFunction.bind(this);
}

Разница в том, что функция startOperation передается как обратный вызов и выполняется в другой среде (вне исходного класса), поэтому this относится к другому объекту.

Bogdan Kuštan 05 нояб. 2017, в 16:21

Ещё вопросы

Microsmsm · Accepted Answer · 2017-11-05T16-28-00.000Z

Простой ответ: в классах ES6

funcName() {} создает "Методы класса", но funcName =() => {} нет.

Это касается всех синтаксических стандартов ECMASCRIPT 2015.

Однако вы можете преодолеть это;)

Можно ли использовать функции стрелок в классах с ES6?