【鸿蒙】鸿蒙开发过程中this指向问题

文章目录

- 什么是 `this`？
- 常见 `this` 指向问题
- 案例分析：HarmonyOS 组件中的 `this` 指向问题
- - 问题描述
  - 问题分析
  - 原因
- 解决方案：绑定 `this` 的正确方法
- - 方法一：使用箭头函数
  - 方法二：手动绑定 `this`
- 完整代码示例
- - 使用箭头函数
  - 使用 `bind` 方法
- 总结

在 TypeScript 开发中，尤其是在使用面向对象编程（OOP）或基于组件的框架（如 HarmonyOS）时，this 的指向问题是一个常见且容易引发错误的挑战。本文将深入探讨 this 的绑定机制，并通过一个实际案例，展示如何在 TypeScript 中正确处理 this 的指向问题。

什么是 `this`？

在 TypeScript 中，this 是一个关键字，代表当前对象的上下文。它指向调用该函数的对象，具体指向取决于函数的调用方式。

全局上下文：this 指向全局对象（在浏览器中是 window，在 Node.js 中是 global）。
对象方法：this 指向调用该方法的对象。
构造函数：this 指向新创建的对象。
箭头函数：this 指向定义时的上下文，而不是调用时的上下文。

常见 `this` 指向问题

在 TypeScript 开发中，this 指向问题通常出现在以下几种情况：

回调函数中的 this：当一个方法作为回调函数传递给其他函数时，this 的指向可能会丢失。例如，在事件处理程序中，this 可能指向触发事件的元素，而不是组件实例。
嵌套函数中的 this：在嵌套函数中，this 的指向可能会发生变化，导致无法访问到预期的对象属性。
类方法作为参数传递：当类的方法被作为参数传递给其他函数时，this 的指向可能会丢失。

案例分析：HarmonyOS 组件中的 `this` 指向问题

在这里插入图片描述
需求：要根据上图，实现父组件与子组件联动的功能

问题描述

我们来看一个 HarmonyOS 组件的示例，其中包含一个 PropCase1 组件和一个 myProp 子组件。

@Entry
@Component
struct PropCase1 {@State num: number = 0syncData(s: number) {this.num = s}build() {Column({ space: 10 }) {Text(`父组件计算器：${this.num}`)Button('点击+1').width(100).height(50).borderRadius(20).onClick(() => {this.num++})Divider().color(Color.Gray).width('100%').strokeWidth(1)// 写法1// myProp({ num: this.num, f: (s: number) => {//   this.num = s// }})// 写法2myProp({ num: this.num, f: this.syncData })}.height('100%').width('100%')}
}@Component
struct myProp {@Propnum: number;f: (s: number) => void = this.myFunmyFun(s: number): void { }@State action: boolean = falsebuild() {Column({ space: 10 }) {Text(`子组件计算器：${this.num.toString()}`)Button('点击+1').width(80).height(40).borderRadius(15).onClick(() => {this.num++this.f(this.num)})}}
}

问题分析

在上述代码中，PropCase1 组件将 syncData 方法作为回调函数传递给 myProp 子组件：

myProp({ num: this.num, f: this.syncData })

然而，当 myProp 子组件调用 f(this.num) 时，this.num 在 syncData 方法中并没有正确更新父组件的 num，导致父组件无法接收到变化。

原因

上下文丢失：在写法2中，syncData 方法在子组件中调用时，this 指向的是子组件，而不是父组件。因此，this.num 实际上是指向子组件的 num，而不是父组件的 num。
解决方法：需要确保 syncData 方法的 this 正确绑定到父组件。

解决方案：绑定 `this` 的正确方法

方法一：使用箭头函数

箭头函数不会创建自己的 this，它会捕获定义时的 this 上下文。因此，使用箭头函数可以确保 this 始终指向父组件。

myProp({ num: this.num, f: (s: number) => {this.num = s
}})

优点：

简单直接，不需要手动绑定 this。
箭头函数自动捕获父组件的 this 上下文。

方法二：手动绑定 `this`

如果使用普通函数，需要手动绑定 this，可以使用 bind 方法，或者使用箭头函数定义方法。

使用 bind 方法：

myProp({ num: this.num, f: this.syncData.bind(this) })

使用箭头函数定义方法：

syncData = (s: number) => {this.num = s
}

然后在传递时：

myProp({ num: this.num, f: this.syncData })

优点：

更加灵活，可以在需要时动态绑定 this。
适用于需要在多个地方使用同一个方法的情况。

完整代码示例

以下是使用箭头函数和 bind 方法的完整代码示例：

使用箭头函数

@Entry
@Component
struct PropCase1 {@State num: number = 0syncData(s: number) {this.num = s}build() {Column({ space: 10 }) {Text(`父组件计算器：${this.num}`)Button('点击+1').width(100).height(50).borderRadius(20).onClick(() => {this.num++})Divider().color(Color.Gray).width('100%').strokeWidth(1)// 使用箭头函数myProp({ num: this.num, f: (s: number) => {this.num = s}})}.height('100%').width('100%')}
}

使用 `bind` 方法

@Entry
@Component
struct PropCase1 {@State num: number = 0syncData(s: number) {this.num = s}build() {Column({ space: 10 }) {Text(`父组件计算器：${this.num}`)Button('点击+1').width(100).height(50).borderRadius(20).onClick(() => {this.num++})Divider().color(Color.Gray).width('100%').strokeWidth(1)// 使用 bind 方法myProp({ num: this.num, f: this.syncData.bind(this) })}.height('100%').width('100%')}
}