なぜそれらのいくつかは "funcName（）"であり、いくつかは "funcName =（）=>"ですか？

Question

前のコードをES2015の構文に翻訳したとき、一部の関数が別の構文に変換されました。それらのうちのいくつかはfuncName()であり、そのうちのいくつかはfuncName =() =>です。違いは何ですか？

import React, { Component, PropTypes } from 'react'; 

export default class Stopwatch extends Component { 
    state = { 
     running: false, 
     previouseTime: 0, 
     elapsedTime: 0, 
    } 

    componentDidMount() { 
     this.interval = setInterval(this.onTick); 
    } 

    componentWillUnmount() { 
     clearInterval(this.interval); 
    } 

    onStart =() => { 
     this.setState({ 
     running: true, 
     previousTime: Date.now(), 
     }); 
    } 

    onStop =() => { 
     this.setState({ 
     running: false, 
     }); 
    } 

    onReset =() => { 
     this.setState({ 
     elapsedTime: 0, 
     previousTime: Date.now(), 
     }); 
    } 

    onTick =() => { 
     if (this.state.running) { 
     var now = Date.now(); 
     this.setState({ 
      elapsedTime: this.state.elapsedTime + (now - this.state.previousTime), 
      previousTime: Date.now(), 
     }); 
     } 
    } 

    render() { 
    var seconds = Math.floor(this.state.elapsedTime/1000); 
    return (
     <div className="stopwatch" > 
     <h2>Stopwatch</h2> 
     <div className="stopwatch-time"> {seconds} </div> 
     { this.state.running ? 
      <button onClick={this.onStop}>Stop</button> 
      : 
      <button onClick={this.onStart}>Start</button> 
     } 
     <button onClick={this.onReset}>Reset</button> 
     </div> 
    ) 
    } 
} 

Answer 1

funcName() JavaScriptクラスでは、プロトタイプに関数が追加されます。これらの関数は、プロトタイプに添付されて一度だけ存在します。次のようにプロトタイプ関数を定義するクラス構文なし：

Stopwatch.prototype.funcName = function() { /* ... */ }; 

他の機能は、実際には、各インスタンスごとに一度存在し、クラスをインスタンス化するときに、コンストラクタで作成された無名関数を含むプロパティとして作成されます。これは以下のようにコンストラクタでそれらを作成することと同じです：

は

class Stopwatch /* ... */ { 
    constructor() { 
     this.onStart =() => { /* ... */ }; 
    } 
} 

これを行う理由は、関数を作成する=>構文を使用して機能を永続的に各インスタンスのthis値にバインドされるようにすることです。したがって、他のもの（イベントハンドラとして設定されているものなど）に渡すことができ、呼び出されると、thisは常に関数内の正しいオブジェクトを指します。

これは良いアイデアであるのか、それとも簡単に読むことができないのか/あまりにもトリッキーなのかは多分味わいの問題です。