定義這樣一個方法:Element.prototype.hide = function() { this.style.display = 'none' }這樣做的話,在使用Element的實例調用該該方法時,可以正常綁定this的值。但是,如果改成這樣:Element.prototype.hide = () => { this.style.display = 'none' }就會報錯,查看babel解析后的代碼,發現this沒有綁定上:Element.prototype.hide = function() { undefined.style.display = 'none' }查看了MDN以后,MDN告訴我說箭頭函數是自動尋找上下文中的this值給自己賦值。對此我感到不解:我這段代碼是寫在最外層的,那么this的值不應該是window嗎?也就是說,即使執行不了,這個函數轉化后不應該是如下這樣嗎:Element.prototype.hide = function() { window.style.display = 'none' }嘗試了一下,在外面包裹一層function,將里面的箭頭函數做成IIFE,由于獲得了上下文,箭頭函數可以正常使用了:Element.prototype.show = function() {(() => { this.style.display = 'block' })()}但是這么寫就太二了,我本意是想用箭頭函數讓代碼簡潔點,這樣還不如用一開始的function寫法。所以有什么方法能夠讓箭頭函數正常獲取到this值呢,或者說定義方法時不能用箭頭函數?求各位高手解惑。
在定義對象內部的新方法時,如何使用箭頭函數?
弒天下
2018-09-05 11:13:45