建站
咨詢
售后
建站咨詢
新聞中心
讓我們深入研究一下箭頭函數(shù)。
成都網(wǎng)絡(luò)公司-成都網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián)公司十年經(jīng)驗(yàn)成就非凡，專業(yè)從事做網(wǎng)站、成都網(wǎng)站制作，成都網(wǎng)頁設(shè)計(jì)，成都網(wǎng)頁制作，軟文推廣，廣告投放等。十年來已成功提供全面的成都網(wǎng)站建設(shè)方案，打造行業(yè)特色的成都網(wǎng)站建設(shè)案例，建站熱線：13518219792，我們期待您的來電！
箭頭函數(shù)不僅僅是編寫簡(jiǎn)潔代碼的“捷徑”。它還具有非常特殊且有用的特性。
JavaScript 充滿了我們需要編寫在其他地方執(zhí)行的小函數(shù)的情況。
例如：
- arr.forEach(func) —— forEach 對(duì)每個(gè)數(shù)組元素都執(zhí)行 func。
- setTimeout(func) —— func 由內(nèi)建調(diào)度器執(zhí)行。
- ……還有更多。
JavaScript 的精髓在于創(chuàng)建一個(gè)函數(shù)并將其傳遞到某個(gè)地方。
在這樣的函數(shù)中，我們通常不想離開當(dāng)前上下文。這就是箭頭函數(shù)的主戰(zhàn)場(chǎng)啦。
一、箭頭函數(shù)沒有 “this”
正如我們?cè)?對(duì)象方法，"this" 一章中所學(xué)到的，箭頭函數(shù)沒有 this。如果訪問 this，則會(huì)從外部獲取。
例如，我們可以使用它在對(duì)象方法內(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。
不能對(duì)箭頭函數(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í)，這對(duì)裝飾器(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ù)是針對(duì)那些沒有自己的“上下文”，但在當(dāng)前上下文中起作用的短代碼的。并且箭頭函數(shù)確實(shí)在這種使用場(chǎng)景中大放異彩。
文章標(biāo)題：深入理解JavaScript中的箭頭函數(shù)
分享地址：http://www.dlmjj.cn/article/djdhscd.html
