箭頭函數應用場景簡化函數的定義簡化函數執行上下文綁定的方式
箭頭函數在ES6的標準中被引入,可用于替代傳統定義函數的寫法,一般用在函數本身代碼量較少,且處理邏輯簡單的場景,此時可以用箭頭函數替代掉原有函數的寫法。但是如果函數的代碼量較大以及處理邏輯較為復雜的時候還是使用傳統的函數定義方法。
編寫一個立即執行的函數,傳統定義方式
!function(){ console.log('hello world');}();使用箭頭函數
(()=>{console.log('hello world');})();函數作為參數傳遞 傳統的做法
[1,2,3].map(function(x){ return x*x;});使用箭頭函數
[1,2,3].map((x)=>{return x*x;});更簡單的寫法
[1,2,3].map((x)=>x*x);//函數體中只有一個return 所以可以去掉花括號以及return,只寫需要計算返回值的表達式this在js里面使用場景較多,切換也比較頻繁,因此帶來了各種運行時因為上下文切換導致錯誤,如下代碼:
function c(){ this.test = 'hello'; this.PRint = function(){ setTimeout(function(){console.log(this.test);},1000); } } var m = new c(); m.print();由于使用了setTimeout 在1000ms以后執行console中的內容,此時this已經不代表c對象實例,此時this為全局的this,所以運行時輸出undefined。此種情況下傳統的做法可以使用Function.prototype.bind 將執行的上下文綁定在函數上面
能夠正常的輸出值 使用箭頭函數可以讓這一過程更簡單
function c(){ this.test = 'hello'; this.print = function(){ setTimeout(()=>{console.log(this.test);},1000); } } var m = new c(); m.print();新聞熱點
疑難解答