为什么必须使用关键字"this"而不是类名？

Question

这是来自react.js教程的代码,"this"关键字代表App类.所以我的问题是为什么我不能只改写类名呢？

import React, { Component } from 'react';
import './App.css';
import Person from './Person/Person';

class App extends Component {

state = {
 persons: [
  { name: 'Max', age: 28 },
  { name: 'Manu', age: 29 },
  { name: 'Stephanie', age: 26 }
 ]
}

render() {
 return (
  <div className="App">
    <h1>Hi, I'm a React App</h1>
    <p>This is reallyyyyyyyy working!</p>
    <button> switch name</button>
    <Person name={App.state.persons[0].name} age={this.state.persons[0].age} />
    <Person name={this.state.persons[1].name} age={this.state.persons[1].age}>My Hobbies: Racing</Person>
    <Person name={this.state.persons[2].name} age={this.state.persons[2].age} />
  </div>
 );
// return React.createElement('div', {className: 'App'}, 
React.createElement('h1', null, 'Hi, I\'m a React App!!!'));
}
}

export default App;

Answer 1

因为在JavaScript中,当您指定类名(特别是在类中)时,您将获得对类的引用,而不是当前类实例.实例属性和方法不能通过其类获得.同时this代表当前的实例.

class App {
    test() {
        console.log(App); // "class App ..."
        console.log(this); // "[object Object]"
        console.log(App.foo()); // "1"
        console.log(this.foo()); // "2"
        console.log(this.constructor.foo()); // "1"; this.constructor is a reference to the current object class
    }

    static foo() {
        return 1;
    }

    foo() {
        return 2;
    }
}