前言：

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

使用

簡略編寫

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

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

如上代碼塊只有一個參數(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ò)展運算符

在函數(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，它的指向是不變的，因為箭頭函數(shù)沒有擁有屬于自己的this，其指向的是函數(shù)定義時所在的對象 , 所以箭頭函數(shù)的出現(xiàn)往往就頂替了我們常用的let _that = this又或者在函數(shù)結(jié)尾使用綁定this指向的對象來解決在函數(shù)體內(nèi)this的問題

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

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

綁定this

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

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

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

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

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

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

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

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

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

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

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

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

關(guān)于yield命令

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

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

面試題

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

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

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

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

最新評論