点此查看所有教程、项目、源码导航

1. 背景

上一篇，我们理解了函数的定位：它是用来复用经验的载体。
当时我们分析得出，一个函数有两大核心部分：函数名、函数体。
函数名用来区分是什么经验，比如是开车的经验，还是网购的经验；函数体里面存放这件事一步步的操作流程。

顺着这个思路，我们当时猜想函数大概长这样：

这是一个函数:开车{console.log("1.打开车门");console.log("2.系好安全带");console.log("3.启动车辆");console.log("4.踩油门，开始驾驶");}

但是我们并不是 JS 语言的设计者，不能自己规定语法。而且 JS 是国外创造的语言，自然不会用 “这是一个函数” 这种中文标识。
这一篇，我们就来看 JS 里面标准的函数写法。

2. 揭开 JS 函数的真面目

同样以开车这个例子，JS 里正确定义函数的代码是这样：

functiondriveCar(){console.log("1.打开车门");console.log("2.系好安全带");console.log("3.启动车辆");console.log("4.踩油门，开始驾驶");}

我们拆开每一部分来讲：

• function：是 JS 的关键字，专门用来告诉浏览器：接下来我们要定义一个函数了。
• driveCar：这就是函数名。一个项目里会写很多函数，给它起名字，方便我们区分，比如开车、计算加法、打印提示。命名尽量见名知意。
• ()：函数名字后面必须带上一对小括号，这是函数的标志性特征。后面的课程我们会学到，这个括号还有传递数据的能力。
• {}包裹起来的内容就是函数体，里面写我们要封装的所有步骤代码。

核心还是我们上一篇说的两点：函数名用来标记是什么经验，函数体存放经验的具体步骤。

3. 函数的调用

我们积累经验，最终目的就是拿来使用。在编程里，使用函数，专业叫法是调用函数。

先看没有函数的时候，如果要教三个人开车，我们只能重复写三遍完整流程：

// 教第1个人开车{console.log("1.打开车门");console.log("2.系好安全带");console.log("3.启动车辆");console.log("4.踩油门，开始驾驶");}// 教第2个人开车{console.log("1.打开车门");console.log("2.系好安全带");console.log("3.启动车辆");console.log("4.踩油门，开始驾驶");}// 教第3个人开车{console.log("1.打开车门");console.log("2.系好安全带");console.log("3.启动车辆");console.log("4.踩油门，开始驾驶");}

有了函数之后，逻辑就不一样了：我们先一次性把开车流程定义好，之后每需要一次，就调用一次。

// 定义函数：相当于把开车的经验提前写好存起来functiondriveCar(){console.log("1.打开车门");console.log("2.系好安全带");console.log("3.启动车辆");console.log("4.踩油门，开始驾驶");}// 教第1个人开车driveCar();// 教第2个人开车driveCar();// 教第3个人开车driveCar();

写driveCar();就是调用这个函数，每写一次，里面的步骤就执行一遍。

这里有一个非常关键的知识点：
只定义函数的时候，函数里面的代码不会运行，仅仅是保存这套流程。只有当我们写代码调用它的时候，函数体里面的代码才会执行。

4. 小结

函数给我们带来的好处，就是把一套固定的操作提前封装好。
以后再需要做这件事，不用重复抄写一大堆代码，直接调用函数就可以。
程序员不需要反复去写重复的步骤，只需要封装一次，随时取用，这就是代码复用的魅力。

预告：现在这个开车函数是固定不变的，下一篇我们学习参数，让函数变得更灵活，比如可以区分是学手动挡还是自动挡。