Question

我想知道Name（）{}和函数NAME（）{有什么区别 }和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函数，但随后您将无法理解以下代码块（由{{1}分隔） }）：

{}

第二个是将Arrow Function分配给变量，并且在语法有效的情况下，the use of this within an Arrow Function不会产生与函数声明或函数表达式相同的结果：

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

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

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

以下是Function Expression（分配给另一个项目的匿名函数）。表达式的函数部分未吊起。：

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

Answer 2

为澄清起见，我加两分钱。

您的第一个示例

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

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

是有效的语法，用于定义ES6类方法。这是一个例子：

class MyAwesomeClass {
  constructor() {
    this.name="Isaac"  
  }
  
  printName() {
     console.log(this.name)  
  }
}

let m = new MyAwesomeClass();

m.printName();

老实说，不知道为什么有这么多人很快说它是“无效的JavaScript语法”，但是在某些情况下并不能解释它是可以接受的语法。

Answer 3

我认为这可能是您潜在的话题。假设我们有一个点击事件：

给出此html：

<button id="button">click me</button>

您可以像这样处理click事件：

 document.getElementById('button').addEventListener('click', onClickHandler)

假设您在第一个示例中使用了function关键字，它看起来像这样：

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

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

在此示例中，this实际上是您单击的dom元素。

在第二个示例中：

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

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

处理程序利用箭头功能，该功能具有词法边界this。这意味着this或上下文的值绑定到原始上下文。自从您说“这可行”以来，它就是您想要的，而不是按钮（又称为dom元素）。

“ Name（）{}”和“ function Name（）{}”之间有什么区别？

3 个答案: