JavaScript实际开发中应优先使用哪种函数声明写法风格？

注：你示例代码中的arugments为拼写错误，正确写法是arguments

四种函数写法的核心差异 #

1. 匿名函数表达式 #

var sayHello = function() {
  console.log("hello")
  console.log(arguments)// 可正常使用
  console.log(this)// 可正常使用
}

• 本质是变量赋值操作，没有声明提升特性，必须在定义之后才能调用，提前调用会报未定义错误
• 函数本身无名称，调试时堆栈追踪不会显示函数名，排查问题难度稍高
• 拥有独立的this指向，this值由调用方式决定，支持arguments对象获取所有入参

2. 函数声明 #

function sayhello() {
  console.log("hello")
  console.log(arguments)// 可正常使用
  console.log(this)// 可正常使用
}

• 拥有声明提升特性，不管写在当前作用域的任意位置，都可以在整个作用域内提前调用
• 自带明确函数名，调试时堆栈信息清晰，排查问题效率更高
• 同样拥有独立this指向，支持arguments对象
• 注意不要在if/for等块级作用域内写函数声明，不同JS引擎的解析规则不一致，容易触发兼容性问题

3. 具名函数表达式 #

var SayHello = function f() {
  console.log("hello")
  console.log(arguments)// 可正常使用
  console.log(this)// 可正常使用
}

• 本质还是函数表达式，无声明提升，必须在定义后调用
• 函数内部可以通过名称f递归调用自身，不需要依赖外部变量名，且外部作用域访问不到f，不会污染命名空间
• 调试时堆栈会显示函数名f，比匿名函数表达式好调试
• 同样拥有独立this指向，支持arguments对象

4. 箭头函数 #

var SayHellO = () =>{  
   console.log(arguments)// 无法使用
  console.log(this)// 可正常使用
}

• ES6新增的语法糖，本质是匿名函数表达式，无声明提升
• 没有自己的this，this指向定义时所在外层作用域的this，不会随调用方式改变，不需要额外做bind(this)操作
• 不支持arguments对象，要获取入参建议使用剩余参数语法...args
• 不能作为构造函数使用，无法用new调用，没有prototype属性

实际项目的选用建议 #

• 全局/模块级的公共工具函数优先用函数声明，可以利用声明提升特性把工具函数统一放在文件底部，核心逻辑放在顶部，代码可读性更高
• 回调函数、短时使用的局部函数优先用箭头函数，比如数组遍历回调、框架组件的事件回调，代码更简洁，还能避免this指向错乱问题
• 需要递归的函数表达式可以选用具名函数表达式，避免依赖外部变量导致递归异常
• 尽量不要用匿名函数表达式，调试成本太高，要么用函数声明、要么用箭头函数、要么用具名函数表达式

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