JavaScript 系列六：函数

"Code tailor"，为前端开发者提供技术相关资讯以及系列基础文章，微信关注“小和山的菜鸟们”公众号，及时获取最新文章。

前言

在开始学习以前，咱们想要告诉您的是，本文章是对JavaScript语言知识中 "函数" 部分的总结，若是您已掌握下面知识事项，则可跳过此环节直接进入题目练习

• 函数简介
• 函数名称
• 函数重载
• 函数声明与函数表达式
• 函数做为值
• this
• 函数的递归

若是您对某些部分有些遗忘，👇🏻 已经为您准备好了！

汇总总结

函数简介

函数是全部编程语言的核心部分，由于它们能够封装语句，且被定义后能够在任何地方、任什么时候间执行。ECMAScript 中的函数使用 function 关键字进行声明，后跟一组参数，而后是函数体。

如下是函数的基本语法：

function functionName(arg0, arg1,...,argN) {
 //表达式
}

下面是一个例子：

function sayHi(name, message) {
  console.log('Hello ' + name + ', ' + message)
}

能够经过函数名来调用函数，要传给函数的参数放在括号里（若是有多个参数，则用逗号隔开）。

下面是调用函数 sayHi() 的示例：

sayHi('xhs', 'do you study today?')

调用这个函数的输出结果是 "Hello xhs, do you study today?"。 参数 name 和 message 在函数内部做为字符串被拼接在了一块儿，最终经过 console.log() 输出到控制台。

ECMAScript 中的函数不须要指定是否返回值，也不限制返回值的类型。任何函数在任什么时候间均可以使用 return 语句来返回函数的值，用法是后跟要返回的值，返回值能够是任何类型。好比：

function sum(num1, num2) {
  return num1 + num2
}

函数 sum() 会将两个值相加并返回结果。注意，除了 return 语句以外没有任何特殊声明代表该函数有返回值。而后就能够这样调用它：

const result = sum(5, 10)

值得注意的是，只要执行到 return 语句，函数就会当即中止执行并退出。所以，return 语句后面的代码不会被执行。好比：

function sum(num1, num2) {
  return num1 + num2

  console.log('Hello world') //不会执行
}

在这个例子中，console.log() 不会执行，由于它在 return 语句后面，解释器在执行到 return 语句后就中止对该函数的执行。

一个函数里能够有多个 return 语句，像这样：

function subtract(num1, num2) {
  if (num1 < num2) {
    return num2 - num1
  } else {
    return num1 - num2
  }
}

这个 subtract() 函数用于计算两个数值的差。若是第一个数值小于第二个，则用第二个减第一个；不然，就用第一个减第二个。代码中每一个分支都有本身的 return 语句，返回正确的差值。return 语句也能够不带返回值。这时候，函数会当即中止执行并返回 undefined。这种用法最经常使用于提早终止函数执行，并非为了返回值。好比在下面的例子中，console.log() 不会执行：

function sayHi(name, message) {
  return

  console.log('Hello ' + name + ', ' + message) // 不会执行
}

根据开发经验而言，一个函数要么返回值，要么不返回值。只在某个条件下返回值的函数会带来麻烦，尤为是调试时。

函数名称

函数名是一个指向函数的指针，因此它们跟其余包含对象指针的变量具备相同的行为。这意味着一个函数能够有多个函数名，以下所示：

function sum(num1, num2) {
  return num1 + num2
}

console.log(sum(10, 10)) // 20

let xhsSum = sum

console.log(xhsSum(10, 10)) // 20

sum = null

console.log(xhsSum(10, 10)) // 20

以上代码定义了一个名为 sum 的函数，用于求两个数之和。而后又声明了一个变量 xhsSum，并将它的值设置为等于 sum 。注意，使用不带括号的函数名会访问函数指针名，而不会执行函数。此时，xhsSum 和 sum 都指向同一个函数。调用 xhsSum() 也能够返回结果。把 sum 设置为 null 以后，就切断了它与函数之间的关联。而 xhsSum() 仍是能够照常调用，没有问题。

函数参数

ECMAScript 函数的参数跟大多数其余语言不一样。ECMAScript 函数既不关心传入的参数个数，也不关心这些参数的数据类型。定义函数时要接收两个参数，并不意味着调用时就传两个参数。你能够传一个、三个，也能够一个也不传，解释器都不会报错。

之因此会这样，主要是由于 ECMAScript 函数的参数在内部表现为一个数组。函数被调用时总会接收一个数组，但函数并不关心这个数组中包含什么。若是数组中什么也没有，那没问题；若是数组的元素超出了要求，那也没问题。

事实上，在使用 function 关键字定义（非箭头）函数时，能够在函数内部访问 arguments 对象，从中取得传进来的每一个参数值。arguments 对象是一个类数组对象（但不是 Array 的实例），所以可使用中括号语法访问其中的元素（第一个参数是 arguments[0]，第二个参数是 arguments[1]）。而要肯定传进来多少个参数，能够访问 arguments.length 属性。在下面的例子中，sayHi() 函数的第一个参数叫 name：

