JavaScript中命名函数、匿名函数与箭头函数的核心区别详解

函数定义与调用基础

命名函数是指在定义时明确指定了函数名称的函数，例如 function abs(x){}。匿名函数则是仅使用 function 关键字，未指定具体名称的函数，如 function(){}。ES6标准引入了箭头函数（Arrow Function），它表面上类似于匿名函数，但简化了定义语法。这三者之间存在哪些关键区别？

1 命名函数与匿名函数的区别

主要区别在于调用方式：匿名函数必须先将函数引用赋值给变量（如 let a），再通过该变量进行调用；而命名函数由于拥有明确的名称，可以直接使用函数名进行调用。

命名函数的返回值即为其函数体中的返回值，例如 abs(x) 返回 number 类型。调用时直接使用 abs(6) 即可，逻辑直观易懂。

function abs(x){
 if(x>=0){
  return x;
 }else{
  return -x;
 }
}

对于匿名函数，虽然未显式指定名称，但上述示例中 abs 被赋值为该匿名函数的引用，因此使用时仍可通过 abs(-3) 直接调用，实现与命名函数类似的调用效果。

let abs=function(x){ 
 if(x>=0){
  return x;
 }else{
  return -x;
 }
}

箭头函数的语法格式

2 箭头函数

ES6标准新增的箭头函数（Arrow Function）因其定义语法使用箭头符号而得名。它在形式上等同于匿名函数，同时简化了函数的定义过程。

箭头函数主要有两种格式：一种是仅包含单个表达式的简写形式，此时可以省略花括号 { ... } 和 return 关键字。

x => x * x

上述简写形式的箭头函数等价于一个标准的匿名函数。

function (x) {
 return x * x;
}

另一种格式包含多条语句，此时必须保留花括号 { ... } 和 return 关键字。

(x,y) => {
 if (x > 0) {
  return x + y;
 }
 else {
  return -x + y;
 }
}

箭头函数的this指向机制

3 箭头函数与匿名函数的不同

虽然箭头函数看似是匿名函数的简写，但两者存在显著差异：箭头函数内部的 this 绑定遵循词法作用域，由定义时的上下文决定。

调用函数 obj1.getAge(2017) 和调用 obj2.getAge(2017) 是否会得到相同的结果？

在 obj1 中，fn 函数由于 JavaScript 传统函数对 this 绑定的处理方式，无法获得预期结果，此时 this.birth 指向 window 或 undefined。

而在 obj2 中，fn 函数采用箭头函数定义，彻底解决了 this 指向问题。箭头函数的 this 始终指向词法作用域，即外层调用者 obj2。

var obj1 = {
 birth: 1990,
 getAge: function (year) { 
  let fn=function(y){
   return y - this.birth; // this指向window或undefined
  }; 
  return fn(year); 
 }
};
var obj2 = {
 birth: 1990,
 getAge: function (year) {
  var fn = (y) => y - this.birth; // this.birth为1990
  return fn(year);
 }
};

4 总结

与命名函数相比，匿名函数需要将函数引用赋值给变量后再调用；与匿名函数相比，箭头函数修正了 this 的指向问题，使其始终指向词法作用域。

以上介绍了JavaScript中命名函数、匿名函数及箭头函数的核心区别，希望有所帮助。如有疑问，欢迎留言交流。