剖析箭头函数与普通函数的异同，深入理解前端开发利器

2023-11-14 10:08:22

初识箭头函数

箭头函数，又称匿名函数或 lambda 表达式，是 ES6 中引入的一种新的函数语法。它使用箭头 (=>) 符号代替传统的 function ，并省略了大括号和 return 关键字。

// 普通函数
function add(a, b) {
  return a + b;
}

// 箭头函数
const add = (a, b) => a + b;

箭头函数与普通函数在语法上的差异显而易见。箭头函数更简洁，更易于阅读和理解。此外，箭头函数还具备一些独特的特性，使其在某些场景下更具优势。

箭头函数与普通函数的区别

词法作用域

箭头函数与普通函数在词法作用域方面存在着本质的区别。普通函数拥有自己的词法作用域，这意味着函数内部可以访问函数外部的变量，但函数外部无法访问函数内部的变量。而箭头函数没有自己的词法作用域，它继承了其父级作用域的词法作用域。
```
// 普通函数
function outer() {
  let a = 1;

  function inner() {
    console.log(a); // 1
  }

  inner();
}

// 箭头函数
const outer = () => {
  let a = 1;

  const inner = () => {
    console.log(a); // ReferenceError: a is not defined
  };

  inner();
};
```
在上面的示例中，普通函数 inner() 可以访问其父级作用域 outer() 中的变量 a，而箭头函数 inner() 则无法访问其父级作用域中的变量 a。

this

在普通函数中，this 关键字指向函数的调用者。而在箭头函数中，this 关键字始终指向箭头函数定义时的 this 值，而不是函数的调用者。

// 普通函数
function Person() {
  this.name = 'John';

  const sayName = function() {
    console.log(this.name); // John
  };

  sayName();
}

// 箭头函数
const Person = () => {
  this.name = 'John';

  const sayName = () => {
    console.log(this.name); // undefined
  };

  sayName();
};

在上面的示例中，普通函数 sayName() 中的 this 关键字指向 Person() 的实例，而箭头函数 sayName() 中的 this 关键字指向 undefined。

参数和返回值

箭头函数的参数和返回值的处理方式与普通函数有所不同。箭头函数的参数列表可以省略括号，如果箭头函数只有一个参数，则可以省略圆括号。此外，箭头函数的返回值也可以省略大括号和 return 关键字。
```
// 普通函数
function add(a, b) {
  return a + b;
}

// 箭头函数
const add = (a, b) => a + b;

// 普通函数
function double(n) {
  return n * 2;
}

// 箭头函数
const double = n => n * 2;
```
在上面的示例中，普通函数 add() 和 double() 使用传统的函数语法，而箭头函数 add() 和 double() 使用箭头函数语法。箭头函数 add() 和 double() 的参数列表省略了括号，箭头函数 double() 的返回值省略了大括号和 return 关键字。

箭头函数的应用场景

箭头函数在前端开发中有着广泛的应用场景。以下是一些常见的应用场景：

回调函数

箭头函数非常适合作为回调函数使用。因为箭头函数没有自己的词法作用域，所以它不会引入额外的作用域链。这使得箭头函数在处理回调函数时更加简洁高效。
```
// 普通函数
function handleClick(e) {
  console.log(e.target);
}

// 箭头函数
const handleClick = (e) => console.log(e.target);
```
在上面的示例中，普通函数 handleClick() 和箭头函数 handleClick() 都可以作为回调函数使用。然而，箭头函数 handleClick() 的语法更加简洁，更易于阅读和理解。
数组方法

箭头函数非常适合与数组方法结合使用。箭头函数可以作为数组方法的参数，也可以作为数组方法的返回值。
```
// 普通函数
const numbers = [1, 2, 3, 4, 5];

const doubledNumbers = numbers.map(function(n) {
  return n * 2;
});

// 箭头函数
const numbers = [1, 2, 3, 4, 5];

const doubledNumbers = numbers.map((n) => n * 2);
```
在上面的示例中，普通函数 map() 和箭头函数 map() 都可以用来对数组 numbers 进行映射操作。然而，箭头函数 map() 的语法更加简洁，更易于阅读和理解。
对象方法

箭头函数非常适合作为对象方法使用。箭头函数作为对象方法时，可以省略函数关键字和圆括号。
```
// 普通函数
const person = {
  name: 'John',
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

// 箭头函数
const person = {
  name: 'John',
  greet: () => console.log(`Hello, my name is ${this.name}`)
};
```
在上面的示例中，普通函数 greet() 和箭头函数 greet() 都可以作为对象 person 的方法。然而，箭头函数 greet() 的语法更加简洁，更易于阅读和理解。