1. 箭头函数与普通函数的区别
1.1 箭头函数的语法
ES6 中引入了箭头函数的新语法，其语法如下：
(param1, param2, …, paramN) => { statements }其中，param1, param2, …, paramN 表示函数的参数列表，statements 表示函数体。
1.2 箭头函数的特点
与普通函数相比，箭头函数具有以下特点：
- 箭头函数没有
this绑定，它会捕获其所在上下文的this值，作为自己的this值。 - 箭头函数没有
arguments对象，但可以使用rest参数来代替。 - 箭头函数不能用作构造函数，因为它们没有自己的
this值。 - 箭头函数没有
prototype属性。
1.3 普通函数的特点
普通函数具有以下特点：
- 普通函数有自己的
this值，它是在函数被调用时动态绑定的。 - 普通函数有
arguments对象，它可以用来获取函数的所有参数。 - 普通函数可以用作构造函数，因为它们有自己的
this值。 - 普通函数有
prototype属性，它可以用来定义函数的原型方法。
2. 箭头函数的应用场景
2.1 箭头函数作为回调函数
由于箭头函数没有自己的 this 值，它们非常适合作为回调函数。
-- -------------------- ---- ------- -- ---------- --------------------- - ------------------ -- ------ -- ------ -- ---------- ------------- -- - ------------------ -- ------ -- ------
2.2 箭头函数作为简单函数
当函数体只有一行代码时，可以使用箭头函数来简化代码。
// 普通函数
function add(a, b) {
return a + b;
}
// 箭头函数
const add = (a, b) => a + b;2.3 箭头函数作为方法
当箭头函数作为对象的方法时，它们的 this 值会被绑定到对象本身，而不是调用对象的上下文。
-- -------------------- ---- -------
----- ------ - -
----- ------
------ -- -- -
---------------- -- ---- -- ---------------- -- --- -- ---- -- ----------
--
---------- -
------------------- -- ---- -- ---------------- -- ------ -- ---- -- ----
-
--
---------------
------------------2.4 箭头函数作为 Promise 的回调函数
当箭头函数作为 Promise 的回调函数时，它们可以访问外部的变量，而不需要使用 bind 方法来绑定 this 值。
const promise = new Promise((resolve, reject) => {
const data = 'Hello World';
resolve(data);
});
promise.then(data => {
console.log(data); // Hello World
});3. 总结
箭头函数与普通函数之间的区别主要在于它们的 this 值和 arguments 对象。箭头函数没有自己的 this 值，它们会捕获其所在上下文的 this 值，作为自己的 this 值。箭头函数没有 arguments 对象，但可以使用 rest 参数来代替。由于箭头函数具有简洁的语法和适合作为回调函数的特点，它们在实际开发中得到了广泛应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c040b7add4f0e0ffa064bb