js中箭頭函數的格式&this以及與普通函數的差異講解

這篇文章帶給大家的內容是關於js中箭頭函數的格式&this以及與普通函數的區別講解，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

箭頭函數的格式

// ES5
var selected = allJobs.filter(function (job) {
  return job.isSelected();
});

// ES6 箭头函数
var selected = allJobs.filter(job => job.isSelected());

// ES6
$("#confetti-btn").click(event => {
  playTrumpet();
  fireConfettiCannon();
});

1、要編寫具有多個參數（或沒有參數或預設值或解構參數）的函數，在參數清單周圍新增括號。
2、帶有區塊體的箭頭函數不會自動傳回值。請使用return聲明。
3、使用箭頭函數建立普通物件時有一點要注意。始終將物件括在括號中：

this指向

箭頭函數沒有自己的this值。 this箭頭函數內部的值始終從封閉範圍繼承。

對於將使用object.method()語法呼叫的方法，請使用非箭頭函數。這些函數將從呼叫者那裡獲得有意義的 this值。其他所有內容都使用箭頭功能。

{
  ...
  addAll: function addAll(pieces) {
    var self = this;
    _.each(pieces, function (piece) {
      self.add(piece);
    });
  },
  ...
}

// ES6
{
  ...
  addAll: function addAll(pieces) {
    _.each(pieces, piece => this.add(piece));
  },
  ...
}

箭頭函數與普通函數得區別

箭頭和非箭頭函數之間還有一個小的區別：箭頭函數也沒有自己的arguments物件。

普通函數：
1、函數作為全域函數被呼叫時，this指向全域物件
2、函數作為物件中的方法被呼叫時，this指向該物件
3、函數作為建構子的時候，this指向建構子new出來的新物件
4、還可以透過call，apply，bind改變this的指向

1、箭頭函數沒有this，函數內部的this來自父級最近的非箭頭函數，並且不能改變this的指向。
2、箭頭函數沒有super
3、箭頭函數沒有arguments
4、箭頭函數沒有new.target綁定。
5、不能使用new
6、沒有原型
7、不支援重複的命名參數。

相關推薦：

ES6箭頭函數中的this問題解答

JavaScript箭頭arrow函數詳解

以上是js中箭頭函數的格式&this以及與普通函數的差異講解的詳細內容。更多資訊請關注PHP中文網其他相關文章！