建站
咨詢
售后
建站咨詢
新聞中心
ES6標(biāo)準(zhǔn)新增了一種新的函數(shù)：Arrow Function（箭頭函數(shù)），下面為大家講解一下ES6箭頭函數(shù)不能使用的場景。
十余年的葫蘆島網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。成都全網(wǎng)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整葫蘆島建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。成都創(chuàng)新互聯(lián)公司從事“葫蘆島網(wǎng)站設(shè)計”,“葫蘆島網(wǎng)站推廣”以來，每個客戶項目都認(rèn)真落實執(zhí)行。
函數(shù)關(guān)鍵字
花括號 return關(guān)鍵字(對于單行函數(shù)) 此外，箭頭函數(shù)還降低了JavaScript的函數(shù)范圍以及this關(guān)鍵字的部分復(fù)雜性，因為有時真正需要的只是一個匿名函數(shù)。
但事實上，箭頭函數(shù)并不一定能解決編寫JavaScript函數(shù)時的每一項需求。“萬金油”函數(shù)是奢談，下面就讓我們深入探討幾個箭頭函數(shù)不能解決的情況吧。
對象原型
先看JavaScript代碼片段：
classRobot {
constructor(name,catchPhrase) {
this.name= name;
this.catchPhrase= catchPhrase;
}
};
Robot.prototype.speak= () => {
console.log(this === window);
return this.catchPhrase
};
const ironG =newRobot("Iron Giant", "Be good");
ironG.speak();
第15行的函數(shù)調(diào)用如下：
true
undefined
定義了speak() 原型函數(shù)，并為新Robot對象傳遞了口號，那為什么這段代碼的計算結(jié)果是未定義的呢?
console.log()揭示了原因。如你所見，當(dāng)要求控制臺判斷(this === window)時，它返回true。這為上文對象方法示例中討論的內(nèi)容提供了依據(jù)。
當(dāng)使用需要上下文的函數(shù)時，必須使用常規(guī)函數(shù)語法，以便使this正確綁定：
Robot.prototype.speak=function() {
console.log(this === ironG); // true
return this.catchphrase;
};
對象方法
假設(shè)想要創(chuàng)建一個綁定到對象的方法。
const mario = {
lives: 3,
oneUp: () => {
this.lives++;
}
}
這個例子中，如調(diào)用mario.oneUp()，mario.lives的值應(yīng)該從3增加到4。然而，按照目前所寫的代碼，無論調(diào)用多少次oneUp()， lives的值都將保持不變。
為什么?正是因為this!
正如MDN所述:箭頭函數(shù)自身沒有this。使用了封閉詞法范圍的this值;箭頭函數(shù)遵循正常的變量查找規(guī)則。因此，當(dāng)搜索當(dāng)前作用域中不存在的this時，箭頭函數(shù)最終會從其封閉作用域中找到this。
例子中，封閉的范圍是window對象。調(diào)用oneUp()會要求程序增加window對象中l(wèi)ives的值。這樣的值不存在，所以代碼不起作用。
相反，應(yīng)該使用傳統(tǒng)的函數(shù)語法，它將函數(shù)的this綁定到調(diào)用該函數(shù)的特定對象上：
const mario = {
lives: 3,
oneUp: function() {
this.lives++;
}
};
動態(tài)上下文
最后一個例子：
const button = document.querySelector(#darkMode);
button.addEventListener('click', () => {
this.classList.toggle('on');
});
到目前為止，你可能已經(jīng)意識到這個代碼無效及其原因。沒錯，這又和this有關(guān)。
箭頭函數(shù)語法在函數(shù)聲明時靜態(tài)地綁定上下文，這與使用事件處理程序或事件監(jiān)聽器時試圖實現(xiàn)的相反，它們本質(zhì)上是動態(tài)的。
當(dāng)通過事件處理程序或監(jiān)聽器操作DOM時，觸發(fā)的事件指向?qū)儆谀繕?biāo)元素的this。
對于全局執(zhí)行上下文中定義的箭頭函數(shù)，this將指向window。因此，上面的代碼中，this.classList將被認(rèn)為是window.classList，從而導(dǎo)致TypeError。
遇事不決箭頭函數(shù)？別期望“萬金油”語法
從這幾個簡單的例子中可以發(fā)現(xiàn)，JavaScript中關(guān)于this的內(nèi)容值得研究，這也許會加深你對何時使用或不使用箭頭函數(shù)的理解。
文章標(biāo)題：ES6箭頭函數(shù)不能使用的場景
文章位置：http://fisionsoft.com.cn/article/dhjgdeg.html
