深入理解JavaScript中的箭頭函數(shù)

我們深入研究一下箭頭函數(shù)。

箭頭函數(shù)不僅僅是編寫簡潔代碼的“捷徑”。它還具有非常特殊且有用的特性。

JavaScript 充滿了我們需要編寫在其他地方執(zhí)行的小函數(shù)的情況。

例如：

arr.forEach(func) —— forEach 對每個數(shù)組元素都執(zhí)行 func。
setTimeout(func) —— func 由內(nèi)建調(diào)度器執(zhí)行。
……還有更多。

JavaScript 的精髓在于創(chuàng)建一個函數(shù)并將其傳遞到某個地方。

在這樣的函數(shù)中，我們通常不想離開當(dāng)前上下文。這就是箭頭函數(shù)的主戰(zhàn)場啦。

一、箭頭函數(shù)沒有 “this”

正如我們在對象方法，"this" 一章中所學(xué)到的，箭頭函數(shù)沒有 this。如果訪問 this，則會從外部獲取。

例如，我們可以使用它在對象方法內(nèi)部進行迭代：

let group = {
  title: "Our Group",
  students: ["John", "Pete", "Alice"],

  showList() {
    this.students.forEach(
      student => alert(this.title + ': ' + student)
    );
  }
};

group.showList();

這里 forEach 中使用了箭頭函數(shù)，所以其中的 this.title 其實和外部方法 showList 的完全一樣。那就是：group.title。

如果我們使用正常的函數(shù)，則會出現(xiàn)錯誤：

let group = {
  title: "Our Group",
  students: ["John", "Pete", "Alice"],

  showList() {
    this.students.forEach(function(student) {
      // Error: Cannot read property 'title' of undefined
      alert(this.title + ': ' + student)
    });
  }
};

group.showList();

報錯是因為 forEach 運行它里面的這個函數(shù)，但是這個函數(shù)的 this 為默認(rèn)值 this=undefined，因此就出現(xiàn)了嘗試訪問 undefined.title 的情況。

但箭頭函數(shù)就沒事，因為它們沒有 this。

不能對箭頭函數(shù)進行 new 操作

不具有 this 自然也就意味著另一個限制：箭頭函數(shù)不能用作構(gòu)造器（constructor）。不能用 new 調(diào)用它們。

箭頭函數(shù) VS bind

箭頭函數(shù) => 和使用 .bind(this) 調(diào)用的常規(guī)函數(shù)之間有細(xì)微的差別：

.bind(this) 創(chuàng)建了一個該函數(shù)的“綁定版本”。
箭頭函數(shù) => 沒有創(chuàng)建任何綁定。箭頭函數(shù)只是沒有 this。this 的查找與常規(guī)變量的搜索方式完全相同：在外部詞法環(huán)境中查找。

二、箭頭函數(shù)沒有 “arguments”

箭頭函數(shù)也沒有 arguments 變量。

當(dāng)我們需要使用當(dāng)前的 this 和 arguments 轉(zhuǎn)發(fā)一個調(diào)用時，這對裝飾器（decorators）來說非常有用。

例如，defer(f, ms) 獲得了一個函數(shù)，并返回一個包裝器，該包裝器將調(diào)用延遲 ms 毫秒：

function defer(f, ms) {
  return function() {
    setTimeout(() => f.apply(this, arguments), ms)
  };
}

function sayHi(who) {
  alert('Hello, ' + who);
}

let sayHiDeferred = defer(sayHi, 2000);
sayHiDeferred("John"); // 2 秒后顯示：Hello, John

不用箭頭函數(shù)的話，可以這么寫：

function defer(f, ms) {
  return function(...args) {
    let ctx = this;
    setTimeout(function() {
      return f.apply(ctx, args);
    }, ms);
  };
}

在這里，我們必須創(chuàng)建額外的變量 args 和 ctx，以便 setTimeout 內(nèi)部的函數(shù)可以獲取它們。

三、總結(jié)

箭頭函數(shù)：

