Javascript 类方法-使用哪种方法以及何时使用？

在类中定义方法似乎有两种不同的方法

class Foo {
    handleClick = e => {
        // handle click
    }
    // and
    handleHover(e) {
        // handle hover
    }
}

我的问题是这两者有什么区别

当传输时，它们给出了截然不同的结果：

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Foo = function () {
    function Foo() {
        _classCallCheck(this, Foo);

        this.handleClick = function (e) {}
        // handle click

        // and
        ;
    }

    _createClass(Foo, [{
        key: "handleHover",
        value: function handleHover(e) {
            // handle hover
        }
    }]);

    return Foo;
}();

var\u createClass=function（）{function defineProperties（target，props）{for（var i=0；i

但我似乎看不出有什么不同。这是一个有约束力的问题吗

谢谢

class Foo {
    handleClick = e => {
        // handle click
    }
}

不是ES6

与您的示例等效的ES5代码是

class Foo {
    constructor() {
        this.handleClick = e => {
            // handle click
        }
    }
    // and
    handleHover(e) {
        // handle hover
    }
}

function Foo() {
  this.handleClick = function(e) {
      // handle click
  }.bind(this);
}

Foo.prototype.handleHover = function(e) {
    // handle hover
}

与您的示例等效的ES6代码是

class Foo {
    constructor() {
        this.handleClick = e => {
            // handle click
        }
    }
    // and
    handleHover(e) {
        // handle hover
    }
}

function Foo() {
  this.handleClick = function(e) {
      // handle click
  }.bind(this);
}

Foo.prototype.handleHover = function(e) {
    // handle hover
}

因此，基本上，

handleClick

自动绑定到实例，这对事件处理程序很有用，但它的代价是为每个实例创建一个新函数

有关更多信息，请参阅

---

这只是箭头函数和函数表达式之间的区别。方法语法只是函数表达式的语法糖。明白了。谢谢我重新开始了这个问题，因为这个问题在这里并不适用。请注意，您的代码不是有效的ES6。它为ES的未来版本使用了一个功能建议。哦，很有趣。我没有注意到我在我的Babel REPL中勾选了第二阶段。解开它会抛出一个语法错误，这是有道理的。因此，它本质上是“自动绑定”，但在调用

new

时会创建一个新函数。现在说得通了，谢谢！请注意，“自动绑定”是使用箭头函数而不是使用“类字段”的结果。也就是说，

handleClick=function（）{}

将在构造函数中定义函数，但不会自动绑定。