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

您的讲师正在课堂上使用public field declarations。

如果可以帮助您理解，则没有此功能的等效代码为：

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关键字，请使用another question you can reference。

具有多个对象的“ this”关键字

1 个答案: