WEBVTT

00:00:01.383 --> 00:00:03.649
现在我们谈谈你这期间

00:00:03.649 --> 00:00:05.685
一直在用的 函数

00:00:05.685 --> 00:00:09.140
当你使用 rect() fill() text() 这些命令时

00:00:09.140 --> 00:00:12.376
你其实是在调用函数 这些函数就会实现

00:00:12.376 --> 00:00:15.132
你所叫它们做的事情

00:00:15.132 --> 00:00:16.806
函数究竟是什么

00:00:16.806 --> 00:00:19.483
我们把一堆代码凑到一起

00:00:19.483 --> 00:00:21.240
并给它取个名字 好让我们能

00:00:21.240 --> 00:00:23.168
多次使用它的功能

00:00:23.368 --> 00:00:25.981
比如rect() 它是用来干什么的

00:00:25.981 --> 00:00:28.551
它就是用来画四条线的 是吧

00:00:28.551 --> 00:00:31.141
而我们也可以只用line()这个函数 是吧

00:00:31.141 --> 00:00:33.847
这样我们就得到了一个长方形样的东西

00:00:33.847 --> 00:00:36.751
但当我们想要

00:00:36.751 --> 00:00:39.322
画很多个长方形的时候

00:00:39.322 --> 00:00:40.773
那么每次都进行这些计算

00:00:40.773 --> 00:00:42.784
就相当地烦人了 还要费劲地思考

00:00:42.784 --> 00:00:44.282
这个角的这条线要怎么画

00:00:44.282 --> 00:00:45.818
那个角的要怎么画...

00:00:45.818 --> 00:00:48.538
所以不如用个rect()函数

00:00:48.538 --> 00:00:50.858
这个函数的效果跟之前

00:00:50.858 --> 00:00:55.148
那四行代码的效果一样 却又更加简洁

00:00:55.148 --> 00:00:58.399
这样还挺棒的 rect()这个函数

00:00:58.399 --> 00:01:00.519
在可汗学院的所有的程序中

00:01:00.519 --> 00:01:02.729
都是能直接用的

00:01:02.729 --> 00:01:05.339
当然你也可以自己写个函数

00:01:05.339 --> 00:01:08.409
然后在自己的程序里调用

00:01:08.409 --> 00:01:11.430
举个栗子 假设我们要写个程序

00:01:11.430 --> 00:01:14.434
我们想画很多次的温斯顿(黄脸娃娃)

00:01:14.434 --> 00:01:17.017
因为我们可能会讲讲温斯顿的人生历程

00:01:17.017 --> 00:01:20.190
并把每个年龄段的它都展示出来

00:01:20.190 --> 00:01:24.243
所以我们开始写画出温斯顿的代码了

00:01:24.243 --> 00:01:27.106
我们这里用 faceX 和 faceY 两个变量

00:01:27.106 --> 00:01:29.029
来规定脸部的中心位置

00:01:29.029 --> 00:01:31.243
之后画眼睛和鼻子的时候

00:01:31.243 --> 00:01:33.039
就能参照这两个变量了

00:01:33.039 --> 00:01:34.732
现在程序认得这些代码了

00:01:34.732 --> 00:01:37.325
但它还不是函数 所以程序运行了一下

00:01:37.325 --> 00:01:39.739
然后也只能就运行一次

00:01:39.739 --> 00:01:43.717
所以我们就来把它转成函数吧

00:01:43.717 --> 00:01:46.439
转化的步骤很像

00:01:46.439 --> 00:01:48.487
声明变量那样 因为实际上

00:01:48.487 --> 00:01:50.245
就是一样的

00:01:50.245 --> 00:01:52.077
我们敲上 var drawWinston

00:01:52.077 --> 00:01:54.551
这个名字不错 生动又形象

00:01:54.551 --> 00:01:59.037
再敲上 = 号 然后接的就不是数字或字符串了

00:01:59.037 --> 00:02:02.721
我们要接的是 function 不要拼写错了

00:02:02.721 --> 00:02:08.357
然后是小括号 () 再后是前大括号 {

00:02:08.357 --> 00:02:11.563
接着后大括号 } 最后是分号 ;

00:02:11.563 --> 00:02:14.490
所以我们接下来就是要把所有

00:02:14.490 --> 00:02:19.454
函数要用的功能都放进大括号里

00:02:19.454 --> 00:02:22.130
所以我们要把底下的所有代码

00:02:22.130 --> 00:02:26.816
都放进我们的函数里 缩进下更好看 啦啦

