微信小程序云开发教程-微信小程序的JS基础-this关键字
发布于 4 年前 作者 li50 3595 次浏览 来自 分享

 同学们大家好,我是小伊同学,经过前面的学习,相信大家已经学会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行输出了一句话也没有问题。这也是我们调试小程序的一种方法。

回到顶部