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

我们来聊聊箭头函数（就是下面这个东西）！箭头函数的语法比传统的函数表达式更简洁，而且它们没有自己的 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(); // "匿名函数"

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

最后

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

法

为了理解箭头函数的语法，我们应该从逐步重构一个常规函数开始：

function square(a) { return a * a; }

我们首先重构函数声明以使用变量赋值：

const square = function (a) { return a * a; }

然后，我们可以将正则重构为箭头函数 function：

const square = (a) => { return a * a; }

如果只有一个参数，我们可以省略它周围的括号：

const square = a => { return a * a; }

如果函数是单个表达式，则可以省略花括号和return语句并使用隐式返回：

const square = a => a * a;

执行上下文

箭头函数和常规函数的主要区别在于执行上下文（即 的值this）。从技术上讲，经常提到的大多数其他差异要么源于这一差异，要么是它的副作用。

在常规函数中，this它是动态的，取决于函数的调用方式：

function simple() { return this; }
const object = {
  method() { return this; }
};
class Class {
  classMethod() { console.log(this); }
}
const instance = new Class();

simple();                   // `this` 指向全局对象
new simple();               // `this` 指向新创建的实例

object.method();            // `this` 指的是 `object`
simple.call(object);        // `this` 指的是 `object`

instance.classMethod();     // `this` 指向 `instance`
setTimeout(
  instance.classMethod, 0   // `this` 指向全局对象
);

与常规的箭头函数不同，箭头函数不定义自己的执行上下文，因此this箭头函数内部总是指的是词法this（即定义箭头函数的范围）。

const simple = () => this;
const object = {
  method: () => this
};
class Class {
  classMethod = () => { console.log(this); }
}
const instance = new Class();

simple();                   // `this` 指向全局对象
new simple();               // 未捕获的 TypeError：simple 不是构造函数
object.method();            //`this` 指的是全局对象
simple.call(object);        // `this` 指的是全局对象

instance.classMethod();     // `this` 指的是`instance`
setTimeout(
  instance.classMethod, 0   // `this` 指的是`instance`
);

正如您从这些示例中看到的那样，构造函数的工作方式因执行上下文及其解析方式而有所不同。与将抛出一个箭头函数相反，常规函数可以用作构造函数TypeError。

此外，箭头函数和常规函数在用于定义类方法时存在一些差异。当作为回调传递时，常规函数方法将以不同的执行上下文结束。这可以使用Function.prototype.bind()或使用不存在此问题的箭头函数来处理。

更多内容请访问：https://www.icoderoad.com