ArkTs学习之纯血鸿蒙Next中的this指向?
一、概述
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指向?
🐡 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
的一个指向