JavaScript新手求教：两段箭头函数写法的执行差异是什么？

让我帮你拆解这两段代码的本质区别，其实核心是调用逻辑的不同，而且原代码还藏着一个会报错的坑：

先明确clicked函数的返回值 #

首先看你的clicked箭头函数：

clicked = () => { console.log("test"); }

这个函数执行时会打印test，但它没有显式返回任何值，所以默认返回undefined。这是理解差异的关键前提。

原代码的执行逻辑（会报错） #

onClickDoSmth = () => { let a = this.clicked(); a(); }

这段代码做了两件事：

1. 调用this.clicked()：执行函数，打印test，同时把返回的undefined赋值给变量a
2. 尝试执行a()：也就是试图调用undefined——这会直接抛出**TypeError: a is not a function**的错误，因为undefined不是可调用的函数类型

替换后代码的执行逻辑（正常工作） #

onClickDoSmth = () => { this.clicked(); }

这段代码只做了一件事：
调用this.clicked()，执行函数里的console.log("test")，完成后就结束了。它不会去处理clicked的返回值，所以不会触发任何错误，能正常打印test。

额外补充：什么时候原代码是合理的？ #

如果你的clicked函数是返回一个可调用的函数，比如：

clicked = () => { 
  return () => console.log("test"); 
}

那原代码的逻辑才成立：先获取返回的函数，再执行它。但就你当前的clicked函数写法来说，替换后的代码才是正确的选择。

内容的提问来源于stack exchange，提问作者intriguedcapy