具有多个对象的“ 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关键字，这是您可以参考的另一个问题。