建站
咨詢
售后
建站咨詢
新聞中心
這篇文章主要介紹“怎么使用ES6箭頭函數(shù)”，在日常操作中，相信很多人在怎么使用ES6箭頭函數(shù)問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么使用ES6箭頭函數(shù)”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
網站建設公司,為您提供網站建設,網站制作,網頁設計及定制網站建設服務,專注于成都定制網站,高端網頁制作,對成都玻璃貼膜等多個行業(yè)擁有豐富的網站建設經驗的網站建設公司。專業(yè)網站設計,網站優(yōu)化推廣哪家好,專業(yè)seo優(yōu)化優(yōu)化,H5建站,響應式網站。
ES6箭頭函數(shù)似乎是一種很上癮的函數(shù)，一旦了解你很容易用到停不下來。作為2015年ECMAScript 6更新的一部分，箭頭函數(shù)有充分理由迅速流行。箭頭函數(shù)語法是極好的語法糖，能解決很多需求：
函數(shù)關鍵字
花括號
return關鍵字(對于單行函數(shù))
此外，箭頭函數(shù)還降低了JavaScript的函數(shù)范圍以及this關鍵字的部分復雜性，因為有時真正需要的只是一個匿名函數(shù)。
但事實上，箭頭函數(shù)并不一定能解決編寫JavaScript函數(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ù)調用如下：
true undefined
定義了speak() 原型函數(shù)，并為新Robot對象傳遞了口號，那為什么這段代碼的計算結果是未定義的呢?
console.log()揭示了原因。如你所見，當要求控制臺判斷(this === window)時，它返回true。這為上文對象方法示例中討論的內容提供了依據(jù)。
當使用需要上下文的函數(shù)時，必須使用常規(guī)函數(shù)語法，以便使this正確綁定：
Robot.prototype.speak=function() { console.log(this === ironG); // true return this.catchphrase; };對象方法
假設想要創(chuàng)建一個綁定到對象的方法。
const mario = { lives: 3, oneUp: () => { this.lives++; } }這個例子中，如調用mario.oneUp()，mario.lives的值應該從3增加到4。然而，按照目前所寫的代碼，無論調用多少次oneUp()， lives的值都將保持不變。
為什么?正是因為this!
正如MDN所述:箭頭函數(shù)自身沒有this。使用了封閉詞法范圍的this值;箭頭函數(shù)遵循正常的變量查找規(guī)則。因此，當搜索當前作用域中不存在的this時，箭頭函數(shù)最終會從其封閉作用域中找到this。
例子中，封閉的范圍是window對象。調用oneUp()會要求程序增加window對象中l(wèi)ives的值。這樣的值不存在，所以代碼不起作用。
相反，應該使用傳統(tǒng)的函數(shù)語法，它將函數(shù)的this綁定到調用該函數(shù)的特定對象上：
const mario = { lives: 3, oneUp: function() { this.lives++; } };動態(tài)上下文
最后一個例子：
const button = document.querySelector(#darkMode); button.addEventListener('click', () => { this.classList.toggle('on'); });到目前為止，你可能已經意識到這個代碼無效及其原因。沒錯，這又和this有關。
箭頭函數(shù)語法在函數(shù)聲明時靜態(tài)地綁定上下文，這與使用事件處理程序或事件監(jiān)聽器時試圖實現(xiàn)的相反，它們本質上是動態(tài)的。
當通過事件處理程序或監(jiān)聽器操作DOM時，觸發(fā)的事件指向屬于目標元素的this。
對于全局執(zhí)行上下文中定義的箭頭函數(shù)，this將指向window。因此，上面的代碼中，this.classList將被認為是window.classList，從而導致TypeError。
到此，關于“怎么使用ES6箭頭函數(shù)”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注創(chuàng)新互聯(lián)網站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
分享文章：怎么使用ES6箭頭函數(shù)
新聞來源：http://fisionsoft.com.cn/article/iidsdi.html