function sayHi(name, message) {
  console.log('Hello ' + name + ', ' + message)
}

能够经过 arguments[0] 取得相同的参数值。所以，把函数重写成不声明参数也能够：

function sayHi() {
  console.log('Hello ' + arguments[0] + ', ' + arguments[1])
}

在重写后的代码中，没有命名参数。name 和 message 参数都不见了，但函数照样能够调用。这就代表，ECMAScript 函数的参数只是为了方便才写出来的，并非必须写出来的。与其余语言不一样，在 ECMAScript 中的命名参数不会建立让以后的调用必须匹配的函数签名。这是由于根本不存在验证命名参数的机制。也能够经过 arguments 对象的 length 属性检查传入的参数个数。下面的例子展现了在每调用一个函数时，都会打印出传入的参数个数：

function getArgsNum() {
  console.log(arguments.length)
}

getArgsNum('string', 45) // 2

getArgsNum() // 0

getArgsNum(12) // 1

这个例子分别打印出 2 、 0 和 1 （按顺序）。既然如此，那么开发者能够想传多少参数就传多少参数。

好比：

function getTotle() {
  if (arguments.length === 1) {
    console.log(arguments[0] + 10)
  } else if (arguments.length === 2) {
    console.log(arguments[0] + arguments[1])
  }
}

getTotle(10) // 20

getTotle(30, 20) // 50

这个函数 getTotle() 在只传一个参数时会加 10 ，在传两个参数时会将它们相加，而后返回。所以 getTotle(10) 返回 20 ，而 getTotle(30,20) 返回 50 。虽然不像真正的函数重载那么明确，但这已经足以弥补 ECMAScript 在这方面的缺失了。

还有一个必须理解的重要方面，那就是 arguments 对象能够跟命名参数一块儿使用，好比：

function getTotle(num1, num2) {
  if (arguments.length === 1) {
    console.log(num1 + 10)
  } else if (arguments.length === 2) {
    console.log(arguments[0] + num2)
  }
}

在这个 getTotle() 函数中，同时使用了两个命名参数和 arguments 对象。命名参数 num1 保存着与 arugments[0] 同样的值，所以使用谁都无所谓。（一样，num2 也保存着跟 arguments[1] 同样的值。）arguments 对象的另外一个有意思的地方就是，它的值始终会与对应的命名参数同步。来看下面的例子：

function getTotle(num1, num2) {
  arguments[1] = 10

  console.log(arguments[0] + num2)
}

这个 getTotle() 函数把第二个参数的值重写为 10。由于 arguments 对象的值会自动同步到对应的命名参数，因此修改 arguments[1] 也会修改 num2 的值，所以二者的值都是 10 。但这并不意味着它们都访问同一个内存地址，它们在内存中仍是分开的，只不过会保持同步而已。

另外还要记住一点：若是只传了一个参数，而后把 arguments[1] 设置为某个值，那么这个值并不会反映到第二个命名参数。这是由于 arguments 对象的长度是根据传入的参数个数，而非定义函数时给出的命名参数个数肯定的。对于命名参数而言，若是调用函数时没有传这个参数，那么它的值就是 undefined。这就相似于定义了变量而没有初始化。

好比，若是只给 getTotle() 传了一个参数，那么 num2 的值就是 undefined。严格模式下，arguments 会有一些变化。首先，像前面那样给 arguments[1] 赋值不会再影响 num2 的值。就算把 arguments[1] 设置为 10，num2 的值仍然仍是传入的值。其次，在函数中尝试重写 arguments 对象会致使语法错误。（代码也不会执行。）

函数重载

ECMAScript 函数不能像传统编程那样重载。在其余语言好比 Java 中，一个函数能够有两个定义，只要签名（接收参数的类型和数量）不一样就行。如前所述，ECMAScript 函数没有签名，由于参数是由包含零个或多个值的数组表示的。没有函数签名，天然也就没有重载。若是在ECMAScript 中定义了两个同名函数，则后定义的会覆盖先定义的。来看下面的例子：

function addSomeNumber(num) {
  return num + 100
}

function addSomeNumber(num) {
  return num + 200
}
let result = addSomeNumber(100) // 300

这里，函数 addSomeNumber() 被定义了两次。第一个版本给参数加 100，第二个版本加 200。最后一行调用这个函数时，返回了 300，由于第二个定义覆盖了第一个定义。

函数声明与函数表达式

咱们能够经过 function 构造一个函数，也能够将一个变量赋值成一个函数，这两种方法在大多数状况下均可以正常调用执行。但是在 JavaScript 引擎在加载数据时对函数声明和函数表达式是区别对待的。JavaScript 引擎在任何代码执行以前，会先读取函数声明，并在执行上下文中生成函数定义。而函数表达式必须等到代码执行到它那一行，才会在执行上下文中生成函数定义。来看下面的例子：

// 没问题
console.log(sum(10, 10))

function sum(num1, num2) {
  return num1 + num2
}

