重识JavaScript（八）

秒速五厘米 2022-07-14 01:24 113阅读 0赞

# 函数 #

和对象一样，深入的理解函数也是是更好的了解JavaScript的关键，这里展示了一个最简单的函数，JavaScript函数可以定义0个或者多个参数，函数体内你可以根据实际定义需要的执行语句，也可以定义需要的局部变量，当然，你还可以在函数体内的任意位置通过return来返回执行结果，函数体内return后面的语句将不再执行，如果函数体内，你没有定义return语句（或返回空值），则函数将返回undefined。

function add(x, y) { var total = x + y; return total; }

有一点注意，函数中定义的这些参数只是告诉你，当你需要调用这些函数你可以传递这些参数，当然了，你也可以不用传递这些参数或者传递比实际定义多的参数，默认他们将会当成undefined。

add(); // NaN // You can't perform addition on undefined

add(2, 3, 4); // 5 // added the first two; 4 was ignored

这看起来略显奇怪，其实，你可以通过 [`arguments`][arguments] 关键字来访问函数的参数

function add() { var sum = 0; for (var i = 0, j = arguments.length; i < j; i++) { sum += arguments[i]; } return sum; } add(2, 3, 4, 5); // 14

function avg() { var sum = 0; for (var i = 0, j = arguments.length; i < j; i++) { sum += arguments[i]; } return sum / arguments.length; } avg(2, 3, 4, 5); // 3.5

上面的代码略显冗长，因此，我们可以通过参数数组扩展语法（ [Spread syntax][] ）来简化我们的代码，语法定义如下：  **...\[variable\],** 通过这种方式，你可传递任意数量的参数。我们将上面的代码稍微修改如下：

function avg(...args) { var sum = 0; for (let value of args) { sum += value; } return sum / args.length; } avg(2, 3, 4, 5); // 3.5

新的方法看起来简洁多了，但又带来了一个新的问题，avg函数可以处理以逗号分隔的列表变量，但如果你希望计算一个数组的均值呢？似乎，我们只能重新定义一个新的函数如下：

function avgArray(arr) { var sum = 0; for (var i = 0, j = arr.length; i < j; i++) { sum += arr[i]; } return sum / arr.length; } avgArray([2, 3, 4, 5]); // 3.5

但，这并不是最好的方式，最好的方式是我们可以重用我们之前的函数，换句话说，就是让你的函数足够“强悍”，幸运的是，JavaScript先驱者帮我想到了这点，你可通过对象的 [`apply()`][apply] 方法来调用可以传递任意数组的函数。

avg.apply(null, [2, 3, 4, 5]); // 3.5

apply函数的第二个参数就是作为传递给函数的数组参数，第一个参数我们将在后续章节中讨论，这也更强调了在JavaScript中函数也是对象的事实。JavaScript中允许你根据需要创建匿名函数，匿名函数在JavaScript中非常有用，因为你可以在任意你想定义表达式的地方定义一个完整的函数，这是一种非常高级的编程技巧，因为你可以根据需要定义任意局部变量，就像C语言中的块作用域。

var avg = function() { var sum = 0; for (var i = 0, j = arguments.length; i < j; i++) { sum += arguments[i]; } return sum / arguments.length; };

JavaScript支持递归调用，这在处理树形结构的数据场景下非常有用，例如：在浏览器DOM中的各种对象

递归调用引出了有关匿名函数的一个潜在问题，如果你个函数没有标识，那么你在递归中该如何调用？这里我们介绍下了立即执行函数IIFEs (Immediately Invoked Function Expressions)，在这个例子中，函数名称只对函数作用范围可见。

关于立即执行函数，可参考：

[http://benalman.com/news/2010/11/immediately-invoked-function-expression/][http_benalman.com_news_2010_11_immediately-invoked-function-expression]

[https://en.wikipedia.org/wiki/Immediately-invoked\_function\_expression][https_en.wikipedia.org_wiki_Immediately-invoked_function_expression]

函数就是对象，像JavaScript中的其他对象一样，你可增加或者修改函数属性。

[arguments]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments
[Spread syntax]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator
[apply]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply
[http_benalman.com_news_2010_11_immediately-invoked-function-expression]: http://benalman.com/news/2010/11/immediately-invoked-function-expression/
[https_en.wikipedia.org_wiki_Immediately-invoked_function_expression]: https://en.wikipedia.org/wiki/Immediately-invoked_function_expression