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