以上代码能够正常运行，由于函数声明会在任何代码执行以前先被读取并添加到执行上下文。这个过程叫做函数声明提高（function declaration hoisting）。在执行代码时，JavaScript 引擎会先执行一遍扫描，把发现的函数声明提高到源代码树的顶部。所以即便函数定义出如今调用它们的代码以后，引擎也会把函数声明提高到顶部。若是把前面代码中的函数声明改成等价的函数表达式，那么执行的时候就会出错：

// 会出错
console.log(sum(10, 10))

var sum = function (num1, num2) {
  return num1 + num2
}

函数做为值

由于函数名在 ECMAScript 中就是变量，因此函数能够用在任何可使用变量的地方。这意味着不只能够把函数做为参数传给另外一个函数，并且还能够在一个函数中返回另外一个函数。

function add10(num) {
  return num + 10
}
let result1 = callSomeFunction(add10, 10)
console.log(result1) // 20
function getGreeting(name) {
  return 'Hello, ' + name
}
let result2 = callSomeFunction(getGreeting, 'Nicholas')
console.log(result2) // "Hello, Nicholas"

function fun1(x) {
  return function (y) {
    return function (z) {
      console.log(x * y * z)
    }
  }
}
fun1(2)(3)(4) //24

this

this 是一个特殊的对象，它在标准函数和箭头函数中有不一样的行为。

在标准函数中，this 引用的是把函数当成方法调用的上下文对象，这时候一般称其为 this 值（在网页的全局上下文中调用函数时，this 指向 window 对象）。来看下面的例子：

window.color = 'red'

let o = {
  color: 'blue',
}

function sayColor() {
  console.log(this.color)
}

sayColor() // 'red'

o.sayColor = sayColor

o.sayColor() // 'blue'

定义在全局上下文中的函数 sayColor() 引用了 this 对象。这个 this 到底引用哪一个对象必须到函数被调用时才能肯定。所以这个值在代码执行的过程当中可能会变。若是在全局上下文中调用 sayColor()，这结果会输出 red ，由于 this 指向 window，而 this.color 至关于 window.color 。而在把 sayColor() 赋值给 o 以后再调用 o.sayColor()，this 会指向 o ，即 this.color 至关于 o.color ，因此会显示 blue 。

在箭头函数中，this 引用的是定义箭头函数的上下文。箭头函数的内容咱们会在第二部分的函数扩展中详细说起。

函数的递归

递归函数一般的形式是一个函数经过名称调用本身，以下面的例子所示：

function factorial(num) {
  if (num <= 1) {
    return 1
  } else {
    return num * factorial(num - 1)
  }
}

这是经典的递归阶乘函数。虽然这样写是能够的，但若是把这个函数赋值给其余变量，就会出问题：

let anotherFactorial = factorial

factorial = null

console.log(anotherFactorial(4)) // 报错

这里把 factorial()函数保存在了另外一个变量 anotherFactorial 中，而后将 factorial 设置为 null，因而只保留了一个对原始函数的引用。而在调用 anotherFactorial() 时，要递归调用 factorial() ，但由于它已经不是函数了，因此会出错。在写递归函数时使用 arguments.callee 能够避免这个问题。arguments.callee 就是一个指向正在执行的函数的指针，所以能够在函数内部递归调用，以下所示：

function factorial(num) {
  if (num <= 1) {
    return 1
  } else {
    return num * arguments.callee(num - 1)
  }
}

把函数名称替换成 arguments.callee ，能够确保不管经过什么变量调用这个函数都不会出问题。所以在编写递归函数时 arguments.callee 是引用当前函数的首选。不过，在严格模式下运行的代码是不能访问 arguments.callee 的，由于访问会出错。此时，可使用命名函数表达式（named function expression）达到目的。好比：

const factorial = function f(num) {
  if (num <= 1) {
    return 1
  } else {
    return num * f(num - 1)
  }
}

题目自测

一：如下代码输出什么

function callFunc(func, argument) {
  return func(argument)
}
function func1(argument) {
  console.log(argument + '.')
}
callFunc(func1, 'hello,world')

---

二：如下代码输出什么

function recursion(num) {
  if (num === 0) return 1
  else if (num % 2 === 0) return recursion(num - 1) + 1
  else return recursion(num - 1)
}

console.log(recursion(6))

---

三：两段代码分别执行各会输出什么

func1(1, 2)
function func2(x, y) {
  console.log(x + y)
}
let func1 = func2

func2(1, 2)
function func2(x, y) {
  console.log(x + y)
}

题目解析

1、

Answer: 'hello,world.'

callFunc 函数的做用其实就是执行了第一个参数，并把第二个参数传给第一个参数当作参数。

---

2、

Answer: 4

recursion 是一个递归函数，若是 num 等于0就返回1，若是 num 是偶数，就在下一个结果前 +1，若是是奇数就返回下一个结果。其做用就是统计从 0 到 num 一共有多少个偶数。因此 recursion(6) 为 4

---

3、

func1(1,2) 输出 ReferenceError，由于在调用时 func1 还未被定义和赋值。 func2(1,2) 输出 3，由于 function 的声明会被提早，能够在以前使用。