「箭頭功能」和「功能」是否等效/可互換？

ES2015中的箭頭函數提供了更簡潔的語法。

• 我如今能夠用箭頭函數替換全部函數聲明/表達式嗎？
• 我要注意什麼？

例子：

構造函數

function User(name) {
  this.name = name;
}

// vs

const User = name => {
  this.name = name;
};

原型方法

User.prototype.getName = function() {
  return this.name;
};

// vs

User.prototype.getName = () => this.name;

對象（文字）方法

const obj = {
  getName: function() {
    // ...
  }
};

// vs

const obj = {
  getName: () => {
    // ...
  }
};

回呼

setTimeout(function() {
  // ...
}, 500);

// vs

setTimeout(() => {
  // ...
}, 500);

可變函數

function sum() {
  let args = [].slice.call(arguments);
  // ...
}

// vs
const sum = (...args) => {
  // ...
};

---

#1樓

tl; dr： 不！ 箭頭函數和函數聲明/表達式不等效，不能盲目替換。
若是您要替換的函數未使用this ， arguments而且未使用new arguments ，則爲yes。

---

如此頻繁： 這取決於 。 箭頭函數的行爲與函數聲明/表達式的行爲不一樣，所以讓咱們首先看一下它們之間的區別：

1.詞彙this和arguments

箭頭函數沒有本身的this或arguments綁定。 相反，這些標識符像任何其餘變量同樣在詞法範圍內解析。 這意味着在arrow函數中， this和arguments指的是定義 arrow函數的環境中的this和arguments的值（即arrow函數的「外部」）：

// Example using a function expression function createObject() { console.log('Inside `createObject`:', this.foo); return { foo: 42, bar: function() { console.log('Inside `bar`:', this.foo); }, }; } createObject.call({foo: 21}).bar(); // override `this` inside createObject

// Example using a arrow function function createObject() { console.log('Inside `createObject`:', this.foo); return { foo: 42, bar: () => console.log('Inside `bar`:', this.foo), }; } createObject.call({foo: 21}).bar(); // override `this` inside createObject

在函數表達式的狀況下， this是指在createObject內部建立的對象。 在箭頭功能的狀況下， this指的是this的createObject自己。

若是須要訪問當前環境的this ，這將使箭頭功能有用：

// currently common pattern
var that = this;
getData(function(data) {
  that.data = data;
});

// better alternative with arrow functions
getData(data => {
  this.data = data;
});

請注意 ，這也意味着這是不可能的設置箭頭的功能是this用.bind或.call 。

若是你不是很熟悉this ，能夠閱讀

• MDN-此
• YDKJS-此和對象原型

2.箭頭函數不能用new調用

ES2015區分了可調用的功能和可構造的功能。 若是一個函數是可構造的，則可使用new ，即new User()來調用它。 若是一個函數是可調用的，則能夠在不使用new函數的狀況下對其進行調用（即正常的函數調用）。

經過函數聲明/表達式建立的函數是可構造的和可調用的。
箭頭函數（和方法）只能調用。 class構造函數只能構造。

若是您試圖調用不可調用的函數或構造一個不可構造的函數，則會出現運行時錯誤。

---

知道了這一點，咱們能夠陳述如下內容。

可更換的：

• 不使用this或arguments 。
• 與.bind(this)一塊兒使用的函數

不可更換：

• 構造函數
• 添加到原型的函數/方法（由於他們一般使用this ）
• 可變arguments函數（若是它們使用arguments （請參見下文））

---

讓咱們使用您的示例仔細看一下：

構造函數

這將沒法正常工做，由於沒法使用new調用箭頭函數。 繼續使用函數聲明/表達式或使用class 。

原型方法

頗有可能不是，由於原型方法一般使用this來訪問實例。 若是他們不使用this ，那麼你就能夠取代它。 可是，若是您主要關心簡潔的語法，請使用class及其簡潔的方法語法：

class User {
  constructor(name) {
    this.name = name;
  }

  getName() {
    return this.name;
  }
}

對象方法

對於對象文字中的方法相似。 若是方法要經過this引用對象自己，請繼續使用函數表達式，或使用新的方法語法：

const obj = {
  getName() {
    // ...
  },
};

回呼

這取決於。 若是您要別名外部this或使用.bind(this) ，則絕對應該替換它：

// old
setTimeout(function() {
  // ...
}.bind(this), 500);

// new
setTimeout(() => {
  // ...
}, 500);

可是：若是調用回調的代碼將事件顯式地this值設置爲特定值（在事件處理程序中，尤爲是在jQuery中），而且回調使用this （或arguments ）， 則不能使用箭頭函數！

可變函數

因爲箭頭函數沒有本身的arguments ，所以不能簡單地將其替換爲箭頭函數。 可是，ES2015引入了使用arguments的替代方法： rest參數 。

// old
function sum() {
  let args = [].slice.call(arguments);
  // ...
}

// new
const sum = (...args) => {
  // ...
};

---

相關問題：

• 何時應該在ECMAScript 6中使用Arrow函數？
• ES6箭頭函數是否有本身的參數？
• ES6箭頭功能和與Function.prototype.bind綁定的功能之間有什麼區別（若是有）？
• 如何使用箭頭函數（公共類字段）做爲類方法？

更多資源：

• MDN-箭頭功能
• YDKJS-箭頭功能