JavaScript箭頭函數的使用方法有哪些

本文小編為大家詳細介紹“JavaScript箭頭函數的使用方法有哪些”，內容詳細，步驟清晰，細節處理妥當，希望這篇“JavaScript箭頭函數的使用方法有哪些”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

前言：

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

使用

簡略編寫

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

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

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

結合解構賦值

為了進一步簡化還可以與解構賦值結合使用

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

使用解構賦值直接將name與age解構，替換了person,name的用法，使函數更加簡潔。

結合擴展運算符

在函數參數定義中可以結合rest參數搭配使用

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

使用...arr將所有參數都包裹在內，在函數體內進行一些需要的操作。

this指向的改變

在箭頭函數中使用this，它的指向是不變的，因為箭頭函數沒有擁有屬于自己的this，其指向的是函數定義時所在的對象 , 所以箭頭函數的出現往往就頂替了我們常用的let _that = this又或者在函數結尾使用綁定this指向的對象來解決在函數體內this的問題

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

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

綁定this

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

::的使用方法：將要綁定的對象放在::的左邊，函數放在::的右邊，執行后，函數內的this就會指向綁定的對象

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

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

注意細節

關于構造

箭頭函數無法作為一個構造函數，所以無法通過new命令來構造

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

如上，如果使用new來構造的化就會拋出fn不是一個構造函數

關于參數對象

在箭頭函數內是無法使用arguments即參數對象，因為在其函數體內部不存在arguments對象當然我們可以使用擴展運算符來代替其使用，比使用參數對象方便。

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

關于yield命令

箭頭函數無法使用yield命令，也就是說無法將箭頭函數轉變為生成器函數，具體是為什么，我的直觀感受就是作為生成器必須是function*，而箭頭函數的形式無法作為一個生成器。

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

面試題

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

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

• 使用let在下聲明了一個name

• 再聲明一個對象，內含一個name屬性和一個方法，該方法使用定時器并打印this.name

• 調用對象的這個方法，this開始尋找

• 定時器中的箭頭函數沒有this，向上尋找，到達person，由于person是一個對象，所以它的{}包裹的不是作用域

• 繼續向上尋找，到達了頂層對象window

• 查看window內是否含有name屬性，由于使用let聲明，所以其屬性不在window中，打印出undefined

讀到這里，這篇“JavaScript箭頭函數的使用方法有哪些”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。