更新時間:2022年07月27日17時37分 來源:傳智教育 瀏覽次數(shù):
箭頭函數(shù)是ES6中新增的函數(shù),它用于簡化函數(shù)的定義語法,有自己的特殊語法,接收一定數(shù)量的參數(shù),并在其封閉的作用域的上下文(即定義它們的函數(shù)或其他代碼)中操作。
箭頭函數(shù)基本語法,具體如下:
0=>{}
箭頭函數(shù)以小括號開頭,在小括號中可以放置參數(shù)。小括號的后面要跟著箭頭(=>),箭頭后面要寫一個大括號來表示函數(shù)體,這是箭頭函數(shù)的固定語法。
箭頭函數(shù)調(diào)用:因為箭頭函數(shù)沒有名字,我們通常的做法是把箭頭函數(shù)賦值給一個變量,變量名就是函數(shù)名,然后通過變量名去調(diào)用函數(shù)即可。
<script> const fn = () => { console.log(123); ∥輸出結(jié)果:123 }; fn();∥函數(shù)調(diào)用 </script>
特點1:省略大括號
在箭頭函數(shù)中,如果函數(shù)體中只有一句代碼,且代碼的執(zhí)行結(jié)果就是函數(shù)的返回值,此時可以省略函數(shù)體大括號。計算兩個數(shù)值相加的結(jié)果,示例代碼如下:<script> const sum = (numl, num2) => num1 + num2; //等價于 // const sum = (num1, num2)=>{ // return num1 + num2; //}; const result = sum(10, 20); //使用result接收sum() 函數(shù)執(zhí)行的結(jié)果 console.log(result); //在控制臺輸出result值, 結(jié)果為30 </script>
特點2:省略參數(shù)外部的小括號
在箭頭函數(shù)中,如果參數(shù)只有一個,可以省略參數(shù)外部的小括號。只有一個參數(shù)的函數(shù)定義方式,示例代碼如下:
<script> //傳統(tǒng)的函數(shù)定義方式 //function fn(v){ // return v; //} //ES6中函數(shù)定義方式 const fn = v => v; </script>
特點2:省略參數(shù)外部的小括號
定義帶有一個參數(shù)的函數(shù),并在瀏覽器的彈出框中彈出參數(shù)值。示例代碼如下:
<script> const fn = v =>{ alert(v); }; fn(20); </script>
ES6前,JavaScript的this關(guān)鍵字指向的對象是在運行時基于函數(shù)的執(zhí)行環(huán)境綁定的,在全局函數(shù)中,this指向的是window;當函數(shù)被作為某個對象的方法調(diào)用時,this就指向那個對象。
ES6中,箭頭函數(shù)不綁定this關(guān)鍵字,它沒有自己的this關(guān)鍵字,如果在箭頭函數(shù)中使用this關(guān)鍵字,那么this關(guān)鍵字指向的是箭頭函數(shù)定義位置的上下文this。也就是說,箭頭函數(shù)被定義在哪,箭頭函數(shù)中的this就指向誰。
箭頭函數(shù)解決了this執(zhí)行環(huán)境所造成的一些問題,如解決了匿名函數(shù)this指向的問題(匿名函數(shù)的執(zhí)行環(huán)境具有全局性),包括setTimeout()和setInterval(0中使用this所造成的問題。
<script> const obj = { name: 'zhangsan' }; function fn(){ console.log(this); //輸出結(jié)果:{name:"zhangsan"} return () =>{ console.log(this); //輸出結(jié)果:{name:"zhangsan"} }; } // call()方法可以改變函數(shù)內(nèi)部的this指向,將函數(shù)fn(0內(nèi)部的this指向obj對象 const resFn = fn.call(obj); resFn(); </script>