沒有 this
沒有 arguments
不能使用 new 進行調(diào)用
它們也沒有 super，但目前我們還沒有學(xué)到它。我們將在類繼承一章中學(xué)習(xí)它。

這是因為，箭頭函數(shù)是針對那些沒有自己的“上下文”，但在當(dāng)前上下文中起作用的短代碼的。并且箭頭函數(shù)確實在這種使用場景中大放異彩。

念

ES6標(biāo)準(zhǔn)新增了一種新的函數(shù)：Arrow Function（箭頭函數(shù)）。為什么叫Arrow Function？

因為它的定義用的就是一個箭頭：

x => x * x

示例相當(dāng)于如下代碼：

function (x) {
    return x * x;
}

JavaScript箭頭函數(shù)是ECMAScript 6中引入的編寫函數(shù)表達(dá)式的一種簡便方法。

箭頭函數(shù)的語法如下：

(parameters) => { statements }

如果沒有參數(shù)，則表示一個箭頭函數(shù)，如下所示：

() => { statements }

當(dāng)您只有一個參數(shù)時，左括號是可選的：

parameters => { statements }

如果包含只返回返回表達(dá)式，請刪除方括號：

parameters => expression

帶來的好處

簡潔的語法

讓我們看一下常規(guī)函數(shù)：

function funcName(params) { 
  return params + 2; 
}
funcName(2); // 4

然后通過箭頭函數(shù)精簡之后為：

var funcName=params => params+2;
funcName(2); // 4

可以看到通過箭頭函數(shù)實現(xiàn)之后，語法更加精簡。

不綁定this

與常規(guī)函數(shù)不同，箭頭函數(shù)不綁定this。相反，它是在詞匯上綁定的(即this保持其原始上下文的含義)。

由于JavaScript函數(shù)對this綁定的錯誤處理，下面的例子無法得到預(yù)期結(jié)果：

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = function () {
            return 2020 - this.birth; // this指向window或undefined
        };
        return fn();
    }
};

但是，箭頭函數(shù)完全修復(fù)了this的指向，this總是指向詞法作用域，也就是外層調(diào)用者obj：

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = () => 2020 - this.birth; // this指向obj對象
        return fn();
    }
};
obj.getAge(); // 30

使用箭頭函數(shù)的限制條件

應(yīng)用箭頭函數(shù)時要注意的一些限制條件：

箭頭函數(shù)沒有參數(shù)對象。

箭頭函數(shù)不能與新運算符一起使用，因此它不能用作構(gòu)造函數(shù)。

箭頭函數(shù)沒有原型屬性。

如果你嘗試使用箭頭函數(shù)作為構(gòu)造函數(shù)，那么你會得到異常。請看下面的代碼：

var foo = (name, age) => { name = name, age = age };
var f1 = new foo("cat", 6);

代碼試圖通過使用箭頭函數(shù)foo作為構(gòu)造函數(shù)來創(chuàng)建對象f1，JavaScript將拋出以下異常：

而且，當(dāng)你試圖輸出箭頭函數(shù)的原型值時，你會得到undefined的輸出：

var foo = (name, age) => { name = name, age = age };
console.log(foo.prototype);

發(fā)生這種情況的原因是因為箭頭函數(shù)沒有原型屬性。請記住：雖然箭頭函數(shù)為你提供了編寫函數(shù)表達(dá)式的簡短方法，但它沒有自己的this值，也不能用作構(gòu)造函數(shù)。

言

在React中，事件處理函數(shù)是與用戶交互的關(guān)鍵點，而向這些函數(shù)傳遞參數(shù)則是實現(xiàn)復(fù)雜邏輯和狀態(tài)更新的基礎(chǔ)。無論是使用箭頭函數(shù)還是bind方法，正確地傳遞參數(shù)對于構(gòu)建響應(yīng)式和動態(tài)的用戶界面至關(guān)重要。本文將深入探討這兩種方法的優(yōu)劣，通過示例代碼和解析，幫助你做出更合適的選擇。

箭頭函數(shù)傳參

