纯血鸿蒙Next中的this指向?

326 阅读3分钟

序言

this指向感觉也是js语言中一个比较经典的问题了,相信有过网页前端经验的小伙伴们肯定会有接触过吧,而鸿蒙的逻辑编程语言是ArkTS,是基于TS进行封装的,而TS又是经过JS封装的,这就形成了一个这样的关系链,JS --> TS --> ArkTs,因此ArkTS中的this指向和JS中大差不差,因此我结合我的理解给小伙伴们说说this的指向问题!!!

ArkUI中

先给大家测试一下在组件struct中打印this的详细信息观察一下,如下图:

image-20240910102956357.png

当我们在结构体也就是组件中如果定义了一个变量this的打印结果如下:

image-20240910103224952.png

而且当我们鼠标移动到变量上时,也会有这样的提示:

image-20240910104126495.png

其实看完这些,小伙伴们应该都很清楚ArkUIthis的指向了

this直接就是指向了我们的这个组件

当我们在UI结构中使用this.变量的形式实则就是使用我们组件中自己所定义的变量。

class类中

这里也使用弹窗打印的形式给小伙伴们分享this代表的值

image-20240910111530866.png

image-20240910111618339.png

从这两张图来看,类中的构造函数中的this是指向这个类的实例

这里需要小伙伴们注意哟,this并不会指向这个类A,而是通过new方法所得到的实例,用图示的方法给小伙伴们演示:

image-20240910112341540.png

这样看大家应该就比较清晰了,我们日常编程所用到的一些内置对象MathDateArray等等,其实都是一个类

当我们用Math.PI或者Array.isArray()这些通过类直接使用的成员和方法就是类的静态成员和方法了

我们就无法像这样const arr = new Array()的方式用arr.isArray()来使用类的静态方法或属性,只能使用arr对应的实例属性和方法

因此,我们可以很清晰的知道了在类的构造函数中this的指向就是一个实例成员

函数中

this在不同类型的函数中的指向也是不一样的

普通函数

最简单的理解,谁调用这个函数,this就会指向谁

我用一个例子验证以上说法:

image-20240910155338972.png

从这张图我们可以看出来目前的this是指向组件Test

image-20240910160818730.png

这里将父组件的方法传递给子组件,子组件对改方法进行调用,我们可以很清晰的看见现在this的指向其实已经变了,现在在子组件中调用这个父组件传过来的普通函数中的this指向了调用它的子组件

箭头函数

其实在箭头函数中并没有this这个概念箭头函数其实是一种可以让this穿透的结构

就是说,如果我们在父组件中使用了箭头函数,箭头函数中使用到了this的一些属性方法,无论当这个函数到哪里被调用,这个this永远都是指向这个父组件的,现在用一个例子进行演示:

image-20240910163639873.png

我们是在子组件中调用的函数,但是我们可以很明显的看到函数运行的结果依然是父组件中的数据,这也是说明函数中运行的this指向是指向父组件的,而不同于普通函数那样谁调用,this就指向谁。

改变this指向?

很遗憾,在ArkTS中并像JS那样支持改变this的指向!!!

apply

image-20240910170345038.png

call

image-20240910170455014.png

bind

image-20240910170524950.png

总结

以上是我在鸿蒙中所遇到的this场景,我感觉其中的重点就在于父向子传递方法的时候,我们需要时刻注意传递的这个函数是不是一个箭头函数,要注意this的一个指向