小程序编程第13课

函数

各位战友，早上好。这节课我们来学一个很重要的概念。叫做函数。

函数是什么东西?

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块

简单地说，函数就是一段代码块。

如何定义函数

函数声明

function functionname(){
    // 执行代码
}

函数表达式

let functionname = function(){
    // 执行代码
}

函数一般包含如下三部分

• 函数的名称
• 函数参数列表，包围在括号中并由逗号分隔
• 定义函数的 JavaScript 语句，用大括号{}括起来

上面这种定义函数的方法很常见

我们还是打开小程序开发工具，然后打开调试器，找到console面板

举个例子

function square(number) {
  return number * number
}

这是通过函数声明定义的一个函数，这个函数的名称就叫square，这个函数的参数有一个，叫number，这个函数执行的语句是return number * number 这句话的意思是将参数number自乘后返回

这个返回是什么意思呢？

就是说执行了这个函数之后会有一个返回值，这个返回值我们可以用来计算或者存起来。

比如，我给这个函数传递一个数字3，那么它就会返回9。这就和输入和输出是一个意思。我们输入3，它输出9

调用函数

我们可以试着调用一下这个函数。

square(3)

调用函数的方法就是函数名加上一对小括号，小括号中间传递可以传递参数

然后我们看到有返回9

我们还可以定义一个变量来接收这个返回值

let result = square(3)

现在这个返回值就存在了result变量里面了。

我们可以访问reuslt，看看是不是9，直接输入result，然后可以看到返回的是9

我们还可以用函数表达式来定义这个函数

let squareNew = function(number) {
  return number * number
}

我们不能在同一个地方定义两个相同的函数名，就和变量名一样，所以我新取了一个名字。

这样定义函数是什么意思呢？等号右边的式子实际上是一个匿名函数，也就是没有名字的函数，等号左边我们认识，这就是一个定义了一个变量。

月就是说，我们定义了一个没有名字的函数然后赋值给了squareNew变量，因为这个变量里面装的是函数，所以我们可以叫它squareNew函数

现在，我们来调用一下它

squareNew(3)

执行之后，结果返回9，是正确的，如果我们不传参数给函数，会报错吗？这个要看情况。但是不传参数肯定是得不到你想要的结果

我们还可以定义不需要参数的函数，比如

function get100() {
  return 100
}

这个函数的意思很直白，只要你调用它，那么它就会返回你数字100

我们可以试试

get100()

执行后，返回了100，我们没有传递任何参数。

那，我们的函数可以接受多个参数吗？可以

我们可以试试

function add(num1,num2) {
  return num1 + num2
}

这个函数的意思是把两个参数，num1和num2加起来

我们可以试试

add(1,2)

返回值是3，是我们预期的结果

那，我们不传数字呢，看看是什么结果

add('hello', 'zhangsan')

返回值是hellozhangsan

这就是把两个字符串连起来了

所以这个函数有两个功能，一个就是能做加法，还有一个功能就是能连接字符串。

我们还可以定义没有返回值的参数，比如

function sayHello(name) {
	console.log('hello:' + name)
}

这个函数的意思就是在控制台打印一句话，然后就结束了

我们可以调用试试

sayHello('张三')

返回值是hello:张三

我们不传参数，它返回的是什么呢？返回值是hello:undefined，也就是说如果你不传递参数，那么函数里面就默认把参数设置为undefined，也就是未定义的意思

对象里面的函数

上节课我们讲了对象，对象是有属性和值的。我们来定义一个简单的对象。

let car = {
	price: 100000,
	name: '大众'
}

这个对象只有两个属性，一个是price,一个是name，有两个属性值，一个是100000，这个属性值的类型是数字，'大众'这个属性值的类型是字符串

我们的函数也是一种数据类型。一个汽车对象，它除了有属性，它还应该具有一些功能。比如它可以跑，它可以开车灯，它可以摇车窗等等。

这些功能就可以被抽象为函数。

比如

let car1 = {
	price: 100000,
	name: '大众',
	run: function(){
		console.log("车在跑")
	},
	openLight: function(){
		console.log("已开车灯")
	}
}

这个对象就具有两个函数，一个是run，一个是openLight。注意属性后面都有冒号，冒号后面可以是任何类型的值。

当我们访问对象的某个属性是，就是在读取这个属性的值

比如我们可以访问这个对象的run方法

car1.run

控制台会返回一个函数，这个函数就是我们定义的匿名函数

我们还可以调用它

car1.run()

然后控制台就会打印车在跑，我们还可以调用一个下开车灯的方法

car1.openLight()

然后控制台就会打印已开车灯

对比小程序函数

然后我们再对比一下，我们的小程序里面的函数，看看是不是一回事

打开index.js文件，首先我们可以看到Page，这个Page紧跟了一对小括号，小括号里面又有一对大括号。这是什么意思呢？

这就是说Page实际上是一个函数，因为函数可以用()调用。小括号里面的一对大括号包住了很多代码，我们能够看出来这个大括号包住的所有代码就是一个整体，它就是一个对象。

也就是说，这个是在调用一个Page函数，我们往这个参数里面传递了一个对象。

接着我们再看这个对象，滑到最下面找到getUserInfo

我们可以看到这个getUserInfo就是一个属性名，冒号后面就是一个匿名函数，这个匿名函数有一个参数，名字叫e，这个函数没有返回值，因为没有return语句。

我们之前很多节课里都写了很多函数，你可以回去看看。

这个函数要讲的东西还很多，今天我们先搞懂基本的函数定义与函数调用即可。

作业

作业一

写一个能够将华氏温度转换为摄氏温度的函数

℉ =℃ * 1.8+ 32

调用函数传递华氏温度，函数能够返回摄氏温度

比如，假如函数名为toCelsius

toCelsius(77)

执行这个函数，返回22即可

作业二

自己想一个好玩的函数，然后写出来

参考答案

作业一

function toCelsius(fahrenheit) {
  return (5/9) * (fahrenheit-32);
}

或

let toCelsius = function(fahrenheit) {
  return (5/9) * (fahrenheit-32);
}