记录下对箭头函数的理解

箭头函数是在 ES6 中添加的，它的存在是为了解决普通函数遗留下来的一些问题（函数的二义性）

与普通函数相比，箭头函数主要解决（丰富）了以下内容：

this指向

// 普通函数中，this 的值取决于函数如何被调用（global、词法作用域、块级作用域）
// 在非严格模式下，当一个函数的this访问为undefined或null时，会触发this替换机制，将该this替换为globalThis（window）
function fn() {
  console.log(this.name);
}
const obj = { name: "xiaoming" };
obj.fn = fn;
obj.fn(); // 输出 'xiaoming'，this指向被访问对象obj

// this 的值总是根据调用函数的方式而改变，即使函数是在创建对象时定义的
const obj1 = {
  name: "obj1",
  getThis() {
    return this;
  },
};
const obj2 = { name: "obj2" };

obj2.getThis = obj1.getThis;
console.log(obj2.getThis()); // 输出obj2，this发生改变

// 箭头函数，this始终指向它的调用者或者说是它的执行上下文
const fn = () => console.log(this.name);
window.name = "global";
const obj = { name: "xiaohong" };
obj.fn = fn;
obj.fn(); // 输出 'global'，this 值取决于函数运行的执行上下文

args剩余参数

  • 在箭头函数中，普通函数结构中的{arguments}将被替换为函数参数的(...args)

无prototype

  • 箭头函数中没有prototype属性，意味着不能将箭头函数用于原型链的创建，这进一步明确了箭头函数的用途，即不用于构造类或对象。
const arrFn = () => {};

console.log(arrFn.prototype); //输出 undefined

无效new

  • 箭头函数无法像普通函数那样通过关键字new来实例化方法，因为它不再作为构造函数所使用，本质上设计为轻量级的函数表达式，适合用作小型函数和回调，不用于创建复杂对象
  • 构造函数在ES6中被替换成了class关键字
// 普通函数存在的问题，未知的使用情况
function a() {}
a(); // ✅
new a(); // ✅

// 在箭头函数中，无法被new实例化
const b = () => {};
b(); // ✅
new b(); // ❌，报错，函数不是一个构造函数

// ES6中的构造函数
class A {}
A(); // ❌，报错，需要用new来实例化构造函数
new A(); // ✅

代码的简洁性，更加简洁易读的函数定义，减少冗余代码

  • 更为精妙的处理函数可以通过简写箭头函数的方式来让你的代码更加的美观
// bad
function computed(x, y, z) {
  return x > y ? x - z : y + z;
}
// array function, just need one line
const computed = (x, y, z) => (x > y ? x - z : y + z);

更好的编写体验

  • 某种情况下特别适用于编写短小、内联的函数，如数组的map、filter、reduce等
const arr = [1, 2, 3, 4, 5].map((n) => n * 10); // [10,20,30,40,50]
const arr2 = [1, 2, 3, 4, 5].reduce((pre, next) => pre + next); //15