00:02:26.816 --> 00:02:28.970
所以我们现在就把这些变量

00:02:28.970 --> 00:02:32.379
整理成函数了 基本上我们是

00:02:32.379 --> 00:02:35.759
把这块代码贴上了个标签 然后我们就能

00:02:35.759 --> 00:02:37.859
随时告诉自己的程序：

00:02:37.859 --> 00:02:40.765
嘿 找出带那标签的那段代码 运行它！

00:02:40.765 --> 00:02:43.551
我们把这段代码转成可重复使用的了

00:02:43.551 --> 00:02:46.535
但是别忘了 温斯顿不见了

00:02:46.535 --> 00:02:49.357
我们弄丢了温斯顿 他人跑去哪儿了呢

00:02:49.357 --> 00:02:53.025
好吧 其实是我们把代码放进函数里之后

00:02:53.025 --> 00:02:55.907
相当于是告诉程序 嘿 这里的这些代码

00:02:55.907 --> 00:02:57.842
是我想稍后还能用的

00:02:57.842 --> 00:03:00.807
但只有我叫你用时 你才能用

00:03:00.807 --> 00:03:04.288
所以我们就得叫程序运行这段代码

00:03:04.288 --> 00:03:09.110
这就要“调用”函数 就跟使用ellipse() rect() line()一样

00:03:09.400 --> 00:03:13.753
所以我们只要敲上函数名 drawWinston

00:03:13.753 --> 00:03:16.376
后面接上小括号()

00:03:16.376 --> 00:03:18.959
还有记得加上分号 啦啦

00:03:18.959 --> 00:03:20.942
温斯顿出来了

00:03:20.942 --> 00:03:24.237
好了 我觉得棒极了 但你可能无语了

00:03:24.237 --> 00:03:27.373
因为我们相当于是把之前程序所做的

00:03:27.373 --> 00:03:30.239
又做了一遍 有点傻是吧

00:03:30.239 --> 00:03:32.920
不过函数的关键就是它能重复使用

00:03:32.920 --> 00:03:34.957
所以我们现在要开工了

00:03:34.957 --> 00:03:41.162
我们只需不断复制黏贴这个函数就可以了

00:03:41.162 --> 00:03:46.572
额... 看起来没变嘛 但其实是有的

00:03:46.572 --> 00:03:48.998
它画了多个温斯顿 可问题在于

00:03:48.998 --> 00:03:51.474
它们完全重叠在一起了

00:03:51.474 --> 00:03:54.428
如果有X光的话 我们就可以扫一下那图象

00:03:54.428 --> 00:03:57.631
然后就能看到三个温斯顿了 但我可没X光眼

00:03:57.631 --> 00:04:00.334
也许你有吧

00:04:00.334 --> 00:04:03.440
但我们可以对函数做些小修改

00:04:03.440 --> 00:04:05.486
然后就能看到了

00:04:05.486 --> 00:04:08.825
你看 faceX 和 faceY 总是202和208没有

00:04:08.825 --> 00:04:11.587
我们能用 random() 函数来做点改变

00:04:11.587 --> 00:04:14.849
比如 random() 范围设成50到350 它就会

00:04:14.849 --> 00:04:19.183
在范围里随机挑选一个数字 下面也是一样

00:04:19.183 --> 00:04:23.023
这样每次调用这个函数时 它都会随机生成新数

00:04:23.023 --> 00:04:26.566
如果我们点下刷新 温斯顿就会随机再现

00:04:26.566 --> 00:04:29.359
棒呆了 哇

00:04:29.359 --> 00:04:32.095
好了 我觉得这棒极了 因为本来这是要

00:04:32.095 --> 00:04:34.916
写很多代码才能实现的 而有函数就省事多了

00:04:34.916 --> 00:04:38.317
本来是要当前代码量的三倍的

00:04:38.317 --> 00:04:40.960
不过这还不够实用

00:04:40.960 --> 00:04:43.796
因为我们也许不想要随机的温斯顿

00:04:43.796 --> 00:04:45.736
我们可能想要的是固定的温斯顿

00:04:45.736 --> 00:04:47.846
想让它固定在屏幕的某个特定位置

00:04:47.846 --> 00:04:49.943
那么敬请期待 因为下次我们就会讲

00:04:49.943 --> 00:04:52.483
如何给这个函数传递参数 从而得到

00:04:52.000 --> 00:04:56.000
位置固定的温斯顿