函数：把一套动作起个名字

从普通函数开始

function greet(name) {
  return '你好，' + name
}

const message = greet('Hanyue')

function greet(name) {
↑         ↑    ↑
声明函数   函数名  收到的参数

return '你好，' + name
↑
把结果交回调用它的地方

greet('Hanyue')
↑     ↑
调用函数  这次传进去的值

=> 是另一种函数写法

const greet = (name) => {
  return '你好，' + name
}

它仍然是函数。name => name.length 可以读成：“收到 name，交回 name 的长度。”

真实项目里的函数

manga_studio/canvas-v2/src/api.ts 第 23–25 行：

export function sleep(ms: number): Promise<void> {
  return new Promise((resolve) => setTimeout(resolve, ms))
}

逐词读：这个函数叫 sleep，收到一个数字 ms，返回一个 Promise；箭头函数 () => setTimeout(...) 表示时间到了以后再执行。

动手练习调用一个函数

你的任务

只把最后一行的 4 改成 10，让电脑输出 20。

1. 找到最后一行的 double(4)
2. 把 4 改成 10
3. 点“运行并检查”

代码区你可以直接点进去修改

1234

function double(number) { return number * 2 } console.log(double(4))

电脑输出

还没有运行。完成左边的小任务后，点下面的绿色按钮。

定义函数和调用函数有什么区别？

答案：定义是告诉电脑这套动作是什么；调用是让电脑现在执行它。function greet() 是定义，greet() 是调用。