3.7 小程序函数与调用
3.7.1 函数与调用函数
函数的作用，可以写一次代码，然后反复地重用这个代码。如果没有函数，一段特定的操作过程用几次就要重复写几次，而使用函数则只需调用一下函数，并传入一些参数即可。JavaScript的函数本身也是对象，因此可以把函数赋值给变量，或者作为参数传递给其他函数。
1、函数的定义和结构
我们可以使用function关键词来定义一个函数，括号()里为函数的参数，参数可以有很多个，使用逗号,隔开；函数要执行的代码（语句）使用大括号{}包住：
function 函数名(参数 1, 参数 2, 参数 3) 2、不带参数的函数
比如，我们使用开发者工具在data.js的Page()对象前（后面的函数都要写在Page()对象前面哦），添加如下代码：
function greet()
保存之后，我们可以在控制台看到函数打印的字符串。定义一个函数并不会自动的执行它。定义了函数仅仅是赋予函数以名称并明确函数被调用时该做些什么。调用函数才会以给定的参数真正执行这些动作。greet()函数没有参数，调用函数时，直接写函数名+括号即可。
3、只有一个参数的函数
下面定义了一个简单的平方函数square()，square为函数名，number为函数的参数(名称可以自定义)，使用return语句确定函数的返回值。我们继续在data.js的Page()函数前，输入以下代码：
function square(number) square(5)，就是把5赋值给变量number，然后执行numbernumber，也就是55，然后返回return这个值。当在函数体中使用return语句时，函数将会停止执行，如果指定一个值，则这个值返回给函数调用者，上面的案例就是将值返回给函数调用者。
这里的number被称之为形参，而5被称之为实参。大家可以结合案例就能大致了解形参和实参的意思。
- 形参是在定义函数时使用的参数，目的是用来接收调用该函数时传进来的实际参数。
- 实参是在调用时传递给函数的参数
4、多个参数的函数
有时我们需要处理的功能可能需要多个参数，比如下面的函数把求长方形周长给封装成了一个函数rectangle，这就需要包括两个参数，长方形的长与宽：
function rectangle(length, width) JavaScript允许传入任意个参数而不影响调用，因此传入的参数可以比定义的参数多，但是不能少。也就是说实参的数量可以多于形参但是不能少于形参。
3.7.2 匿名函数与箭头函数
1、匿名函数
函数声明function在语法上是一个语句，但函数也可以由函数表达式创建，这样的函数没有函数名称（匿名）。
使用开发者工具在data.js的Page()函数前，输入以下代码：
function(number) 执行后，可以在控制台看到输出的结果为16。上面这个function函数没有函数名，相当于是把函数的返回值赋值给了变量square。
2、箭头函数
为什么叫箭头函数（Arrow Function），因为它定义一个函数用的就是一个箭头=>，我们来看两个例子，在data.js的Page()函数前输入以下代码：
(x, y) =>
在控制台我们可以看到箭头函数打印的结果。箭头函数相当于匿名函数，它没有函数名，而且也简化了函数定义。箭头函数可以只包含一个表达式，甚至连{ … }和return都可以省略掉。大家可以先只需要了解这个写法就可以了，以后碰到不至于比较迷惑，见多了也试着尝试多写一下。
3.7.3 对象的方法
在小程序里我们会经常将一个匿名函数赋值给对象的一个属性，而这个属性我们可以称之为对象的方法。比如Page()就是一个对象，里面的data就是对象的属性，而一些事件处理函数、生命周期函数都是Page()对象的方法。
可以使用点表示法来调用对象的方法，这个和访问对象的属性没有区别。而调用对象的方法和调用一个函数也是大同小异。调用对象的方法我们在前面就已经接触过大量的案例了，在前面我们已经说过，wx是小程序的全局对象，而在第一节我们打印的很多API，就是调用了wx对象里的方法。
在点击事件章节里，我们创建的事件点击处理函数的写法如下：
Page({
scrollToPosition() {
},
})
对象里面的方法还可以像下面这样写：
function()这两种写法都是可以执行的，大家可以把这两种写法互相修改一下试试看~
3.7.4 给构造器添加函数或数据变量
在小程序构造器或页面构造器，除了有一些默认的生命周期函数以外，我们还可以给App()和Page()添加一些函数以及数据变量。
1、小程序的全局变量与调用
我们可以在app.js的App({})里添加一个数据变量globalData对象、tcbData对象来存放整个小程序都会使用到的数据：
App({ globalData: { userInfo:{ username:"李东bbsky", title:"杂役" }
}, tcbData: { title:"云开发训练营", year:2019, company:"腾讯Tencent" },
})
在app.js里声明的数据变量，我们应该如何在页面的js文件里面调用它呢？这个时候我们需要用到getApp()来获取小程序全局唯一的App实例，就可以在其他任意页面调用到app.js里声明的数据变量了。
比如lifecyle就是一个页面，我们可以在lifecyle.js里这样来调用：
function (options)
而如果我们想在app.js里调用globalData、tcbData对象里的数据，只需要使用this即可，不要使用getApp()。
2、函数的调用
有的时候要执行一个功能需要写很多个函数，或者有时候我们希望能够把一些特定的功能给封装成一个函数，如果把这些函数整个都写到生命周期函数或事件处理函数里面来调用就很不方便了。
比如一个博客小程序每篇文章发布成功之后，最好给用户一个发布成功的反馈以及会返回上一页，也就是一个功能里面需要执行多个函数，而且这个功能还比较常用，我们可以用如下方式：
function (options) 上面的案例没有给函数传递参数，回顾前面形参和实参的知识，我们可以在调用函数的时候用如下的方法传递参数，message和title的名称虽然不一样，但是也没有关系：
function (options) 在小程序页面的js文件中声明的变量和函数只在该文件中有效；不同的文件中可以声明相同名字的变量和函数，不会互相影响。
发表评论：