微信小程序云开发教程-微信小程序的JS基础-this关键字

同学们大家好，我是小伊同学，经过前面的学习，相信大家已经学会js的基本知识了，本节我们将一起学习Js中的一个关键知识点：this关键字的使用。

this是js中的一个关键字，它表示当前对象的一个引用。因此，this所代表的东西是不固定的，它会随着执行环境的改变而改变。在不同位置调用时，其所指向的对象也不同。在小程序中，我们在js文件的任何位置都可以将this当作变量使用。当我们在某个位置使用时，其所指向的对象往往是上一层对象。当我们在函数中使用时，其所指向的对象为全局对象，也就是这个页面，此时我们可以使用this来访问页面的数据或者调用页面内的函数，例如：访问页面的数据时，我们使用this加点加data，这里的data是我们在页面中定义的页面初始数据那一部分。调用页面内的函数时，我们使用this加点加函数名称，例如我们之前讲过的onLoad函数，此时，当系统执行这一语句就会执行onLoad函数。

需要注意：如果我们在API中使用this，其将不会指向页面，这相当于已经进入了下一层结构，他的上一层对象已经不是整个页面了，因此无法访问页面数据及函数。这使得我们在api中使用this访问数据和函数变得非常不方便，因此，需要我们在调用api之前暂存当时指向页面的this，例如：var that = this，新建一个变量，变量名为that，来保存住当前的this，这样调用api后this会被系统自动变为新的，但that是我们自己创建的，并不会改变。我们在api中就能够通过that.data和that.onLoad来进行调用了。

下面我们将举例说明。右边是我们页面的部分js代码，左边为我们在编译器中的调试接口。我们在小程序中新建了一个名为data的页面，在该页面的初始数据中，我们随意给定了一些数据：abc。之后在onLoad函数中，我们尝试访问这些数据并通过窗口打印输出，可以看到，我们分别打印了整个data以及其中abc每个变量。这里的this我们不需要定义并初始化，直接使用就可以了。通过this点data我们能够访问到页面数据部分，再加上点和变量名可以访问到data中的变量，此时，我们无论是赋值还是读取都是可以操作的。

此外我们可以通过this加上点加函数名来调用js页面中定义的函数，比如我们这里定义了一个新的函数action函数。在第26行的onLoad函数中，我们使用this加点加函数名去调用了这个函数。在这个函数中，我们对a变量进行了赋值，赋值为666，并打印输出了一句话。当函数被调用后，程序执行了这两个操作，可以看到在调试窗口中的输出。对于输出的次序也和代码是一一对应的，是在我们打印变量之后，与我们在onload函数中的代码流程是符合的。

此外，这里的调试窗口的每一行输出后面，都注明了打印输出来自哪个页面，对于其后的数字，则表示输出语句的行号。这里的22、23、24、25与代码中的打印语句是一致的。在调用函数的时候，15行输出了一句话也没有问题。这也是我们调试小程序的一种方法。

好了，本小节的内容就是这些，如果大家喜欢我的讲解，欢迎关注或转发分享，不要忘了点个“在看”支持一下哦~

我们明天继续。

想看视频版？

关注公号“微程序学堂”，我们的视频教程即将上线

如果你自己写了好文章想投稿

请联系我们

微信小程序云开发教程-微信小程序的JS基础-this关键字相关推荐

微信小程序云开发教程-微信小程序框架的介绍
同学们大家好,我是小伊同学,今天我们来学习微信小程序框架. 微信小程序实质上是一款基于web技术的应用程序,他和我们平常所接触到的前端网页是大同小异的.相同点在于他们使用的开发语言,代码结构以及代码的 ...
uniapp同步获取用户信息_微信小程序云开发教程微信小程序的API入门获取用户身份信息系列API...
同学们大家好,我是小伊同学,上一节我们介绍了一些常用API,今天我们接着来学习一组API,那就是获取用户身份信息的API. 在微信小程序中,我们往往需要获取用户的身份信息,比如昵称.头像.性别.地区等 ...
页面url带参数_微信小程序云开发教程微信小程序的JS高级页面间数据传递
同学们大家好,我是小伊同学,上一节课我们讲解了全局数据的读写方法,那么在页面间同样需要数据交互,今天我们就来学习这部分内容. 在微信小程序中,我们常常需要将数据在页面之间进行传递,比如用户的身份信息, ...
❤️微信小程序云开发教程合集（视频+图文）免费❤️
一.视频版微信小程序云开发视频教程上线啦二.图文版 (1)预备知识 1. 怎么注册开通个人微信小程序 2. 微信小程序云开发教程-互联网软件的运作模式 3.微信小程序云开发教程-云开发对微信小程序 ...
基于微信小程序云开发的投票小程序源码，图文投票微信小程序源码
功能介绍投票活动十分火,商家,企业,机构偶尔都会来一场投票活动评选,本小程序支持图文投票,简单方便.随时随地完成投票,可以方便设定投票模式(按天按全程,投票数限定). 本代码前后端完整代码包投票列表 ...
微信小程序云开发成绩查询小程序的制作过程。
微信小程序云开发成绩查询小程序的制作过程. 如果觉得我讲的好可以点个关注. 明确自己的目的,到底要做一个怎么样的小程序. 我先上效果图: 确定后就可以开始自己布局.主要是用css 1.先看首页,首页主 ...
小程序云开发教程七：贴子的详情及评论功能
我们先看看界面: 我们如果要实现评论功能, 先看一下总的数据结构: 那么需要什么参数呢? 参数如下 comment: 评论内容username: 用户名time: 评论时间userId: 用户idid ...
小程序云开发实现微信支付，不需要搭建服务器
一.开发微信支付功能一定要架设服务器吗? 2019年的最后一天,舍得叔叔沉浸在探索的兴奋中,验证了微信小程序云开发也能优雅实现微信支付!小程序的目标是建立一个"serverless" ...
mysql导入微信小程序云开发_微信小程序-云开发数据库上传json文件
小程序新增了云开发功能,对于个人开发者是个利好消息.可以省去购买服务器,购买域名以及繁琐配置等步骤,减轻了开发者的负担.至于如何云开发我就不在这里赘述了,请移步微信小程序云开发官方文档,说的很清楚.这 ...
微信小程序云开发-树洞小程序Treehole（介绍）
记录一款基于云开发的微信小程序. 树洞,顾名思义是作为匿名吐槽的平台,主要功能可以参照微信朋友圈的形式,不过采取的是匿名的方式. 主要基于微信小程序云开发,前端个人主页页面的界面使用的是ColorUi ...

微信小程序云开发教程-微信小程序的JS基础-this关键字

微信小程序云开发教程-微信小程序的JS基础-this关键字相关推荐

最新文章

热门文章