箭頭函數(shù)是ES6引入的一種簡潔的函數(shù)定義方式，它在React事件處理中特別受歡迎，因為它自動綁定this到當(dāng)前上下文，消除了額外綁定的需要。此外，箭頭函數(shù)非常適合用于立即執(zhí)行的事件處理器，特別是當(dāng)你需要在調(diào)用時傳遞參數(shù)時。

示例代碼：

1import React, { Component } from 'react';
2
3class ItemList extends Component {
4  deleteItem = (index) => {
5    console.log(`Deleting item at index ${index}`);
6    // 進行刪除邏輯
7  };
8
9  render() {
10    return (
11      <div>
12        {/* 假設(shè)items是一個數(shù)組 */}
13        {this.props.items.map((item, index) => (
14          <div key={index}>
15            {item.name}
16            <button onClick={() => this.deleteItem(index)}>
17              Delete
18            </button>
19          </div>
20        ))}
21      </div>
22    );
23  }
24}
25
26export default ItemList;

在上述代碼中，我們?yōu)槊總€<button>元素綁定了一個箭頭函數(shù)，該函數(shù)在調(diào)用時接收index作為參數(shù)。這種方法的主要優(yōu)點是它保持了代碼的簡潔性和可讀性，同時避免了this綁定的問題。

使用bind方法傳參

bind方法是JavaScript原生提供的一種函數(shù)方法，用于創(chuàng)建一個新的函數(shù)，其中this被綁定到給定的對象，任何額外的參數(shù)都會作為新函數(shù)的參數(shù)被預(yù)置。在React中，你也可以使用bind方法來為事件處理函數(shù)傳遞參數(shù)。

示例代碼：

import React, { Component } from 'react';

class ItemList extends Component {
  deleteItem = (index) => {
    console.log(`Deleting item at index ${index}`);
    // 進行刪除邏輯
  };

  render() {
    return (
      <div>
        {/* 假設(shè)items是一個數(shù)組 */}
        {this.props.items.map((item, index) => (
          <div key={index}>
            {item.name}
            <button onClick={this.deleteItem.bind(this, index)}>
              Delete
            </button>
          </div>
        ))}
      </div>
    );
  }
}

export default ItemList;

盡管使用bind方法可以有效地傳遞參數(shù)，但它在每次渲染時都會創(chuàng)建一個新的函數(shù)實例，這可能導(dǎo)致不必要的性能開銷，尤其是在處理大量元素時。

性能考量與最佳實踐

雖然箭頭函數(shù)和bind方法都可以用來在事件處理器中傳遞參數(shù)，但箭頭函數(shù)通常被認(rèn)為是更好的選擇，原因如下：

性能：箭頭函數(shù)不會在每次渲染時創(chuàng)建新的函數(shù)實例，這有助于減少不必要的重渲染，提高應(yīng)用性能。
簡潔性：箭頭函數(shù)的語法更加簡潔，使代碼更具可讀性。
this綁定：箭頭函數(shù)自動綁定this到定義它的上下文，避免了額外的綁定操作。

結(jié)語

在React中，選擇正確的事件處理方法和參數(shù)傳遞策略對于構(gòu)建高效、可維護的應(yīng)用程序至關(guān)重要。通過理解箭頭函數(shù)和bind方法的差異，你可以根據(jù)具體場景選擇最合適的方案。在大多數(shù)情況下，箭頭函數(shù)因其簡潔性和性能優(yōu)勢而成為首選。然而，根據(jù)項目的具體需求，bind方法在某些特定場景下也可能是一個合理的備選方案。

通過本文的探討，你不僅掌握了如何在React事件處理中有效傳遞參數(shù)，還對箭頭函數(shù)和bind方法的優(yōu)劣有了更深刻的認(rèn)識。在未來的開發(fā)實踐中，記得綜合考慮性能、可讀性和維護性，選擇最適合你項目的技術(shù)方案。

#頭條創(chuàng)作挑戰(zhàn)賽#

在線咨詢

上一篇：Vue.js的6個最佳表單生成器組件
下一篇：JavaScript設(shè)置頁面元素的滾動條一直最下方

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商