函數 作為 JS 的一等公民，隨處可見它的身影。

我理解的它最主要作用就是用來提取重復代碼，但凡有 JS 代碼需要復制粘貼的時候，那么這時候就可以考慮使用函數封裝了。

當函數寫在對象中的時候，這時候它變了一個名字，稱之為 方法。

function 聲明

在使用 function 關鍵字聲明函數時，需注意聲明提升問題，意思就是 function 聲明的函數，不存在先后順序，任意位置都可以調用。

function test() {
  console.log('前端路引');
}
test() // 調用函數

test 就是函數的名字，函數名的規則和變量聲明差不多，只要不是數字和特殊字符開頭，語法規則都是允許的，包括都可以使用中文定義函數，雖然不建議這么使用！

function 測試() {
  console.log('前端路引');
}
測試() // 調用函數

聲明提升

function 定義的函數會提升到作用域頂部，所以可以在函數定義之前調用，比如：

test() // 此處可以調用 function 聲明的函數
const var1 = '前端路引 -- 1'
console.log(var1)
function test() {
  console.log('前端路引 -- 2');
}

輸出：

前端路引 -- 2
前端路引 -- 1

包括寫在 if 判斷中的 function 都會提升到作用域頂部，比如：

test()
if (false) {
  console.log('前端路引 -- 1'); // 此行代碼不會執行
  function test() {
    console.log('前端路引 --2');
  }
}

輸出：

前端路引 -- 2

所以不建議在條件語句中去使用 function 聲明函數！

函數表達式

函數表達式就是使用一個變量來保存函數，這種寫法有個好處是可以控制定義函數的邏輯。

聲明方式：

const test = function() {
  console.log('前端路引');
}
test()

表達式聲明的函數只能在聲明之后調用，如果在聲明之前調用，代碼會報錯：

test() // 報錯 ReferenceError: test is not defined
const test = function() {
  console.log('前端路引');
}

使用 var 聲明時會報錯 TypeError: test is not a function:

test() // 報錯 TypeError: test is not a function
var test = function() {
  console.log('前端路引');
}

在 if 中聲明的函數表達式，在外部無法調用：

if (false) {
  const test = function() {
    console.log('前端路引');
  }
}
test() // 報錯 ReferenceError: test is not defined

箭頭函數

箭頭函數的聲明與函數表達式有些相似，都需要通過變量保存。

聲明方式：

const test1 = () => {
  console.log('前端路引');
}
const test2 = (a, b) => a + b; // 單行時候可以省略花括號，直接返回值
// 等價于
// const test2 = (a, b) => {return a + b}
test1() // 輸出：前端路引
console.log(test2(1, 2)) // 輸出：3

箭頭函數和函數表達式的區別：

• 箭頭函數自身沒有 this 綁定，繼承外層作用域的 this。

const test1 = function () {
  console.log(this)
}
const test2 = () => {
  console.log(this)
}
test1.bind({a: '123'})() // 獲得對象 {a: '123'}
test2.bind({a: '123'})() // 獲得全局對象 window

• 由于沒有 this，所以也無法作為構造函數使用，不能使用 new 實例化。

const test1 = function () {
  console.log('前端路引')
}
const test2 = () => {
  console.log('前端路引')
}
new test1()
new test2() // 報錯 TypeError: test2 is not a constructor

• 箭頭函數也沒有 arguments 對象，所以無法通過 arguments 相關方法，比如 arguments.callee 獲取函數自身。

const test1 = function () {
  console.log(arguments) // 獲取到參數對象
}
const test2 = () => {
  console.log(arguments) // 報錯 ReferenceError: arguments is not defined
}
test1('前端路引')
test2('前端路引')

生成器函數

ES6 新增的聲明方式，常規的業務代碼一般很少使用（也可能是我的段位太低~~）。

function* test() {
  yield 1;
  yield 2;
}
const temp = test()
console.log(temp.next()) // 輸出：{value: 1, done: false}
console.log(temp.next()) // 輸出：{value: 2, done: false}
console.log(temp.next()) // 輸出：{value: undefined, done: true}

這種方式可以使用 yield 暫停函數執行，多用于異步迭代場景。

看一個異步使用 yield 例子：

function* testAsync() {
  const data = yield new Promise(resolve => {
    setTimeout(() => resolve('Hello World'), 1000); // 模擬異步操作
  });
  console.log(data); // 此處的 data 是 next 傳入數據，不是 Promise 返回數據
}
 
async function run() {
  const generator = testAsync();
  const result = await generator.next().value; // 等待 Promise
  generator.next(result); // 將結果傳遞回生成器并繼續執行
}
run()

構造函數 Function 聲明

雖然不建議使用這種聲明函數，咱們學習了解一下還是沒問題的。

const test = new Function('a', 'b', 'return a + b');
console.log(test(1, 2))

問題：

1、通過字符串動態生成代碼，存在安全風險，容易出現代碼注入攻擊。
2、每次都會解析字符串，性能會比較低。

寫在最后

函數 作為 JS 語言中的一等公民，幾種聲明方式區別是面試中的常客，經常被問及 箭頭函數 與 function 有哪些區別。

函數 是基礎，也是函數式編程的核心，必須熟練掌握~~

轉自https://www.cnblogs.com/linx/p/18922032