JavaScript 函数完整指南

入门！

首先，我鼓励你跟着这篇文章一步一步来。这不仅能帮助你更好地学习，还能帮助你记住已经学过的内容。我们先来创建一个新的 HTML 文件，并<script>在其中添加一个标签：

<!DOCTYPE html>
<html>
    <head>
        <title>If statements are awesome!</title>
    </head>
    <body>
        <h1>JavaScript :)</h1>
        <script>
            // Our script will go here!
        </script>
    </body>
</html>

完成后，在浏览器中打开即可！（每次更改后别忘了保存并重新加载页面）

什么是函数？

函数其实就是一小段 JavaScript 代码，你可以反复运行它。你甚至可以给它不同的输入和输出！

语法

目前，我们先来看最简单的函数类型：

function myFirstFunction() {
    var x = 5;
    alert(x * 2);
}

首先，我们要声明函数。方法是先写出函数名function，然后再写出函数本身。这类似于声明变量（var variableName类似于 `var` function functionName）。在函数名后面，是一组空的括号/圆括号/或者你称之为其他什么：()`.`

如果它们是空的，那它们有什么用呢？嗯，这里是用来放置函数输入参数的地方。目前，我们的函数没有任何输入参数，所以我们先留空。稍后我会在本文中详细讲解输入参数（敬请期待😉）。

之后，我们会看到一组花括号（最后一个花括号在第四行）。函数中的所有代码都写在这些花括号内。

运行（也称为“调用”）函数

现在你知道它是如何工作的了，让我们运行一下！把它放到你的<script>标签里，保存，然后重新加载页面……

什么？！什么都没发生！好吧，关键在于——我们只是声明了这个函数，并没有真正运行它。我们只是告诉计算机“嘿，神奇的计算机，这是一段代码，它的名字是…… myFirstFunction”。但是，我们并没有告诉计算机运行函数内部的代码！下面我们来看一下：

myFirstFunction();

如你所见，我们通过引用函数名来运行它。接下来是一组空的括号。这里原本是函数输入参数的位置，但我们现在还没有任何输入，所以仍然留空。现在运行你的函数！看看你能不能把它放在代码的哪个位置：

function myFirstFunction() {
    var x = 5;
    alert(x * 2);
}

myFirstFunction();

在这段代码中，它位于末尾。但是，它也可以位于函数之前！这与变量非常不同，变量必须在使用前声明。以下代码行不通：

alert(myVariable);

var myVariable = "Hello";

然而，这样做会：

myFirstFunction();

function myFirstFunction() {
    var x = 5;
    alert(x * 2);
}

通常的做法是将所有函数定义放在脚本的底部，但这其实并不重要。

好了，现在到了你可能一直期待的时刻——试试看！确保你的脚本代码和上面的一样（不过记住，在声明函数之前或之后运行它都无所谓）。保存，重新加载，瞧！函数内部的代码现在已经运行了！

一开始，这看起来似乎有点小题大做——为什么不直接运行代码呢？但是，想象一下，如果你想让这段代码在脚本中的多个不同位置运行——比如在循环、if 语句等等。那么，只需要简单地写上“运行”语句myFirstFunction();就方便多了！特别是当你的函数有 30 行代码的时候😅

带输入的函数

在函数中myFirstFunction，我们设置了一个变量（x），5然后发出警报（10）。如果我们创建一个名为的函数，该函数发出alertDouble警报，提示将任意数字翻倍，会怎么样？

在这种情况下，我们只有一个输入——我们称之为num。以下是以num为输入的函数声明：

function alertDouble(num) {

}

现在，在花括号内，我们可以将其用作num变量！（仅限花括号内）

看看你能不能想出最终的函数是什么样子……

function alertDouble(num) {
    alert(num * 2);
}

你答对了吗？如果答对了，那就太好了！如果没答对，也别担心——希望读完这篇文章后，你就能明白了🙏

运行带有输入的函数

是时候运行我们的函数了！我们来尝试将几个不同的数字翻倍：

2
70
1024

首先，如果你愿意，可以保留现有代码的这一部分：

function myFirstFunction() {
    var x = 5;
    alert(x * 2);
}

不过，我们已经完成了这项工作，不想再运行它了。所以，请删除或注释掉这一行：

myFirstFunction();

相反，我们要调用我们的新函数alertDouble！首先，我们需要在代码末尾添加函数声明：

//myFirstFunction();

function myFirstFunction() {
    var x = 5;
    alert(x * 2);
}

function alertDouble(num) {
    alert(num * 2);
}

现在来运行我们的函数！如果没有输入参数，我们只需直接写 `nil` 即可alertDouble()。但是，我们需要把 `nil` 的输入参数num放在括号里！所以，我们来试试把 2 翻倍——看看你能不能猜出代码！

alertDouble(2);

