Javascript 为什么他们中的一些人；funcName（）；而其中一些则是"；funcName=（）=>&引用；？

当我们将前面的代码转换为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>
    )
  }
}

import React，{Component，PropTypes}来自'React'；
导出默认类秒表扩展组件{
状态={
跑步：错，
上一时间：0，
elapsedTime:0，
}
componentDidMount（）{
this.interval=setInterval（this.onTick）；
}
组件将卸载（）{
clearInterval（这个.interval）；
}
onStart=（）=>{
这是我的国家({
跑步：没错，
上一次时间：Date.now（），
});
}
顶部=（）=>{
这是我的国家({
跑步：错，
});
}
onReset=（）=>{
这是我的国家({
elapsedTime:0，
上一次时间：Date.now（），
});
}
onTick=（）=>{
if（this.state.running）{
var now=Date.now（）；
这是我的国家({
elapsedTime:this.state.elapsedTime+（现在-this.state.previousTime），
上一次时间：Date.now（），
});
}
}
render（）{
var秒=数学地板（this.state.elapsedTime/1000）；
返回(
秒表
{秒}
{this.state.running？
停止
:
开始
}
重置
)
}
}
JavaScript类中的

funcName（）

将向原型添加函数。这些函数将只存在一次，并附加到原型。如果没有类语法，您将按如下方式定义原型函数：

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

其他函数实际上是作为属性创建的，这些属性包含每个实例存在一次的匿名函数，并在实例化类时在构造函数中创建。这相当于在构造函数中创建它们，如下所示：

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

这样做的原因是，使用

=>

语法创建函数会导致函数永久绑定到每个实例的

this

值。因此，可以将它们传递给其他对象（例如设置为事件处理程序），当调用它们时，

此

将始终指向函数中的正确对象

---

这是一个好主意还是简单的不可读/太复杂可能是一个品味问题。

区别在于其中一个是有效的ES2105（

class

syntax），另一个不是。@NickParsons问题是为什么其中一些是箭头函数，而另一些是常规函数属性。在

类

上下文中存在差异：

funcName=（）=>{}

是一个。