ES6 类中的 ES6 函数、箭头函数和“this”[重复]

class App extends Component {
  constructor(props) {
    ...
  }

  onChange = (e) => this.setState({term: e.target.value})

  onSubmit(e){
    e.preventDefault();
    const api_key = "C1hha1quJAQZf2JUlK";
    const url = `http://api.giphy.com/v1/gifs/search?q=${this.state.term}&api_key=${api_key}`;
  }

  render() {
    return (
      <div>
        <form onSubmit={this.onSubmit}>
          <input value={this.state.term} onChange={this.onChange}/>
          <button>Search!</button>
        </form>
      </div>
    );
  }
}

类中声明的两种类型的函数有什么区别（onChange 和 onSubmit）。我在引用 this.sate 时遇到错误常量网址如果我将其声明为 ES6 类方法，但将其更改为箭头函数即可修复它。

我想知道这两种情况下如何处理“this”

另外，我该如何以其他方式做到这一点？比如说，如果我想使用相同的 onSubmit 函数（ES6 类方法），但想在调用它时（在表单元素中）处理这个问题，我该怎么做？

使用 this.onSubmit.bind(this) ?

重要的是要知道这个语法：

class A {
  method = () => {}
}

只是在类构造函数中创建实例方法的语法糖：

class A {
  constructor() {
    this.method = () => {}
  }
}

注意：此语法还不是 JavaScript 语言的正式部分（目前处于第3阶段 https://github.com/tc39/proposal-class-fields）所以你必须使用.

的价值this within method是班级A因为那就是this指向构造函数中（因为箭头函数 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions从它们定义的范围继承上下文）：

class A {
  constructor() {
    this.method = () => this;
  }
}

const instance = new A();
console.log(instance.method() === instance); // true

在类上定义常规（非箭头函数）方法会在类原型（而不是实例）上创建一个方法，但没有设置任何规则this将是（因为this在 JS 中是动态的并且取决于函数的调用方式，而不是函数的定义方式 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this).

class A {
  method() {}
}

console.log(new A().method === A.prototype.method); // true

如果在类实例上调用以这两种方式之一定义的方法（通过.），根据如何的规则this当函数作为对象的方法被调用时被绑定，this在这两种情况下都将指向类实例：

class A {
  constructor() {
    this.methodOnInstance = () => this;
  }
  methodOnPrototype() { return this; }
}

const instance = new A();
console.log(
  instance.methodOnInstance() === instance.methodOnPrototype(), // true
  instance.methodOnPrototype() === instance // true
);

上面两个方法声明之间的一个主要区别是实例方法具有this always固定到类实例，而类（原型）方法没有（我们可以通过使用来更改它）函数.prototype.apply https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply or 函数.原型.调用 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call)

class A {
  constructor() {
    this.methodOnInstance = () => this;
  }
  methodOnPrototype() { return this; }
}

const instance = new A();
console.log(
  instance.methodOnInstance() === instance.methodOnPrototype(), // true
  instance.methodOnPrototype.call('new this') === 'new this' // true
);

一个常见的现象是this更改发生在事件处理程序中，事件处理程序调用传递给它的函数并将上下文绑定到发生事件的元素（因此覆盖this是被单击的元素或任何事件）

这种情况在 React 中也会发生（合成的 https://reactjs.org/docs/events.html) DOM 事件处理程序。

因此，如果我们希望我们的方法的上下文始终指向React组件的实例，我们可以使用实例方法。

另一种限制上下文但不使用需要 Babel 的特殊实例方法语法的方法是，通过使用绑定上下文从类（原型）方法创建一个新函数，直接创建一个实例方法（使用函数.原型.bind https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind):

class A {
  constructor() {
    this.methodOnInstance = this.methodOnPrototype.bind(this);
  }
  methodOnPrototype() { return this; }
}

const instance = new A();
console.log(
  instance.methodOnInstance() === instance.methodOnPrototype(), // true
  instance.methodOnPrototype() === instance // true
);

这使我们能够获得与使用特殊实例方法语法相同的结果，但使用当前可用的工具（ES2017 及以下版本）。

如果由于某种原因我们想要一个始终绑定到非类实例的方法，我们也可以这样做：

class A {
  constructor() {
    this.method = this.method.bind(console);
  }
  method() { return this; }
}

const instance = new A();
console.log(
  instance.method() === console // true
);