2括号内的内容在num函数运行时就会变成函数内部的内容！试试看……

//myFirstFunction();

alertDouble(2);

function myFirstFunction() {
    var x = 5;
    alert(x * 2);
}

function alertDouble(num) {
    alert(num * 2);
}

哇！它发出警报了4！🎉
我们来试试其他值……

//myFirstFunction();

alertDouble(2);
alertDouble(70);
alertDouble(1024);

function myFirstFunction() {
    var x = 5;
    alert(x * 2);
}

function alertDouble(num) {
    alert(num * 2);
}

太好了！现在它会发出警报4，140然后2048……该继续了……

具有多个输入的函数

在函数中alertDouble，我们乘以num了2。如果我们想创建一个名为的函数，alertMultiplied该函数会弹出一个输入乘以另一个输入的结果，该怎么办呢？这里我们需要两个输入：假设是num1和num2。

首先，我们需要声明函数！当函数有多个输入参数时，它们之间用逗号分隔——看看你能不能弄明白！

function alertMultiplied(num1, num2) {

}

然后，只需简单地发出警报num1并乘以num2！

function alertMultiplied(num1, num2) {
    alert(num1 * num2);
}

运行具有多个输入的函数

首先，注释掉（或删除）所有doubleMe函数调用，如下所示：

//myFirstFunction();

//alertDouble(2);
//alertDouble(70);
//alertDouble(1024);

function myFirstFunction() {
    var x = 5;
    alert(x * 2);
}

function alertDouble(num) {
    alert(num * 2);
}

现在，让我们alertMultiplied在代码末尾添加函数声明！

//myFirstFunction();

//alertDouble(2);
//alertDouble(70);
//alertDouble(1024);

function myFirstFunction() {
    var x = 5;
    alert(x * 2);
}

function alertDouble(num) {
    alert(num * 2);
}

function alertMultiplied(num1, num2) {
    alert(num1 * num2);
}

最后，是时候运行这个函数了。我们来试试分别乘以5和3。看看你能不能理解这段代码（提示：输入值之间用逗号分隔，就像声明部分一样 😉）。821

//myFirstFunction();

//alertDouble(2);
//alertDouble(70);
//alertDouble(1024);

alertMultiplied(5, 3);
alertMultiplied(8, 21);

function myFirstFunction() {
    var x = 5;
    alert(x * 2);
}

function alertDouble(num) {
    alert(num * 2);
}

function alertMultiplied(num1, num2) {
    alert(num1 * num2);
}

保存，重新加载，看看会发生什么！应该会弹出提示框，15后面跟着一个点168。

具有输出的函数（即“返回”某些内容的函数）

函数除了有输入之外，还可以有输出！但是，一个函数只能有一个输出（与输入不同）。

我们来创建一个名为 `getResult` 的函数triple。但是，与 `getResult` 不同alertDouble，它不会弹出结果提示框，而是会直接输出结果！

要输出结果，我们只需在函数内部定义输出语句return，然后加上我们想要输出的内容。例如：

function introduce() {
    return 'Hello, I'm Johnny.';
}

注意，这里不需要括号！不过，你也可以加上，因为括号是可选的。我个人喜欢加上括号，因为这样更容易理解，但最终决定权在你。加上括号后，代码会是这样：

