首頁 > web前端 > js教程 > js中箭頭函數的格式&this以及與普通函數的差異講解

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

不言
發布: 2018-09-10 17:24:48
原創
2899 人瀏覽過

這篇文章帶給大家的內容是關於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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板