JavaScript箭头函数与普通函数的区别示例详解

JavaScript中有两种定义函数的方式：普通函数和箭头函数。它们在语法和用法上有一些差异。在本文中，我们将通过两个示例来详细介绍箭头函数和普通函数之间的区别。

示例1：this 关键字

一个函数的 this 值取决于调用方式。 在普通函数中，this 关键字根据函数被调用的方式动态绑定。而在箭头函数中，它会捕获它所在上下文的 this 值，而不是动态绑定。

const person = {
  name: "Mark",
  sayName: function() {
    console.log(`My name is ${this.name}.`);
  }
};

// 在箭头函数中，this绑定到外层上下文，即 person。
const person2 = {
  name: "John",
  sayName: () => {
    console.log(`My name is ${this.name}.`); // 此处输出 My name is undefined.
  }
}

person.sayName();    // 输出 My name is Mark.
person2.sayName();   // 输出 My name is undefined.

在上面的示例中，普通函数和箭头函数的定义方式略有不同。普通函数使用函数表达式定义。而箭头函数使用简洁函数语法定义（ES6的新特性）。

在调用 person.sayName() 时，this 关键字指向定义该函数的对象 person。因此，这个方法输出的是“我的名字是 Mark”。

然而，当我们调用 person2.sayName() 时，this关键字指向箭头函数所在的上下文。箭头函数被定义在全局作用域中，而不是在person2对象中。因此，this 关键字无法获得 person2 对象中的属性值。它输出的是“我的名字是未定义”。

这个示例说明了箭头函数和普通函数在 this 关键字上的不同。箭头函数的 this 值在定义时被捕获，在整个函数生命周期内保持不变。而普通函数的 this 值则在函数执行时动态绑定。

示例2：返回值

在普通函数中，我们可以使用return语句来返回值。而在箭头函数中，则可以使用简洁函数语法返回值。

// 普通函数使用 `return` 关键字返回值。
function add(a, b) {
  return a + b;
}

// 箭头函数可以使用简洁函数语法返回值。
const add = (a, b) => a + b;

上面的代码示例定义了一个 箭头函数 和 一个 普通函数 。它们都能够完成相同的任务：计算两个数的和。

注意到箭头函数的语法更加紧凑。它使用了简洁函数语法来直接返回计算结果。而普通函数则使用了return关键字明确的返回值。

另一个关键的区别是，箭头函数只能返回单个表达式的值。而普通函数可以包含多个语句，并使用return语句返回值。

总结

在这篇文章中，我们通过两个示例详细介绍了箭头函数和普通函数之间的差异。它们在语法和用法上都有所不同：

• 箭头函数使用简洁函数语法定义。
• 箭头函数捕获它们所在上下文的 this 值，而不是动态绑定。
• 箭头函数可以使用简洁函数语法返回值，而普通函数则使用 return 关键字。
• 箭头函数只能返回单个表达式的值，而普通函数可以包含多个语句。

在使用函数时，我们应该根据具体的情况选择哪种函数来使用。如果需要捕获上下文的 this 值，则应该使用箭头函数。如果需要返回多个语句组成的复杂计算结果，则应该使用普通函数。