卡卡網(wǎng)

常規(guī)函數(shù)也好，箭頭函數(shù)也好，你什么時(shí)候會選擇一個(gè)而不是另一個(gè)？這就需要了解它們之間的一些區(qū)別了，在這篇文章中，我將介紹箭頭函數(shù)與常規(guī)函數(shù)區(qū)別之：參數(shù)對象，以便你可以根據(jù)需要選擇正確的語法。

常規(guī)函數(shù)

在常規(guī)函數(shù)的主體內(nèi)部，arguments是一個(gè)特殊的類數(shù)組對象，其中包含調(diào)用該函數(shù)的參數(shù)列表。

常規(guī)函數(shù)訪問arguments

讓我們用 2 個(gè)參數(shù)調(diào)用myFunction()函數(shù)：

function myFunction() {
  console.log(arguments);
}
myFunction('a', 'b'); // logs { 0: 'a', 1: 'b', length: 2 }

輸出

在myFunction()函數(shù)體內(nèi)部arguments是一個(gè)類似數(shù)組的對象，其中包含調(diào)用參數(shù)：'a'和'b'。

箭頭函數(shù)

對于箭頭函數(shù)，arguments在箭頭函數(shù)內(nèi)部沒有定義特殊關(guān)鍵字。

與箭頭函數(shù)的this值相同，arguments對象是通過詞法解析的：箭頭函數(shù)從外部函數(shù)訪問arguments。

箭頭函數(shù)內(nèi)部訪問arguments

讓我們在箭頭函數(shù)內(nèi)部嘗試訪問arguments： 

function myRegularFunction() {
  const myArrowFunction = () => {
    console.log(arguments);
  }
  myArrowFunction('c', 'd');
}
myRegularFunction('a', 'b'); // logs { 0: 'a', 1: 'b', length: 2 }

輸出

可以看到，調(diào)用帶有參數(shù)c和d的箭頭函數(shù)myArrowFunction()時(shí)，在它的函數(shù)體內(nèi)，arguments對象仍然等于myRegularFunction()函數(shù)調(diào)用的參數(shù)：a和b。

訪問箭頭函數(shù)的直接參數(shù)

如果你想訪問箭頭函數(shù)的直接參數(shù)，則可以使用其余參數(shù)功能： 

function myRegularFunction() {
  const myArrowFunction = (...args) => {
    console.log(args);
  }
  myArrowFunction('c', 'd');
}
myRegularFunction('a', 'b'); // logs ['c', 'd']

輸出

...args 其余參數(shù)收集箭頭函數(shù)的執(zhí)行參數(shù)：['c', 'd']。

總結(jié)

本文通過幾個(gè)示例，介紹了箭頭函數(shù)與常規(guī)函數(shù)的區(qū)別之：arguments(參數(shù)對象)，通過本文的學(xué)習(xí)，我們應(yīng)該了解到，箭頭函數(shù)是從外部函數(shù)訪問arguments的，而arguments是常規(guī)函數(shù)的對象。

相關(guān)文章

• 【示例】分析箭頭函數(shù)中的this值
• 新手指南：理解JS中的箭頭函數(shù)和常規(guī)函數(shù)
• 不能使用箭頭函數(shù)的6種情況
• [實(shí)例]演示區(qū)別箭頭函數(shù)和常規(guī)函數(shù)的this值
• 箭頭函數(shù)=>不能換行？大括號{}這種情況下可以不要
• 實(shí)例演示無參數(shù)、單參數(shù)、多參數(shù)的箭頭函數(shù)用法
• 實(shí)例詳解JS箭頭函數(shù)=>與傳統(tǒng)匿名函數(shù)處理this的不同方法

標(biāo)簽: 箭頭函數(shù)