时间戳

首页 > 解决方案 > 带有多个对象的“this”关键字

javascript - 带有多个对象的“this”关键字

问题描述

我知道“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每次都在写。这是为什么？我不能只用对象名来区分对象吗？

标签： javascriptreactjsthis

解决方案

您的教师在课堂上使用公共字段声明。

如果它有助于您的理解，那么没有此功能的等效代码将是：

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 = {...}andstyles = {...}只是在构造方法中声明this.state和的简写。this.styles

编辑：如果您想更好地理解this关键字，可以参考另一个问题。

推荐阅读