函数就是JS的灵魂：匿名函数和箭头函数对比解析

函数是JavaScript的灵魂

函数是JavaScript的灵魂，它是JavaScript语言的基本构建块之一，用于将代码组织成可重用的模块，以便在程序中多次调用。函数可以接受参数，并返回一个值或执行某些操作。

匿名函数和箭头函数的由来

在JavaScript中，函数可以分为两种：命名函数和匿名函数。命名函数是指具有名称的函数，而匿名函数是指不具有名称的函数。箭头函数是ES6中引入的一种新的函数语法，它可以看作是匿名函数的简写形式。

匿名函数和箭头函数的区别

虽然都是匿名函数，但是箭头函数相比匿名函数有更多限制，比如没有自己的this绑定，不能被new调用，也没有arguments对象。

没有自己的this绑定

箭头函数没有自己的this绑定，这意味着箭头函数中的this始终指向其外层函数的this。这一点与普通函数不同，普通函数中的this指向函数本身。

function Person() {
  this.name = "John";
  this.getName = function() {
    return this.name;
  };
}

const person = new Person();
console.log(person.getName()); // "John"

const arrowPerson = () => {
  return this.name;
};

const arrowPerson2 = {
  name: "Jane",
  getName: () => {
    return this.name;
  }
};

console.log(arrowPerson()); // undefined
console.log(arrowPerson2.getName()); // "Jane"

不能被new调用

箭头函数不能被new调用，这意味着箭头函数不能被用作构造函数。这一点与普通函数不同，普通函数可以被new调用，并创建一个新的对象。

function Person() {
  this.name = "John";
}

const person = new Person();
console.log(person.name); // "John"

const arrowPerson = () => {
  this.name = "Jane";
};

const arrowPerson2 = new arrowPerson();
console.log(arrowPerson2.name); // undefined

没有arguments对象

箭头函数没有arguments对象，这意味着箭头函数不能访问函数的参数。这一点与普通函数不同，普通函数可以使用arguments对象来访问函数的参数。

function Person() {
  console.log(arguments); // [ "John", "Doe" ]
}

const person = new Person("John", "Doe");

const arrowPerson = () => {
  console.log(arguments); // undefined
};

const arrowPerson2 = (name, age) => {
  console.log(arguments); // undefined
};

arrowPerson();
arrowPerson2("John", "Doe");

何时使用箭头函数？

箭头函数非常适合用作回调函数，因为它们没有自己的this绑定，而且不能被new调用。这使得它们非常适合用在事件处理程序和定时器中。

箭头函数也适合用作简短的匿名函数，因为它们的语法比普通函数更简洁。

何时使用匿名函数？

匿名函数通常用于需要立即执行的函数，或者用于需要传递给其他函数的函数。

匿名函数也用于需要创建私有函数的情况。私有函数是指只能在创建它们的函数内部访问的函数。

总结

匿名函数和箭头函数都是JavaScript中的函数，但它们之间存在一些差异。匿名函数没有名称，而箭头函数是匿名函数的简写形式。箭头函数没有自己的this绑定，不能被new调用，也没有arguments对象。箭头函数非常适合用作回调函数和简短的匿名函数，而匿名函数通常用于需要立即执行的函数，或者用于需要传递给其他函数的函数。