js map 箭头_JS异常函数之箭头函数
來源：logrocket作者：Maciej Cie?lar 譯者：前端小智
為了保證的可讀性，本文采用意譯而非直譯。
在JS中，箭頭函數(shù)可以像普通函數(shù)一樣以多種方式使用。但是，它們一般用于需要匿名函數(shù)表達(dá)式，例如回調(diào)函數(shù)。
下面示例顯示舉例箭頭函數(shù)作為回調(diào)函數(shù)，尤其是對(duì)于map(), filter(), reduce(), sort()等數(shù)組方法。
const?scores?=?[?1,?28,?66,?666];const?maxScore?=?Math.max(...scores);
scores.map(score?=>?+(score?/?maxScore).toFixed(2));?
乍一看，箭頭函數(shù)似乎可以按常規(guī)函數(shù)來定義與使用，但事實(shí)并非如此。出于箭頭函數(shù)的簡潔性，它與常規(guī)函數(shù)有所不同，換一種看法，箭頭函數(shù)也許可以把箭頭函數(shù)看作是異常的 JS 函數(shù)。
雖然箭頭函數(shù)的語法非常簡單，但這不是本文的重點(diǎn)。本文主要講講箭頭函數(shù)與常規(guī)函數(shù)行為的差異，以及咱們?nèi)绻眠@些差異來更好使用箭頭函數(shù)。
無論在嚴(yán)格模式還是非嚴(yán)格模式下，箭頭函數(shù)都不能具有重復(fù)的命名參數(shù)。
箭頭函數(shù)沒有arguments綁定。但是，它們可以訪問最接近的非箭頭父函數(shù)的arguments對(duì)象。
箭頭函數(shù)永遠(yuǎn)不能用作構(gòu)造函數(shù)，自然的不能使用new關(guān)鍵字調(diào)用它們，因此，對(duì)于箭頭函數(shù)不存在prototype屬性。
在函數(shù)的整個(gè)生命周期中，箭頭函數(shù)內(nèi)部的值保持不變，并且總是與接近的非箭頭父函數(shù)中的值綁定。
命名函數(shù)參數(shù)
JS中的函數(shù)通常用命名參數(shù)定義。命名參數(shù)用于根據(jù)位置將參數(shù)映射到函數(shù)作用域中的局部變量。
來看看下面的函數(shù)：
function?logParams?(first,?second,?third)?{??console.log(first,?second,?third);
}
//?first?=>?'Hello'
//?second?=>?'World'
//?third?=>?'!!!'
logParams('Hello',?'World',?'!!!');?//?"Hello"??"World"??"!!!"
//?first?=>?{?o:?3?}
//?second?=>?[?1,?2,?3?]
//?third?=>?undefined
logParams({?o:?3?},?[?1,?2,?3?]);?//?{o:?3}??[1,?2,?3]
logParams()函數(shù)由三個(gè)命名參數(shù)定義: first、second和third。如果命名參數(shù)多于傳遞給函數(shù)的參數(shù)，則其余參數(shù)undefined。
對(duì)于命名參數(shù)，JS函數(shù)在非嚴(yán)格模式下表現(xiàn)出奇怪的行為。在非嚴(yán)格模式下，JS函數(shù)允許有重復(fù)命名參數(shù)，來看看示例：
function?logParams?(first,?second,?first)?{??console.log(first,?second);
}
//?first?=>?'Hello'
//?second?=>?'World'
//?first?=>?'!!!'
logParams('Hello',?'World',?'!!!');?//?"!!!"??"World"
//?first?=>?{?o:?3?}
//?second?=>?[?1,?2,?3?]
//?first?=>?undefined
logParams({?o:?3?},?[?1,?2,?3?]);?//?undefined??[1,?2,?3]
咱們可以看到，first參數(shù)重復(fù)了，因此，它被映射到傳遞給函數(shù)調(diào)用的第三個(gè)參數(shù)的值，覆蓋了第一個(gè)參數(shù)，這不是一個(gè)讓人喜歡的行為。
//?由于參數(shù)重復(fù)，嚴(yán)格模式會(huì)報(bào)錯(cuò)function?logParams?(first,?second,?first)?{
??"use?strict";
??console.log(first,?second);
}
箭頭函數(shù)如何處理重復(fù)的參數(shù)
關(guān)于箭頭函數(shù)：
與常規(guī)函數(shù)不同，無論在嚴(yán)格模式還是非嚴(yán)格模式下，箭頭函數(shù)都不允許重復(fù)參數(shù)，重復(fù)的參數(shù)將引發(fā)語法錯(cuò)誤。 ? ? ? ?// 只要你敢寫成重復(fù)的參數(shù)，我就敢死給你看 ? ?const logParams = (first, second, first) => { ? ? ?console.log(first, second); ? ?}
函數(shù)重載
函數(shù)重載是定義函數(shù)的能力，這樣就可以根據(jù)不同的參數(shù)數(shù)量來調(diào)用對(duì)應(yīng)的函數(shù), JS 中可以利用綁定方式來實(shí)現(xiàn)這一功能。
來看個(gè)簡單的重載函數(shù)，計(jì)算傳入?yún)?shù)的平均值：
function?average()?{??const?length?=?arguments.length;
??if?(length?==?0)?return?0;
??//?將參數(shù)轉(zhuǎn)換為數(shù)組
??const?numbers?=?Array.prototype.slice.call(arguments);
??const?sumReduceFn?=?function?(a,?b)?{?return?a?+?Number(b)?};
??//?返回?cái)?shù)組元素的總和除以數(shù)組的長度
??return?numbers.reduce(sumReduceFn,?0)?/?length;
}
這樣函數(shù)可以用任意數(shù)量的參數(shù)調(diào)用，從0到函數(shù)可以接受的最大參數(shù)數(shù)量應(yīng)該是255。 ? ? ? ?average(); // 0 ? ?average('3o', 4, 5); // NaN ? ?average('1', 2, '3', 4, '5', 6, 7, 8, 9, 10); // 5.5 ? ?average(1.75, 2.25, 3.5, 4.125, 5.875); // 3.5
現(xiàn)在嘗試使用剪頭函數(shù)語法復(fù)制average()函數(shù)，一般咱們會(huì)覺得，這沒啥難的，無法就這樣：
const?average?=?()?=>?{??const?length?=?arguments.length;
??if?(length?==?0)?return?0;
??const?numbers?=?Array.prototype.slice.call(arguments);
??const?sumReduceFn?=?function?(a,?b)?{?return?a?+?Number(b)?};
??return?numbers.reduce(sumReduceFn,?0)?/?length;
}
現(xiàn)在測試這個(gè)函數(shù)時(shí)，咱們會(huì)發(fā)現(xiàn)它會(huì)拋出一個(gè)引用錯(cuò)誤，arguments 未定義。
咱們做錯(cuò)了啥
對(duì)于箭頭函數(shù)：
與常規(guī)函數(shù)不同，arguments不存在于箭頭函數(shù)中。但是，可以訪問非箭頭父函數(shù)的arguments對(duì)象。
基于這種理解，可以將average()函數(shù)修改為一個(gè)常規(guī)函數(shù)，該函數(shù)將返回立即調(diào)用的嵌套箭頭函數(shù)執(zhí)行的結(jié)果，該嵌套箭頭函數(shù)就能夠訪問父函數(shù)的arguments。
function?average()?{??return?(()?=>?{
????const?length?=?arguments.length;
????if?(length?==?0)?return?0;
????const?numbers?=?Array.prototype.slice.call(arguments);
????const?sumReduceFn?=?function?(a,?b)?{?return?a?+?Number(b)?};
????return?numbers.reduce(sumReduceFn,?0)?/?length;
??})();
}
這樣就可以解決了arguments對(duì)象沒有定義的問題，但這種狗屎做法顯然很多余了。
做點(diǎn)不一樣的
對(duì)于上面問題是否存在替代方法呢，可以使用 es6 的 rest 參數(shù)。
使用ES6 rest 參數(shù)，咱們可以得到一個(gè)數(shù)組，該數(shù)組保存了傳遞給該函數(shù)的所有的參數(shù)。rest語法適用于所有類型的函數(shù)，無論是常規(guī)函數(shù)還是箭頭函數(shù)。
const?average?=?(...args)?=>?{??if?(args.length?==?0)?return?0;
??const?sumReduceFn?=?function?(a,?b)?{?return?a?+?Number(b)?};
??return?args.reduce(sumReduceFn,?0)?/?args.length;
}
對(duì)于使用rest參數(shù)需要注意一些事項(xiàng):
rest參數(shù)與函數(shù)內(nèi)部的arguments對(duì)象不同。rest參數(shù)是一個(gè)實(shí)際的函數(shù)參數(shù)，而arguments對(duì)象是一個(gè)綁定到函數(shù)作用域的內(nèi)部對(duì)象。
一個(gè)函數(shù)只能有一個(gè)rest參數(shù)，而且它必須位于最后一個(gè)參數(shù)。這意味著函數(shù)可以包含命名參數(shù)和rest參數(shù)的組合。
rest 參數(shù)與命名參數(shù)一起使用時(shí)，它不包含所有傳入的參數(shù)。但是，當(dāng)它是惟一的函數(shù)參數(shù)時(shí)，表示函數(shù)參數(shù)。另一方面，函數(shù)的arguments對(duì)象總是捕獲所有函數(shù)的參數(shù)。
rest參數(shù)指向包含所有捕獲函數(shù)參數(shù)的數(shù)組對(duì)象，而arguments對(duì)象指向包含所有函數(shù)參數(shù)的類數(shù)組對(duì)象。
接著考慮另一個(gè)簡單的重載函數(shù)，該函數(shù)將數(shù)字根據(jù)傳入的進(jìn)制轉(zhuǎn)換為另一個(gè)類的進(jìn)制數(shù)。 可以使用一到三個(gè)參數(shù)調(diào)用該函數(shù)。 但是，當(dāng)使用兩個(gè)或更少的參數(shù)調(diào)用它時(shí)，它會(huì)交換第二個(gè)和第三個(gè)函數(shù)參數(shù)。如下所示：
function?baseConvert?(num,?fromRadix?=?10,?toRadix?=?10)?{??if?(arguments.length?3)?{
????//?swap?variables?using?array?destructuring
????[toRadix,?fromRadix]?=?[fromRadix,?toRadix];
??}
??return?parseInt(num,?fromRadix).toString(toRadix);
}
調(diào)用 baseConvert 方法：
//?num?=>?123,?fromRadix?=>?10,?toRadix?=>?10console.log(baseConvert(123));?//?"123"
//?num?=>?255,?fromRadix?=>?10,?toRadix?=>?2
console.log(baseConvert(255,?2));?//?"11111111"
//?num?=>?'ff',?fromRadix?=>?16,?toRadix?=>?8
console.log(baseConvert('ff',?16,?8));?//?"377"
使用箭頭函數(shù)來重寫上面的方法：
const?baseConvert?=?(num,?...args)?=>?{??//?解構(gòu)`args`數(shù)組和
??//?設(shè)置`fromRadix`和`toRadix`局部變量
??let?[fromRadix?=?10,?toRadix?=?10]?=?args;
??if?(args.length?2)?{
????//?使用數(shù)組解構(gòu)交換變量
????[toRadix,?fromRadix]?=?[fromRadix,?toRadix];
??}
??return?parseInt(num,?fromRadix).toString(toRadix);
}
構(gòu)造函數(shù)
可以使用new關(guān)鍵字調(diào)用常規(guī)JS函數(shù)，該函數(shù)作為類構(gòu)造函數(shù)用于創(chuàng)建新的實(shí)例對(duì)象。
function?Square?(length?=?10)?{??this.length?=?parseInt(length)?||?10;
??this.getArea?=?function()?{
????return?Math.pow(this.length,?2);
??}
??this.getPerimeter?=?function()?{
????return?4?*?this.length;
??}
}
const?square?=?new?Square();
console.log(square.length);?//?10
console.log(square.getArea());?//?100
console.log(square.getPerimeter());?//?40
console.log(typeof?square);?//?"object"
console.log(square?instanceof?Square);?//?true
當(dāng)使用new關(guān)鍵字調(diào)用常規(guī)JS函數(shù)時(shí)，將調(diào)用函數(shù)內(nèi)部[[Construct]]方法來創(chuàng)建一個(gè)新的實(shí)例對(duì)象并分配內(nèi)存。之后，函數(shù)體將正常執(zhí)行，并將this映射到新創(chuàng)建的實(shí)例對(duì)象。最后，函數(shù)隱式地返回 this(新創(chuàng)建的實(shí)例對(duì)象)，只是在函數(shù)定義中指定了一個(gè)不同的返回值。
此外，所有常規(guī)JS函數(shù)都有一個(gè)prototype屬性。函數(shù)的prototype屬性是一個(gè)對(duì)象，它包含函數(shù)創(chuàng)建的所有實(shí)例對(duì)象在用作構(gòu)造函數(shù)時(shí)共享的屬性和方法。
以下是對(duì)前面的Square函數(shù)的一個(gè)小修改，這次它從函數(shù)的原型上的方法，而不是構(gòu)造函數(shù)本身。
function?Square?(length?=?10)?{??this.length?=?parseInt(length)?||?10;
}
Square.prototype.getArea?=?function()?{
??return?Math.pow(this.length,?2);
}
Square.prototype.getPerimeter?=?function()?{
??return?4?*?this.length;
}
const?square?=?new?Square();
console.log(square.length);?//?10
console.log(square.getArea());?//?100
console.log(square.getPerimeter());?//?40
console.log(typeof?square);?//?"object"
console.log(square?instanceof?Square);?//?true
如下所知，一切仍然按預(yù)期工作。 事實(shí)上，這里有一個(gè)小秘密：ES6 類在后臺(tái)執(zhí)行類似于上面代碼片段的操作 - 類(class)只是個(gè)語法糖。
那么箭頭函數(shù)呢
它們是否也與常規(guī)JS函數(shù)共享此行為?答案是否定的。關(guān)于箭頭函數(shù):
與常規(guī)函數(shù)不同，箭頭函數(shù)永遠(yuǎn)不能使用new關(guān)鍵字調(diào)用，因?yàn)樗鼈儧]有[[Construct]]方法。 因此，箭頭函數(shù)也不存在prototype屬性。
箭頭函數(shù)不能用作構(gòu)造函數(shù)，無法使用new關(guān)鍵字調(diào)用它們，如果這樣做了會(huì)拋出一個(gè)錯(cuò)誤，表明該函數(shù)不是構(gòu)造函數(shù)。
因此，對(duì)于箭頭函數(shù)，不存在可以作為構(gòu)造函數(shù)調(diào)用的函數(shù)內(nèi)部的new.target等綁定，相反，它們使用最接近的非箭頭父函數(shù)的new.target值。
此外，由于無法使用new關(guān)鍵字調(diào)用箭頭函數(shù)，因此實(shí)際上不需要它們具有原型。 因此，箭頭函數(shù)不存在prototype屬性。
由于箭頭函數(shù)的prototype 為 undefined，嘗試使用屬性和方法來擴(kuò)充它，或者訪問它上面的屬性，都會(huì)引發(fā)錯(cuò)誤。
const?Square?=?(length?=?10)?=>?{??this.length?=?parseInt(length)?||?10;
}
//?throws?an?error
const?square?=?new?Square(5);
//?throws?an?error
Square.prototype.getArea?=?function()?{
??return?Math.pow(this.length,?2);
}
console.log(Square.prototype);?//?undefined
this 是啥
JS函數(shù)的每次調(diào)用都與調(diào)用上下文相關(guān)聯(lián)，這取決于函數(shù)是如何調(diào)用的，或者在哪里調(diào)用的。
函數(shù)內(nèi)部this值依賴于函數(shù)在調(diào)用時(shí)的調(diào)用上下文，這通常會(huì)讓開發(fā)人員不得不問自己一個(gè)問題:this值是啥。
下面是對(duì)不同類型的函數(shù)調(diào)用this指向一些總結(jié)：
使用new關(guān)鍵字調(diào)用:this指向由函數(shù)的內(nèi)部[[Construct]]方法創(chuàng)建的新實(shí)例對(duì)象。this(新創(chuàng)建的實(shí)例對(duì)象)通常在默認(rèn)情況下返回，除了在函數(shù)定義中顯式指定了不同的返回值。
不使用new關(guān)鍵字直接調(diào)用:在非嚴(yán)格模式下，this指向window對(duì)象(瀏覽器中)。然而，在嚴(yán)格模式下，this值為undefined;因此，試圖訪問或設(shè)置此屬性將引發(fā)錯(cuò)誤。
間接使用綁定對(duì)象調(diào)用：Function.prototype對(duì)象提供了三種方法，可以在調(diào)用函數(shù)時(shí)將函數(shù)綁定到任意對(duì)象，即：call()，apply()和bind()。 使用這些方法調(diào)用函數(shù)時(shí)，this指向指定的綁定對(duì)象。
作為對(duì)象方法調(diào)用：this指向調(diào)用函數(shù)(方法)的對(duì)象，無論該方法是被定義為對(duì)象的自己的屬性還是從對(duì)象的原型鏈中解析。
作為事件處理程序調(diào)用:對(duì)于用作DOM事件偵聽器的常規(guī)函數(shù)，this指向觸發(fā)事件的目標(biāo)對(duì)象、DOM元素、document或window 。
再來看個(gè)函數(shù)，該函數(shù)將用作單擊事件偵聽器，例如，表單提交按鈕：
function?processFormData?(evt)?{??evt.preventDefault();
??const?form?=?this.closest('form');
??const?data?=?new?FormData(form);
??const?{?action:?url,?method?}?=?form;
}
button.addEventListener('click',?processFormData,?false);
與前面看到的一樣，事件偵聽器函數(shù)中的 this值是觸發(fā)單擊事件的DOM元素，在本例中是button。
因此，可以使用以下命令指向submit按鈕的父表單
this.closest('form');如果將函數(shù)更改為箭頭函數(shù)語法，會(huì)發(fā)生什么？
const?processFormData?=?(evt)?=>?{??evt.preventDefault();
??const?form?=?this.closest('form');
??const?data?=?new?FormData(form);
??const?{?action:?url,?method?}?=?form;
}
button.addEventListener('click',?processFormData,?false);
如果現(xiàn)在嘗試此操作，咱們就得到一個(gè)錯(cuò)誤。從表面上看，this 的值并不是各位想要的。由于某種原因，它不再指向button元素，而是指向window對(duì)象。
如何修復(fù)`this`指向
利用上面提到的 Function.prototype.bind() 強(qiáng)制將this值綁定到button元素:
button.addEventListener('click',?processFormData.bind(button),?false);但這似乎不是各位想要的解決辦法。this仍然指向window對(duì)象。這是箭頭函數(shù)特有的問題嗎?這是否意味著箭頭函數(shù)不能用于依賴于this的事件處理?
為什么會(huì)搞錯(cuò)
關(guān)于箭頭函數(shù)的最后一件事：
與常規(guī)函數(shù)不同，箭頭函數(shù)沒有this的綁定。this的值將解析為最接近的非箭頭父函數(shù)或全局對(duì)象的值。
這解釋了為什么事件偵聽器箭頭函數(shù)中的this值指向window 對(duì)象(全局對(duì)象)。 由于它沒有嵌套在父函數(shù)中，因此它使用來自最近的父作用域的this值，該作用域是全局作用域。
但是，這并不能解釋為什么不能使用bind()將事件偵聽器箭頭函數(shù)綁定到button元素。對(duì)此有一個(gè)解釋:
與常規(guī)函數(shù)不同，內(nèi)部箭頭函數(shù)的this值保持不變，并且無論調(diào)用上下文如何，都不能在其整個(gè)生命周期中更改。
箭頭函數(shù)的這種行為使得JS引擎可以優(yōu)化它們，因?yàn)榭梢允孪却_定函數(shù)綁定。
考慮一個(gè)稍微不同的場景，其中事件處理程序是使用對(duì)象方法中的常規(guī)函數(shù)定義的，并且還取決于同一對(duì)象的另一個(gè)方法：
({??_sortByFileSize:?function?(filelist)?{
????const?files?=?Array.from(filelist).sort(function?(a,?b)?{
??????return?a.size?-?b.size;
????});
????return?files.map(function?(file)?{
??????return?file.name;
????});
??},
??init:?function?(input)?{
????input.addEventListener('change',?function?(evt)?{
??????const?files?=?evt.target.files;
??????console.log(this._sortByFileSize(files));
????},?false);
??}
}).init(document.getElementById('file-input'));
上面是一個(gè)一次性的對(duì)象，該對(duì)象帶有_sortByFileSize()方法和init()方法，并立即調(diào)init方法。init()方法接受一個(gè)input元素，并為input元素設(shè)置一個(gè)更改事件處理程序，該事件處理程序按文件大小對(duì)上傳的文件進(jìn)行排序，并打印在瀏覽器的控制臺(tái)。
如果測試這段代碼，會(huì)發(fā)現(xiàn)，當(dāng)選擇要上載的文件時(shí)，文件列表不會(huì)被排序并打印到控制臺(tái);相反，會(huì)控制臺(tái)上拋出一個(gè)錯(cuò)誤，問題就出在這一行:
console.log(this._sortByFileSize(files));在事件監(jiān)聽器函數(shù)內(nèi)部，this 指向 input 元素 因此this._sortByFileSize 為 undefined。
要解決此問題，需要將事件偵聽器中的this綁定到包含方法的外部對(duì)象，以便可以調(diào)用this._sortByFileSize()。 在這里，可以使用bind()，如下所示：
init:?function?(input)?{??input.addEventListener('change',?(function?(evt)?{
????const?files?=?evt.target.files;
????console.log(this._sortByFileSize(files));
??}).bind(this),?false);
}
現(xiàn)在一切正常。這里不使用bind()，可以簡單地用一個(gè)箭頭函數(shù)替換事件偵聽器函數(shù)。箭頭函數(shù)將使用父init()方法中的this的值：
init:?function?(input)?{??input.addEventListener('change',?(function?(evt)?{
????const?files?=?evt.target.files;
????console.log(this._sortByFileSize(files));
??}).bind(this),?false);
}
再考慮一個(gè)場景，假設(shè)有一個(gè)簡單的計(jì)時(shí)器函數(shù)，可以將其作為構(gòu)造函數(shù)調(diào)用來創(chuàng)建以秒為單位的倒計(jì)時(shí)計(jì)時(shí)器。使用setInterval()進(jìn)行倒計(jì)時(shí)，直到持續(xù)時(shí)間過期或間隔被清除為止，如下所示:
function?Timer?(seconds?=?60)?{??this.seconds?=?parseInt(seconds)?||?60;
??console.log(this.seconds);
??this.interval?=?setInterval(function?()?{
????console.log(--this.seconds);
????if?(this.seconds?==?0)?{
??????this.interval?&&?clearInterval(this.interval);
????}
??},?1000);
}
const?timer?=?new?Timer(30);
如果運(yùn)行這段代碼，會(huì)看到倒計(jì)時(shí)計(jì)時(shí)器似乎被打破了，在控制臺(tái)上一直打印 NaN。
這里的問題是，在傳遞給setInterval()的回調(diào)函數(shù)中，this指向全局window對(duì)象，而不是Timer()函數(shù)作用域內(nèi)新創(chuàng)建的實(shí)例對(duì)象。因此，this.seconds 和 this.interval ?都是undefined的。
與之前一樣，要修復(fù)這個(gè)問題，可以使用bind()將setInterval()回調(diào)函數(shù)中的this值綁定到新創(chuàng)建的實(shí)例對(duì)象，如下所示
function?Timer?(seconds?=?60)?{??this.seconds?=?parseInt(seconds)?||?60;
??console.log(this.seconds);
??this.interval?=?setInterval((function?()?{
????console.log(--this.seconds);
????if?(this.seconds?==?0)?{
??????this.interval?&&?clearInterval(this.interval);
????}
??}).bind(this),?1000);
}
或者，更好的方法是，可以用一個(gè)箭頭函數(shù)替換setInterval()回調(diào)函數(shù)，這樣它就可以使用最近的非箭頭父函數(shù)的this值:
function?Timer?(seconds?=?60)?{??this.seconds?=?parseInt(seconds)?||?60;
??console.log(this.seconds);
??this.interval?=?setInterval(()?=>?{
????console.log(--this.seconds);
????if?(this.seconds?==?0)?{
??????this.interval?&&?clearInterval(this.interval);
????}
??},?1000);
}
現(xiàn)在理解了箭頭函數(shù)如何處理this關(guān)鍵字，還需要注意箭頭函數(shù)對(duì)于需要保留this值的情況并不理想 - 例如，在定義需要引用的對(duì)象方法時(shí) 使用需要引用目標(biāo)對(duì)象的方法來擴(kuò)展對(duì)象或擴(kuò)充函數(shù)的原型。
不存在的綁定
在本文中，已經(jīng)看到了一些綁定，這些綁定可以在常規(guī)JS函數(shù)中使用，但是不存在用于箭頭函數(shù)的綁定。相反，箭頭函數(shù)從最近的非箭頭父函數(shù)派生此類綁定的值。
總之，下面是箭頭函數(shù)中不存在綁定的列表:
arguments：調(diào)用時(shí)傳遞給函數(shù)的參數(shù)列表
new.target：使用new關(guān)鍵字作為構(gòu)造函數(shù)調(diào)用的函數(shù)的引用
super:對(duì)函數(shù)所屬對(duì)象原型的引用，前提是該對(duì)象被定義為一個(gè)簡潔的對(duì)象方法
this：對(duì)函數(shù)的調(diào)用上下文對(duì)象的引用
原文：https://s0dev0to.icopy.site/bnevilleoneill/anomalies-in-javascript-arrow-functions-2afh
代碼部署后可能存在的BUG沒法實(shí)時(shí)知道，事后為了解決這些BUG，花了大量的時(shí)間進(jìn)行l(wèi)og 調(diào)試，這邊順便給大家推薦一個(gè)好用的BUG監(jiān)控工具 Fundebug。
交流
我是小智，公眾號(hào)「大遷世界」作者，對(duì)前端技術(shù)保持學(xué)習(xí)愛好者。我會(huì)經(jīng)常分享自己所學(xué)所看的干貨，在進(jìn)階的路上，共勉！
關(guān)注公眾號(hào)，后臺(tái)回復(fù)福利，即可看到福利，你懂的。
延伸閱讀
深入 JS 對(duì)象屬性
36 個(gè)JS 面試題為你助力金九銀十(面試必讀)
Vue 和 React 的優(yōu)點(diǎn)分別是什么？(知乎大佬解答)
總結(jié)
以上是生活随笔為你收集整理的js map 箭头_JS异常函数之箭头函数的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： sap 用户权限表_干货丨SAP系统的R
- 下一篇： easypoi导出数值型_SpringB