【JavaScript】箭头函数

具体讲解

之前写 this 的指向时就提到过箭头函数，但是由于其比较复杂，还是单独开一篇来讲箭头函数。

箭头函数，箭头函数不能作为构造函数，没有原型 prototype，不能 new。

在箭头函数中，this 关键字指向的是外层函数定义时所在的对象，⽽不是执⾏时所在的对象。这个特性有助于避免 this 的指向问题，使得代码更加简洁易读。

let obj = {
  fn: function () {
    console.log("我是普通函数", this === obj); // true
    return () => {
      console.log("我是箭头函数", this === obj); // true
    };
  },
};
obj.fn()() 

let obj = {
  fn: () => {
    console.log(this === window) // true
    console.log(globalThis)
  },
};
obj.fn(); 

之所以设计箭头函数，仅仅是为了实现⼀种简洁的函数定义语法，⽆需考虑与函数（对象）相关的东⻄，所以箭头函数没有原型，即没有 prototype 属性，也没有相关的 super、new.target，没有 arguments 对象 等。

箭头函数没有⾃⼰的 arguments 对象，所以⽆法通过它获取参数。如果要获取，可以⽤ rest 参数代替：let arguments = (…args) => args;。与 this、 super、new.target ⼀样，arguments 的值由最近⼀层⾮箭头函数决定：

不能通过 new 关键字调⽤：JS 的函数有两个内部⽅法：[[Call]] 和 [[Construct]]。当通过 new 调⽤普通函数时，执⾏ [[Construct]] ⽅法，创建⼀个实例对象，然后再执⾏函数体，将 this 绑定到实例上。当直接调⽤的时候，执⾏ [[Call]] ⽅法，直接执⾏函数体。⽽由于箭头函数并没有 [[Construct]] ⽅法，不能被⽤作构造函数，如果通过 new 的⽅式调⽤，会报错。

箭头函数不绑定arguments，取⽽代之⽤rest参数解决，同时没有super和new.target。箭头函数没有arguments、super、new.target的绑定，这些值由外围最近⼀层⾮箭头函数决定。

这个函数会报错，在浏览器环境下：

// let f = () => console.log(arguments);
// //报错
// f(); // arguments is not defined

下面箭头函数不会报错，因为 arguments 是外面函数的：

function fn() {
  let f = () => {
    console.log(arguments)
  }
  f();
}
fn(1, 2, 3) // [1,2,3]

箭头函数可以通过拓展运算符获取传⼊的参数。

当对箭头函数使⽤call或apply⽅法时，只会传⼊参数并调⽤函数，并不会改变箭头函数中this的指向。 当对箭头函数使⽤bind⽅法时，只会返回⼀个预设参数的新函数，并不会改变这个新函数的this指向。

window.name = "window_name";
let f1 = function () {
  return this.name;
};
let f2 = () => this.name;
let obj = { name: "obj_name" };
console.log(f1.call(obj)); // obj_name
console.log(f2.call(obj)); // window_name
console.log(f1.apply(obj)); // obj_name
console.log(f2.apply(obj)); // window_name
console.log(f1.bind(obj)()); // obj_name
console.log(f2.bind(obj)()); // window_name

总结

1. 相⽐普通函数，箭头函数有更加简洁的语法
2. 箭头函数不绑定this，会捕获其所在上下⽂的this，作为⾃⼰的this
3. 箭头函数不绑定arguments，取⽽代之⽤rest参数解决，同时没有super和new.target
4. 使⽤call,apply,bind并不会改变箭头函数中的this指向
5. 箭头函数没有原型对象prototype这个属性