簡言

學了這么久的JavaScript，函數(shù)在JavaScript中最常用之一，如果你不會函數(shù)，你就不會JavaScript。
函數(shù)就是Function對象，一個函數(shù)是可以通過外部代碼調(diào)用的一個“子程序”，它是頭等（first-class）對象，因為它們可以像任何其他對象一樣具有屬性和方法。瞧瞧它的定義，注定它能做很多事情。
**函數(shù)是函數(shù)名、參數(shù)和函數(shù)體組成，然后由function聲明。**我們一般說函數(shù)是指普通函數(shù)，還有另一種函數(shù)叫做生成器函數(shù)，這個生成器比較比較高級，生成器函數(shù)在執(zhí)行時能暫停，后面又能從暫停處繼續(xù)執(zhí)行，這里不展開描述。

函數(shù)

在 JavaScript 中，每個函數(shù)其實都是一個Function對象。函數(shù)默認返回undefined

定義函數(shù)

聲明一個函數(shù)（Function對象）有很多種方式。如果一個函數(shù)中沒有使用 return 語句，則它默認返回undefined。要想返回一個特定的值，可以使用return 返回。

function聲明

由function聲明的函數(shù)，函數(shù)名會提升這個作用域的頂部，即在函數(shù)定義前也能使用。

function name([param[, param[, ... param]]]) { statements }

• name 函數(shù)名。
• param 傳遞給函數(shù)的參數(shù)的名稱。
• statements 組成函數(shù)體的聲明語句。

函數(shù)表達式

由函數(shù)表達式創(chuàng)建的函數(shù)，函數(shù)名不會會提升，即必須在創(chuàng)建之后使用。

var myFunction = function name([param[, param[, ... param]]]) { statements }

• name 函數(shù)名，可以省略，省略了后是匿名函數(shù)。
• param 傳遞給函數(shù)的參數(shù)的名稱。
• statements 組成函數(shù)體的聲明語句。

立即調(diào)用函數(shù)(IIFE)

當函數(shù)只使用一次時，通常使用IIFE (Immediately Invokable Function Expressions)。意思是當這個js文件被執(zhí)行時調(diào)用一次。

(function () {
  statements;
})();

• statements 組成函數(shù)體的聲明語句。

箭頭函數(shù)表達式（=>）

箭頭函數(shù)是函數(shù)

var fn = ([param] [, param]) => { statements } param => expression

• param 參數(shù)名稱。
  零參數(shù)需要用 () 表示。只有一個參數(shù)時不需要括號。(例如 foo => 1)
• statements or expression
  多個聲明 statements 需要用大括號括起來，而單個表達式時則不需要。表達式 expression 也是該函數(shù)的隱式返回值。

Function構(gòu)造函數(shù) （不推薦）

函數(shù)(Function對象)可以用 new 操作符創(chuàng)建。
把 Function 的構(gòu)造函數(shù)當作函數(shù)一樣調(diào)用 (不使用 new 操作符) 的效果與作為 Function 的構(gòu)造函數(shù)調(diào)用一樣。

new Function (arg1, arg2, ... argN, functionBody)

• arg1, arg2, … argN
  函數(shù)使用零個或多個名稱作為正式的參數(shù)名稱。每一個必須是一個符合有效的 JavaScript 標識符規(guī)則的字符串或用逗號分隔的字符串列表，例如“x”,“theValue”或“a,b”。

• functionBody
  一個構(gòu)成的函數(shù)定義的，包含 JavaScript 聲明語句的字符串。

函數(shù)參數(shù)

函數(shù)參數(shù)（形參）一個重要的概念，它是函數(shù)體與外面作用域交互的媒介或橋梁。普通的參數(shù)由js各種類型定義,除此之外，它還有this、剩余參數(shù)和arguments對象。

形參

普通的參數(shù)由js各種類型定義，定義的參數(shù)可以在函數(shù)內(nèi)使用，想傳啥就傳啥。
調(diào)用傳參時，則按你定義參數(shù)的順序傳。

