函数
# 函数
# 定义
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
在JavaScript
中,函数用function
来表示,是一种可以被调用的代码块,当你调用一个函数的时候,就会执行其中的代码。我们一般把会多次使用的语句组合在一起,形成一个函数,方便重复使用。
# 定义示例
以下例子都可以采取事件中插入脚本的方法进行实际测试,定义好函数之后,一定要进行调用(请参看alert函数是怎么调用的)。函数的定义如下所示:
function hello() {
alert("Hello Xiao Rou!");
}
2
3
由function
打头,后面跟着给这个函数起的名字,之后是小括号,大括号里面是函数的内容,可以是任意的语句。例子中的alert
也是一个函数,这个函数是js自带好的(准确的说是由浏览器标准BOM规定的,RPG Maker MV也支持),跟那些数据类型相似,我们可以直接使用它,用途就是弹出一个对话框,对话框里面显示的是小括号里面的内容,在这里是一个字符串"Hello Xiao Rou!"。
# 参数
函数还可以向里面传入参数,函数里面可以调用传入的参数,像alert
函数,它所要传入的参数就是一个字符串。我们可以像这样定义一个带参数的函数:
function square(x) {
var r = x * x;
alert(x + "’s square is" + r);
}
2
3
4
这个例子是一个square
函数,它有一个参数x
,功能就是求x
的平方,并且用alert
显示出来。参数可以有多个,它们之间用逗号隔开。
# 返回值
函数还可以有返回值,所谓返回值,可以看做函数运行结束后就变成了一个值,用法如下:
function power(x, n) {
var r = 1;
for (var i = 1; i <= n; i++) {
r = r * x;
}
return r;
}
2
3
4
5
6
7
函数用return
来传出返回值,同时return
也是函数的终点,函数内部的语句执行的return
的时候就会退出来。这个例子中传入了两个参数x
和n
,在函数内完成了幂运算,计算出来x
的n
次幂并储存在了r
中,最后返回了r
的值。
没有返回值的时候,return
也可以单独使用,只起到使函数结束的作用。
另外要注意,函数内部定义的变量在别的地方是不能使用的,这种变量叫做局部变量。同样还有全局变量,是在函数外面定义的,在函数里面也可以使用。
事实上,函数是Function
类型的对象。
更好的例子
针对第一版例子提出的求二次方和幂运算,第二版不建议读者用近乎于模拟人类运算的方式来编程,这不方便,也很繁琐。针对幂运算,建议使用JavaScript
内建对象Math
的pow
方法来完成。如下:
// 运算 2的3次方
Math.pow(2, 3);
2
执行一个对象内的函数,并且在执行前传递了额外的参数2
和3
,随后返回运算结果。读者可以结合上述的教程例子来理解这一行代码。
# 减少显性的function写法,用简写的方式来定义函数 进阶
以下为第二版额外的进阶内容,如果你尚未能理解并定义一个简单的函数,请掌握了上述的基础内容后再来阅读此部分。
第二版推荐使用更加现代化的方式来编写函数,尽量不要再使用笨重的function
来显性定义函数了。
# 在对象内使用简写的方式定义方法
在上一节第五节内,已经展现过了类似的内容。如下代码:
/** 我的车辆 */
let myCar = {
/** 车辆运行状态 */
status: 'stop',
/** 启动汽车 */
start: function () {
this.status = 'start'
}
};
myCar.start();
console.log(myCar.status);
2
3
4
5
6
7
8
9
10
11
为myCar对象定义方法,即定义函数时,可以使用上述的匿名函数写法来定义start
函数。可以使用这样的写法来省略function
,如下:
start() {
this.status = 'start'
}
2
3
这种写法需要写在对象内才行。
上述例子涉及到了this
的用法,第二版教程不对this
的用法做过多讲解。请自行查找相关的文章和教程来学习JavaScript
内this
的用法。
# 使用ES6+的箭头函数来定义临时性质的局部函数
如下。车辆启动函数内有一个自定义isCarStop
函数,用来判断当前的车辆状态。
let myCar = {
status: 'stop',
start() {
/**
* 车辆是否是停止状态?
* 一个函数内的局部函数 用function的匿名函数写法来定义
*/
const isCarStop = function () {
return this.status === 'stop';
};
if (isCarStop()) {
this.status = 'start'
}
}
};
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
可以用箭头函数的写法来定义函数内的临时性内部函数,如下:
let myCar = {
status: 'stop',
start() {
/**
* 车辆是否是停止状态?
* 一个函数内的局部函数 用function的匿名函数写法来定义
*/
const isCarStop = () => {
return this.status === 'stop';
};
if (isCarStop()) {
this.status = 'start'
}
}
};
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
为了教学演示,特意写成上述的函数写法,实战时的写法是这样的:如果局部函数的逻辑并不复杂,就直接使用语句,不定义函数了。
let myCar = {
status: 'stop',
start() {
if (this.status === 'stop') {
this.status = 'start'
}
}
};
2
3
4
5
6
7
8