javascript - 方法名称(arg) {} ≠ 方法名称 = arg =>{}

Question

我有以下代码

import React, { Component } from "react";
import { Accounts } from "meteor/accounts-base";

export default class RegisterForm extends Component {
  registerUser(e) {
    e.preventDefault();
    Accounts.createUser(
      {
        email: this.email.value,
        password: this.password.value
      },
      error => {
        console.log(error);
      }
    );
  };

  render() {
    return (
      <form onSubmit={this.registerUser}>
        <input type="email" ref={input => (this.email = input)} />
        <input type="password" ref={input => (this.password = input)} />
        <button type="submit">Register User</button>
      </form>
    );
  }
}

不知何故，函数registerUser给出了以下错误

Uncaught TypeError Cannot read property value of undefined

当表单被触发时

但是如果我将其更改为:

  registerUser = e => {}

这似乎有效。为什么 ？感谢您的回答。

Answer 1

因为后一种语法创建了一个箭头函数，它像通常的箭头函数一样绑定(bind) this 。

前一种语法只是在类中创建一个“裸”函数。

class X {
  f() {
    console.log(this);
  }
  g = () => {
    console.log(this); 
  }
}

(大致)转换为

var X = (function() {
  function X() {
    var _this = this;

    this.g = function() {
      console.log(_this);
    };
  }

  X.prototype.f = function f() {
    console.log(this);
  };

  return X;
})();