揭秘箭头函数和普通函数之间的本质区别 (揭秘箭头函数怎么用)

以下示例展示了词法作用域的差异：

// 普通函数
function outer() {const outerVariable = "outer variable";// 嵌套箭头函数const InnerArrow = () => {console.log(outerVariable); // 输出: "outer variable"};innerArrow();
}outer();

绑定

箭头函数和普通函数在绑定规则上也有所不同。普通函数中的 this 关键字绑定到函数本身，而箭头函数中的 this 则继承父作用域中的 this 值。这意味着箭头函数内的 this 始终指向其外层函数的 this 值。

以下示例展示了绑定规则的差异：

// 普通函数
function outer() {const thisValue = this;// 嵌套普通函数const innerNORMal = function() {console.log(this === thisValue); // 输出: True};// 嵌套箭头函数const innerArrow = () => {console.log(this === thisValue); // 输出: False};innerNormal();innerArrow();
}outer();

默认返回

箭头函数具有一个默认的显式返回。如果箭头函数只有一行表达式，它会自动返回该表达式的结果。普通函数则需要使用 return 关键字显式返回一个值。

以下示例展示了默认返回的差异：

// 箭头函数
const multiplyArrow = (a, b) => a  b;// 普通函数
function multiplyNormal(a, b) {return a  b;
}console.log(multiplyArrow(2, 3)); // 输出: 6
console.log(multiplyNormal(2, 3)); // 输出: 6

何时使用