序言
this指向感觉也是js语言中一个比较经典的问题了,相信有过网页前端经验的小伙伴们肯定会有接触过吧,而鸿蒙的逻辑编程语言是ArkTS,是基于TS进行封装的,而TS又是经过JS封装的,这就形成了一个这样的关系链,JS --> TS --> ArkTs,因此ArkTS中的this指向和JS中大差不差,因此我结合我的理解给小伙伴们说说this的指向问题!!!
ArkUI中
先给大家测试一下在组件struct中打印this的详细信息观察一下,如下图:
当我们在结构体也就是组件中如果定义了一个变量this的打印结果如下:
而且当我们鼠标移动到变量上时,也会有这样的提示:
其实看完这些,小伙伴们应该都很清楚ArkUI中this的指向了
this直接就是指向了我们的这个组件
当我们在UI结构中使用this.变量的形式实则就是使用我们组件中自己所定义的变量。
class类中
这里也使用弹窗打印的形式给小伙伴们分享this代表的值
从这两张图来看,类中的构造函数中的this是指向这个类的实例
这里需要小伙伴们注意哟,this并不会指向这个类A,而是通过new方法所得到的实例,用图示的方法给小伙伴们演示:
这样看大家应该就比较清晰了,我们日常编程所用到的一些内置对象Math,Date,Array等等,其实都是一个类
当我们用Math.PI或者Array.isArray()这些通过类直接使用的成员和方法就是类的静态成员和方法了
我们就无法像这样const arr = new Array()的方式用arr.isArray()来使用类的静态方法或属性,只能使用arr对应的实例属性和方法
因此,我们可以很清晰的知道了在类的构造函数中this的指向就是一个实例成员
函数中
this在不同类型的函数中的指向也是不一样的
普通函数
最简单的理解,谁调用这个函数,
this就会指向谁
我用一个例子验证以上说法:
从这张图我们可以看出来目前的this是指向组件Test的
这里将父组件的方法传递给子组件,子组件对改方法进行调用,我们可以很清晰的看见现在this的指向其实已经变了,现在在子组件中调用这个父组件传过来的普通函数中的this指向了调用它的子组件
箭头函数
其实在箭头函数中并没有
this这个概念箭头函数其实是一种可以让this穿透的结构
就是说,如果我们在父组件中使用了箭头函数,箭头函数中使用到了this的一些属性方法,无论当这个函数到哪里被调用,这个this永远都是指向这个父组件的,现在用一个例子进行演示:
我们是在子组件中调用的函数,但是我们可以很明显的看到函数运行的结果依然是父组件中的数据,这也是说明函数中运行的this指向是指向父组件的,而不同于普通函数那样谁调用,this就指向谁。
改变this指向?
很遗憾,在
ArkTS中并像JS那样支持改变this的指向!!!
apply
call
bind
总结
以上是我在鸿蒙中所遇到的this场景,我感觉其中的重点就在于父向子传递方法的时候,我们需要时刻注意传递的这个函数是不是一个箭头函数,要注意this的一个指向