新聞中心
這篇文章主要講解了“JavaScript中的箭頭函數(shù)是什么”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“JavaScript中的箭頭函數(shù)是什么”吧!
成都創(chuàng)新互聯(lián)公司是一家專注于做網(wǎng)站、成都網(wǎng)站建設(shè)與策劃設(shè)計(jì),平江網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)十多年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:平江等地區(qū)。平江做網(wǎng)站價(jià)格咨詢:18982081108
一、箭頭函數(shù)沒有 “this”
正如我們在 對象方法,"this" 一章中所學(xué)到的,箭頭函數(shù)沒有 this。如果訪問 this,則會(huì)從外部獲取。
例如,我們可以使用它在對象方法內(nèi)部進(jìn)行迭代:
let group = { title: "Our Group", students: ["John", "Pete", "Alice"], showList() { this.students.forEach( student => alert(this.title + ': ' + student) ); } }; group.showList();
這里 forEach 中使用了箭頭函數(shù),所以其中的 this.title 其實(shí)和外部方法 showList 的完全一樣。那就是:group.title。
如果我們使用正常的函數(shù),則會(huì)出現(xiàn)錯(cuò)誤:
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();
報(bào)錯(cuò)是因?yàn)?forEach 運(yùn)行它里面的這個(gè)函數(shù),但是這個(gè)函數(shù)的 this 為默認(rèn)值 this=undefined,因此就出現(xiàn)了嘗試訪問 undefined.title 的情況。
但箭頭函數(shù)就沒事,因?yàn)樗鼈儧]有 this。
不能對箭頭函數(shù)進(jìn)行 new 操作
不具有 this 自然也就意味著另一個(gè)限制:箭頭函數(shù)不能用作構(gòu)造器(constructor)。不能用 new 調(diào)用它們。
箭頭函數(shù) VS bind
箭頭函數(shù) => 和使用 .bind(this) 調(diào)用的常規(guī)函數(shù)之間有細(xì)微的差別:
.bind(this) 創(chuàng)建了一個(gè)該函數(shù)的“綁定版本”。
箭頭函數(shù) => 沒有創(chuàng)建任何綁定。箭頭函數(shù)只是沒有 this。this 的查找與常規(guī)變量的搜索方式完全相同:在外部詞法環(huán)境中查找。
二、箭頭函數(shù)沒有 “arguments”
箭頭函數(shù)也沒有 arguments 變量。
當(dāng)我們需要使用當(dāng)前的 this 和 arguments 轉(zhuǎn)發(fā)一個(gè)調(diào)用時(shí),這對裝飾器(decorators)來說非常有用。
例如,defer(f, ms) 獲得了一個(gè)函數(shù),并返回一個(gè)包裝器,該包裝器將調(diào)用延遲 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
不用箭頭函數(shù)的話,可以這么寫:
function defer(f, ms) { return function(...args) { let ctx = this; setTimeout(function() { return f.apply(ctx, args); }, ms); }; }
在這里,我們必須創(chuàng)建額外的變量 args 和 ctx,以便 setTimeout 內(nèi)部的函數(shù)可以獲取它們。
三、總結(jié)
箭頭函數(shù):
沒有 this
沒有 arguments
不能使用 new 進(jìn)行調(diào)用
它們也沒有 super,但目前我們還沒有學(xué)到它。我們將在 類繼承 一章中學(xué)習(xí)它。
這是因?yàn)?,箭頭函數(shù)是針對那些沒有自己的“上下文”,但在當(dāng)前上下文中起作用的短代碼的。并且箭頭函數(shù)確實(shí)在這種使用場景中大放異彩。
感謝各位的閱讀,以上就是“JavaScript中的箭頭函數(shù)是什么”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對JavaScript中的箭頭函數(shù)是什么這一問題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián),小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!
名稱欄目:JavaScript中的箭頭函數(shù)是什么
文章路徑:http://www.dlmjj.cn/article/jideho.html