function fnParams(
  name,
  age = 18,
  object = {
    label: 'object形參',
  },
  fn = () => {},
  date = new Date(),
  arr = []
) {
  console.log(name, age, object, fn, date, arr)
}
fnParams()

調(diào)用時不傳參數(shù)，參數(shù)為undefined,有默認值則值為默認值。

arguments對象

arguments 是一個對應于傳遞給函數(shù)的參數(shù)的類數(shù)組對象。
arguments對象是所有（非箭頭）函數(shù)中都可用的局部變量。你可以使用arguments對象在函數(shù)中引用函數(shù)的參數(shù)。
箭頭函數(shù)使用arguments在瀏覽器環(huán)境下會報錯。

function fnParams(
  name,
  age = 18,
  object = {
    label: 'object形參',
  },
  fn = () => {},
  date = new Date(),
  arr = []
) {
  console.log(name, age, object, fn, date, arr)
  console.log(arguments)
}
fnParams('zsk', () => {})

const fn = (name) => {
  console.log(name, arguments)
}
fn('zsk')

剩余參數(shù)

剩余參數(shù)是es6的，剩余參數(shù)語法允許我們將一個不定數(shù)量的參數(shù)表示為一個數(shù)組。
如果函數(shù)的最后一個命名參數(shù)以…為前綴，則它將成為一個由剩余參數(shù)組成的真數(shù)組，其中從0（包括）到theArgs.length（排除）的元素由傳遞給函數(shù)的實際參數(shù)提供。

function(a, b, ...theArgs) {
  // ...
}

如上，theArgs就是剩余參數(shù)，它是一個數(shù)組，包含那些沒有對應形參的實參，默認值[],不能更改默認值。

let fn = function (a, ...args) {
  console.log(a, args)
}
fn(1, 2, 3)

this

在絕大多數(shù)情況下，函數(shù)的調(diào)用方式?jīng)Q定了 this 的值（運行時綁定）。this 不能在執(zhí)行期間被賦值，并且在每次函數(shù)被調(diào)用時 this 的值也可能會不同?？梢允褂?bind 方法來設置函數(shù)的 this 值，而不用考慮函數(shù)如何被調(diào)用的。箭頭函數(shù)本身沒有this,值為創(chuàng)建時外層上下文對象。

function fn2() {
  console.log('fn2::', this)
  const arrowFn = (a = 1) => {
    console.log('()=>{} ::', this)
  }
  const fn = function (a = 1) {
    console.log('fn::', this)
  }
  arrowFn()
  fn()
  let o = {
    fn: fn,
  }
  o.fn()
}
fn2()

bind（）、call() 和 apply()方法可以改變this值。

a = 1
const obj = {
  a: 2,
}
function fn3() {
  // 'use strict'
  console.log(this.a)
  return this
}
fn3()

fn3.bind(obj)()
fn3()
fn3.bind()()
fn3.call(obj, 1, 2)
fn3()
fn3.call()

fn3.apply(obj, [1, 2])
fn3()
fn3.apply()

函數(shù)體

函數(shù)體沒啥說的，什么都可以寫。自己都可以調(diào)用。。。，遞歸就是這么來的。
如果有return 的話，可以返回函數(shù)，例如實現(xiàn)閉包、函數(shù)柯里化、高階函數(shù)等。

函數(shù)屬性

另外，函數(shù)本身還有一些屬性和方法：

• name 返回函數(shù)定義的名稱。
• length 只讀屬性，表示函數(shù)形參的個數(shù)
• prototype 函數(shù)的原型對象
• toString() 返回函數(shù)完整的源代碼字符串

結(jié)語

有了函數(shù)，js就算玩出花來，也可以有條理性。文章來源地址http://www.zghlxwxcb.cn/news/detail-809986.html

到了這里，關于【JavaScript】深度理解js的函數(shù)（function、Function）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！