前言：

箭頭函數(shù)是ES6新增的定義函數(shù)的方式，我們可以使用()=>{}來頂替以前的函數(shù)定義方式，下面從五個(gè)使用姿勢(shì)與三點(diǎn)注意事項(xiàng)來刨析箭頭函數(shù)。

使用

簡略編寫

當(dāng)我們箭頭函數(shù)函數(shù)只有一個(gè)參數(shù)的時(shí)候是可以將()省略，當(dāng)代碼塊只有一行的時(shí)候可以將{}與return省略

const fn = num => num.sort();
console.log(fn([2, 1, 3])); // [1,2,3]

如上代碼塊只有一個(gè)參數(shù)num且只有一行代碼return num.sort()，所以將()，{}與return省略

結(jié)合解構(gòu)賦值

為了進(jìn)一步簡化還可以與解構(gòu)賦值結(jié)合使用

let person = {
 ?name: "豬痞惡霸",
 ?age: 12,
};
const fn = ({ name, age }) => name + "今年" + age + "歲了";
console.log(fn(person)); // 豬痞惡霸今年12歲了

使用解構(gòu)賦值直接將name與age解構(gòu)，替換了person,name的用法，使函數(shù)更加簡潔。

結(jié)合擴(kuò)展運(yùn)算符

在函數(shù)參數(shù)定義中可以結(jié)合rest參數(shù)搭配使用

const fn = (...arr) => arr.sort();
console.log(fn(2, 1, 4)); // [1,2,4]

使用...arr將所有參數(shù)都包裹在內(nèi)，在函數(shù)體內(nèi)進(jìn)行一些需要的操作。

this指向的改變

在箭頭函數(shù)中使用this，它的指向是不變的，因?yàn)榧^函數(shù)沒有擁有屬于自己的this，其指向的是函數(shù)定義時(shí)所在的對(duì)象 , 所以箭頭函數(shù)的出現(xiàn)往往就頂替了我們常用的let _that = this又或者在函數(shù)結(jié)尾使用綁定this指向的對(duì)象來解決在函數(shù)體內(nèi)this的問題

var name = "fzf404";
function set() {
 ?setTimeout(() => {
 ? ?console.log(this.name);
  }, 1000);
}
set(); // fzf404
set.call({ name: "豬痞惡霸" }); // 豬痞惡霸

如上例子，在全局中聲明了一個(gè)name變量，我們?cè)偻ㄟ^call()綁定新的對(duì)象{ name: "豬痞惡霸" }，在set函數(shù)執(zhí)行的時(shí)候，箭頭函數(shù)被定義，而被定義的時(shí)候其已經(jīng)通過set.call()更改了指向的對(duì)象，所以打印出的是新的對(duì)象中的name屬性，這就是箭頭函數(shù)的this指向特點(diǎn)，如果是普通函數(shù)，其指向依舊是頂層對(duì)象。

綁定this

在之前ES5可以通過bind，call，apply來顯式綁定this對(duì)象，而箭頭函數(shù)的出現(xiàn)打破了這種局面，同時(shí)也配套使用::來作為函數(shù)綁定的方式

::的使用方法：將要綁定的對(duì)象放在::的左邊，函數(shù)放在::的右邊，執(zhí)行后，函數(shù)內(nèi)的this就會(huì)指向綁定的對(duì)象

obj::fn
// 等同于
fn.bind(obj)

如上，原來的顯式綁定方式與使用::的綁定方式進(jìn)行一個(gè)比較，看過二者的比較就可以了解::的使用了。

注意細(xì)節(jié)

關(guān)于構(gòu)造

箭頭函數(shù)無法作為一個(gè)構(gòu)造函數(shù)，所以無法通過new命令來構(gòu)造

const fn = () => {}
let _fn = new fn() // fn is not a constructor

如上，如果使用new來構(gòu)造的化就會(huì)拋出fn不是一個(gè)構(gòu)造函數(shù)

關(guān)于參數(shù)對(duì)象

在箭頭函數(shù)內(nèi)是無法使用arguments即參數(shù)對(duì)象，因?yàn)樵谄浜瘮?shù)體內(nèi)部不存在arguments對(duì)象當(dāng)然我們可以使用擴(kuò)展運(yùn)算符來代替其使用，比使用參數(shù)對(duì)象方便。

const fn = () => {
 ? ?console.log(arguments)
}
fn() // arguments is not defined

關(guān)于yield命令

箭頭函數(shù)無法使用yield命令，也就是說無法將箭頭函數(shù)轉(zhuǎn)變?yōu)樯善骱瘮?shù)，具體是為什么，我的直觀感受就是作為生成器必須是function*，而箭頭函數(shù)的形式無法作為一個(gè)生成器。

了解到這里，下面我們來看一道經(jīng)典的面試題。

面試題

let name = "豬痞惡霸";
let person = {
 ? ?name:"fzf404",
 ? ?fn: () => {
 ? ? ? ?setTimeout(() => {
 ? ? ? ? ? ?console.log(this.name);
 ? ? ?  })
 ?  }
}
person.fn();

上面是一道考察箭頭函數(shù)，this指向，作用域的面試題，它的打印結(jié)果為undefined，我們來一點(diǎn)一點(diǎn)分析

• 使用let在下聲明了一個(gè)name
• 再聲明一個(gè)對(duì)象，內(nèi)含一個(gè)name屬性和一個(gè)方法，該方法使用定時(shí)器并打印this.name
• 調(diào)用對(duì)象的這個(gè)方法，this開始尋找
• 定時(shí)器中的箭頭函數(shù)沒有this，向上尋找，到達(dá)person，由于person是一個(gè)對(duì)象，所以它的{}包裹的不是作用域
• 繼續(xù)向上尋找，到達(dá)了頂層對(duì)象window
• 查看window內(nèi)是否含有name屬性，由于使用let聲明，所以其屬性不在window中，打印出undefined

到此這篇關(guān)于JavaScript箭頭函數(shù)的五種使用方法及三點(diǎn)注意事項(xiàng)的文章就介紹到這了,更多相關(guān)JS箭頭函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論