ключевое слово "this" с несколькими объектами

Question

Я понимаю, что ключевое слово "this" относится к текущему / непосредственному объекту.Наблюдая за учебником React.js, я увидел, как инструктор использовал ключевое слово с несколькими объектами.Код выглядит следующим образом:

class Counter extends Component {
  state = {
    count: 0
  };

  styles = {
    fontSize: 10
  };

  render() {
    return (
      <div>
        <h1 style={this.styles}>Hello</h1>
        <span>{this.formatCount()}</span>
      </div>
    );
  }

  formatCount() {
    const { count } = this.state;
    return count === 0 ? "Zero" : count;
  }
}

Внутри formatCount (), почему мы ссылаемся на this.state вместо state.count?Кроме того, почему бы не formatCount() вместо this.formatCount()?Преподаватель продолжает говорить, что this относится к текущему объекту, но он пишет this.objectname.properties каждый раз.Это почему?Разве я не могу различать объекты только по имени объекта?

Answer 1

Ваш преподаватель использует объявления открытых полей внутри класса.

Если это поможет вам понять, эквивалентный код без этой функции будет:

class Counter extends Component {
  constructor() {
    this.state = {
      count: 0
    };

    this.styles = {
      fontSize: 10
    };
  }

  render() {
    return (
      <div>
        <h1 style={this.styles}>Hello</h1>
        <span>{this.formatCount()}</span>
      </div>
    );
  }

  formatCount() {
    const { count } = this.state;
    return count === 0 ? "Zero" : count;
  }
}

Другими словами, state = {...} и styles = {...} - это просто сокращение для объявления this.state и this.styles в методе конструктора.

Редактировать: Если вы хотите лучше понять thisключевое слово, вот еще один вопрос, на который вы можете ссылаться .