クラスメソッド - どちらを使用するのか？

Question

クラス内にメソッドを定義する方法は2つあります。

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

私の質問は2つの違いは何ですか？ transpiledとき

、彼らは明らかに異なる結果を与える：

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; 
}(); 

をしかし、私は違いが何であるかを見分けるように見えることはできません。それは拘束力のある問題ですか？

ありがとうございます！

Answer 1

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

はES6ではありません。 It's a proposal for a future version of ES。

あなたの一例に相当ES5コードが

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

だろうし、あなたの一例に相当ES6コードは、したがって、基本的​​は、インスタンスにautoboundさ

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

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

、役立つことができだろうイベントハンドラの場合は、すべてのインスタンスに対して新しい関数を作成することになります。詳細については

は、それは矢印機能と機能発現の間だけの違いだ

• Use of 'prototype' vs. 'this' in JavaScript?
• How to access the correct `this` context inside a callback?