什么是箭頭函數(shù)？箭頭函數(shù)中this關(guān)鍵字的用法
箭頭函數(shù)是ES6中新增的函數(shù)，它用于簡化函數(shù)的定義語法，有自己的特殊語法，接收一定數(shù)量的參數(shù)，并在其封閉的作用域的上下文(即定義它們的函數(shù)或其他代碼)中操作。
ES6中，箭頭函數(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>
箭頭函數(shù)的特點
特點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>
箭頭函數(shù)中的this關(guān)鍵字
ES6前，JavaScript的this關(guān)鍵字指向的對象是在運行時基于函數(shù)的執(zhí)行環(huán)境綁定的，在全局函數(shù)中，this指向的是window;當(dāng)函數(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>
