ArkTs学习之纯血鸿蒙Next中的this指向?

一、概述

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

二、ArkUI中

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

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

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

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

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

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

三、class类中

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

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

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

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

当我们用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指向?

🐡 1. 系统推荐使用箭头函数配置组件的事件方法。
Button('Click me')
  .onClick(() => {
    this.myText = 'ArkUI';
  })
🐡 2. 系统使用 “匿名函数” 或者 “成员函数” 配置组件的事件方法。

使用匿名函数表达式或者成员函数配置组件的事件方法,要求使用bind,以确保函数体中的this指向当前组件。

  • 匿名函数配置组件
Button('add counter')
  .onClick(function(){
    this.counter += 2;
  }.bind(this))
  • 成员函数配置组件
/** 普通函数 */
private  myClickHandler() {
  console.log(this.name)
}
...

Button('add counter')
  .onClick(this.myClickHandler.bind(this))

六、总结

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

posted on 2024-11-05 19:35  梁飞宇  阅读(423)  评论(0)    收藏  举报