function introduce() {
    return('Hello, I'm Johnny.');
}

显然，返回的值不一定是字符串。

我们来尝试编写这个triple函数！它需要一个输入值，num并输出该值的三倍。看看你能不能想出这个函数应该是什么样子！

function triple(num) {
    return(num * 3);
}

运行有输出的函数（获取输出）

这一切都很好，但是我们如何才能真正获得这个函数的输出结果呢？我们只需运行它即可！

实际的函数调用结果将等于输出结果，就像变量等于某个值一样。然后，我们可以像使用变量一样使用该函数。例如，我们可以这样写：

alert( triple(10) );

function triple(num) {
    return(num * 3);
}

这里，我们会显示输出结果triple(10)。试试看！别忘了添加声明并注释掉对的调用alertMultiplied：

//myFirstFunction();

//alertDouble(2);
//alertDouble(70);
//alertDouble(1024);

//alertMultiplied(5, 3);
//alertMultiplied(8, 21);

alert( triple(10) );

function myFirstFunction() {
    var x = 5;
    alert(x * 2);
}

function alertDouble(num) {
    alert(num * 2);
}

function alertMultiplied(num1, num2) {
    alert(num1 * num2);
}

function triple(num) {
    return(num * 3);
}

哇！代码会发出警报30！我们也可以triple像使用其他任何数字一样使用该函数：

var x = (triple(6) + 3) * 2;
alert(x);

这就像说(18 + 3) * 2，这等同于42（当然，这就是人生的意义😉）。试试看！

//myFirstFunction();

//alertDouble(2);
//alertDouble(70);
//alertDouble(1024);

//alertMultiplied(5, 3);
//alertMultiplied(8, 21);

alert( triple(10) );
var x = (triple(6) + 3) * 2;
alert(x);

function myFirstFunction() {
    var x = 5;
    alert(x * 2);
}

function alertDouble(num) {
    alert(num * 2);
}

function alertMultiplied(num1, num2) {
    alert(num1 * num2);
}

function triple(num) {
    return(num * 3);
}

现在发出警报后30，我们的代码也会发出警报42！🎉

函数内部的变量作用域

我们快完成了！😅
不过，关于函数还有一件重要的事情需要了解——在函数内部声明的变量在函数外部不起作用。什么？这里有个例子——试试看！

function myFunc() {
    var myVar = 3;
}

myFunc();
alert(myVar);

它应该会弹出错误代码 3，对吧？不对！因为这个变量是在函数内部myVar声明的，所以它在函数外部并不存在。这段代码无法运行，并会抛出以下错误：

未捕获的引用错误：myVar 未定义

然而，这确实有效！

var myVar = 1;

function myFunc() {
    myVar = 3;
}

myFunc();
alert(myVar);

代码会发出警告3！因为该myVar变量已经在函数外部声明，所以代码知道它的存在。即使它在函数内部被修改，代码仍然可以发出警告，因为它在函数外部就已经被定义。

这被称为全局作用域。这意味着在代码的其余部分，该变量myVar将被定义。在第一个示例中myVar，变量在函数内部声明，因此它是在函数作用域内声明的。这意味着该变量只会在函数的花括号内定义。

这可能需要一些时间才能理解，但你最终会明白的。你需要记住的最重要的一点是，如果你想在函数外部使用一个变量，首先要在函数外部声明它。你甚至不需要写var myVar = 1;`var`——你只需要声明var myVar;它就足够了。我以后可能会写一篇更详细地讲解变量作用域的文章。

结论

呼！😅
内容真不少，你能坚持看完真是太棒了！和往常一样，继续练习，你最终一定能掌握的。如果你需要任何帮助，欢迎随时给我发邮件或在评论区留言。

如果你从这篇文章中学到了什么，如果你能请我喝杯咖啡，我会非常感激。我已经免费写了53000字，而且还在不断增加，希望能帮助像你一样的人学习网页开发。如果你能给我一点小小的支持，那就太好了😉。虽然看起来不多，但积少成多。如果每个阅读过本网站文章的人都给我1美元，我现在可能已经接近最低时薪了！

如果你认识的人觉得这篇文章或这个博客对他们有帮助，那就分享给他们吧——他们以后会感谢你的😜

最后，如果您想每周在邮箱里收到一些关于 Web 开发的实用技巧，帮助您学习 JavaScript，请留下您的邮箱地址，我会尽快发送给您😜

点击这里注册 :D

好了，今天就到这里！祝大家编程愉快，下次再见！下次我会详细讲解JavaScript 中的数组（也叫列表）。下次见！👊

想阅读更多类似文章？请订阅我的电子报。

我花了很多心思制作这些教程，目前还没有从中获利，所以如果您能注册，我将不胜感激 ;)

本文最初发表于Code The Web，这是一个轻松有趣的博客，旨在帮助你学习 Web 开发🚀
学习内容：HTML | CSS | JavaScript

文章来源：https://dev.to/codetheweb/the-complete-guide-to-javascript-functions-2i0l

菜单

分享

JavaScript 函数完整指南

JavaScript 函数完整指南

入门！

什么是函数？

语法

运行（也称为“调用”）函数

带输入的函数

运行带有输入的函数

具有多个输入的函数

运行具有多个输入的函数

具有输出的函数（即“返回”某些内容的函数）

运行有输出的函数（获取输出）

函数内部的变量作用域

结论

点击这里注册 :D

想阅读更多类似文章？请订阅我的电子报。

系统设计面试中的 19 种微服务模式

使用 React 和 AWS Amplify 实现无服务器架构第三部分：跟踪应用使用情况

模型-视图-控制器（MVC）模式到底是什么？DEV 全球项目展示挑战赛，由 Mux 主办：快来展示你的项目吧！

我在两年内从 PHP 开发人员晋升为高级 C#/.NET 开发人员。

了解 Docker：第 12 部分 – 传递构建参数

Yarn 和第三方 NPM 客户端的黑暗未来 DEV 的全球展示与讲述挑战赛，由 Mux 呈现：展示你的项目！

CSS DEV 的全球展示挑战赛“响应式字体”由 Mux 呈现：展示你的项目！

我是如何以学生开发者的身份免费获得 Tabnine Pro 的，你也可以！

五大顶级JS框架

从 Rector PHP 开始：利用自动化改进您的 PHP 代码