溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

JavaScript中的箭頭函數是什么

發布時間:2021-09-18 16:47:16 來源:億速云 閱讀:189 作者:chen 欄目:web開發

這篇文章主要講解了“JavaScript中的箭頭函數是什么”,文中的講解內容簡單清晰,易于學習與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學習“JavaScript中的箭頭函數是什么”吧!

一、箭頭函數沒有 “this”

正如我們在 對象方法,"this" 一章中所學到的,箭頭函數沒有 this。如果訪問 this,則會從外部獲取。

例如,我們可以使用它在對象方法內部進行迭代:

let group = {   title: "Our Group",   students: ["John", "Pete", "Alice"],    showList() {     this.students.forEach(       student => alert(this.title + ': ' + student)     );   } };  group.showList();

這里 forEach 中使用了箭頭函數,所以其中的 this.title 其實和外部方法 showList  的完全一樣。那就是:group.title。

如果我們使用正常的函數,則會出現錯誤:

let group = {   title: "Our Group",   students: ["John", "Pete", "Alice"],    showList() {     this.students.forEach(function(student) {       // Error: Cannot read property 'title' of undefined       alert(this.title + ': ' + student)     });   } };  group.showList();

報錯是因為 forEach 運行它里面的這個函數,但是這個函數的 this 為默認值 this=undefined,因此就出現了嘗試訪問  undefined.title 的情況。

但箭頭函數就沒事,因為它們沒有 this。

不能對箭頭函數進行 new 操作

不具有 this 自然也就意味著另一個限制:箭頭函數不能用作構造器(constructor)。不能用 new 調用它們。

箭頭函數 VS bind

箭頭函數 => 和使用 .bind(this) 調用的常規函數之間有細微的差別:

  • .bind(this) 創建了一個該函數的“綁定版本”。

  • 箭頭函數 => 沒有創建任何綁定。箭頭函數只是沒有 this。this 的查找與常規變量的搜索方式完全相同:在外部詞法環境中查找。

二、箭頭函數沒有 “arguments”

箭頭函數也沒有 arguments 變量。

當我們需要使用當前的 this 和 arguments 轉發一個調用時,這對裝飾器(decorators)來說非常有用。

例如,defer(f, ms) 獲得了一個函數,并返回一個包裝器,該包裝器將調用延遲 ms 毫秒:

function defer(f, ms) {   return function() {     setTimeout(() => f.apply(this, arguments), ms)   }; }  function sayHi(who) {   alert('Hello, ' + who); }  let sayHiDeferred = defer(sayHi, 2000); sayHiDeferred("John"); // 2 秒后顯示:Hello, John

不用箭頭函數的話,可以這么寫:

function defer(f, ms) {   return function(...args) {     let ctx = this;     setTimeout(function() {       return f.apply(ctx, args);     }, ms);   }; }

在這里,我們必須創建額外的變量 args 和 ctx,以便 setTimeout 內部的函數可以獲取它們。

三、總結

箭頭函數:

  • 沒有 this

  • 沒有 arguments

  • 不能使用 new 進行調用

  • 它們也沒有 super,但目前我們還沒有學到它。我們將在 類繼承 一章中學習它。

這是因為,箭頭函數是針對那些沒有自己的“上下文”,但在當前上下文中起作用的短代碼的。并且箭頭函數確實在這種使用場景中大放異彩。

感謝各位的閱讀,以上就是“JavaScript中的箭頭函數是什么”的內容了,經過本文的學習后,相信大家對JavaScript中的箭頭函數是什么這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是億速云,小編將為大家推送更多相關知識點的文章,歡迎關注!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女