javascript - "Name () { }"和 "function Name() { }"之间有什么区别？

Question

我想知道 Name(){ } 和 function NAME() { 之间有什么区别 } 和名称 = () => { }?

当我使用Name(){ }时，出现错误，然后我将其修改为Name = () => { }，然后就成功了。

//this doesn't work.
onClickHandler(){
 let nextVersion = parseInt(this.state.version, 10) + 1

 this.setState({ version: nextVersion.toFixed(1)})
}


//this works.
onClickHandler = () => {
 let nextVersion = parseInt(this.state.version, 10) + 1

 this.setState({ version: nextVersion.toFixed(1)})
}

Answer 1

第一个示例的语法无效。它不会定义或调用任何内容，并且会导致错误，因为 JavaScript 运行时会认为您想要调用 onClickHandler函数，但无法理解以下 block (由 {} 分隔)的用途:

onClickHandler(){
 let nextVersion = parseInt(this.state.version, 10) + 1

 this.setState({ version: nextVersion.toFixed(1)})
}

第二个是 Arrow Function 的变量赋值到变量，并且当语法有效时， the use of this within an Arrow Function不会产生与函数声明或函数表达式相同的结果:

let onClickHandler = () => {
 let nextVersion = parseInt(this.state.version, 10) + 1

 this.setState({ version: nextVersion.toFixed(1)})
}

以下是Function Declaration 。函数声明为hoisted ，可以作为数据传递，并且可以作为函数或 constructor functions 调用。 :

function onClickHandler() {
 let nextVersion = parseInt(this.state.version, 10) + 1
 this.setState({ version: nextVersion.toFixed(1)})
}

以下是Function Expression (分配给另一个项目的匿名函数)。表达式的函数部分未提升。:

let onClickHandler = function () {
 let nextVersion = parseInt(this.state.version, 10) + 1
 this.setState({ version: nextVersion.toFixed(1)})
}