家好，很高興又見面了，我是姜茶的編程筆記，我們一起學習前端相關領域技術，共同進步，也歡迎大家關注、點贊、收藏、轉發，您的支持是我不斷創作的動力

我們來聊聊箭頭函數（就是下面這個東西）！箭頭函數的語法比傳統的函數表達式更簡潔，而且它們沒有自己的 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