点此查看所有教程、项目、源码导航文章目录1. 背景2. 揭开 JS 函数的真面目3. 函数的调用4. 小结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. 小结函数给我们带来的好处就是把一套固定的操作提前封装好。以后再需要做这件事不用重复抄写一大堆代码直接调用函数就可以。程序员不需要反复去写重复的步骤只需要封装一次随时取用这就是代码复用的魅力。预告现在这个开车函数是固定不变的下一篇我们学习参数让函数变得更灵活比如可以区分是学手动挡还是自动挡。