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

我有以下代码

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给出以下错误


  未捕获的TypeError无法读取未定义的属性值


触发表单时

但是，如果我将其更改为：

  registerUser = e => {}

它似乎有效。为什么呢
感谢您的回答。

最佳答案

因为后者的语法创建了一个箭头函数，该箭头函数通常像箭头函数那样绑定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;
})();

关于javascript - 方法名称(arg){}≠方法名称= arg => {}，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51023416/