大家好，很高兴又见面了，我是姜茶的编程笔记，我们一起学习前端相关领域技术，共同进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力

我们来聊聊箭头函数（就是下面这个东西）！箭头函数的语法比传统的函数表达式更简洁，而且它们没有自己的 this、arguments、super 或 new.target。它们非常适合用在需要匿名函数的地方，同时不能作为构造函数使用。

// 当只有一个参数时，圆括号不是必须的
(singleParam) => { statements }
singleParam => { statements }

// 没有参数的函数必须加圆括号
() => { statements }

箭头函数有两个主要优点：

1?? 语法更简洁

2?? 不会绑定 this

切入正题【特点】

没有自己的 this

箭头函数不会创建自己的 this，它只会继承外层作用域的 this。

function Person() {
 this.age = 0;

 setInterval(() => {
  // this 正确地指向 p 实例
  console.log(this === p); // true
  this.age++;
 }, 1000);
}

var p = new Person();

与严格模式的关系

由于 this 是词法绑定的，严格模式中与 this 相关的规则将被忽略。

var f = () => { 'use strict'; return this; };
f() === window; // 或 global

通过 call、apply 或 bind 调用

因为箭头函数没有自己的 this，使用这些方法调用时只能传递参数，它们的第一个参数 this 会被忽略。

let adder = {
 base: 1,
 add: function (a) {
  console.log(this === adder); // true
  let f = (v) => v + this.base;
  return f(a);
 },
 addThruCall: function (a) {
  let f = (v) => {
   console.log(this === adder); // true
   console.log(`v 的值是 ${v}，this.base 的值是 ${this.base}`); // 'v 的值是 1，this.base 的值是 1'
   return v + this.base;
  };
  let b = { base: 3 };
  // call() 方法不能绑定 this 为 b 对象，第一个参数 b 被忽略了
  return f.call(b, a);
 }
};

console.log(adder.add(1)); // 输出 2
console.log(adder.addThruCall(1)); // 输出 2

使用箭头函数作为方法

箭头函数没有 this 绑定。

"use strict";
var obj = {
 i: 10,
 b: () => console.log(this.i, this), // undefined, Window{...}
 c: function () {
  console.log(this.i, this); // 10, Object {...}
 }
};
obj.b();
obj.c();

使用 new 操作符

箭头函数不能用作构造函数，用 new 调用会抛出错误。

var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor

作为匿名函数

ES6 的箭头函数表达式是匿名函数的一种简写方式：

// 匿名函数
let show = function () {
    console.log("匿名函数")
};
show(); // "匿名函数"

let show1 = () => console.log("匿名函数");
show1(); // "匿名函数"

不过，箭头函数和传统匿名函数在实际操作中还是有一些区别的。

最后

如果你有任何问题或建议，欢迎在评论区留言交流！祝你编程愉快！