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

文章目录

在 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 = 0

  syncData(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
      // }})

      // 写法2
      myProp({ num: this.num, f: this.syncData })
    }
    .height('100%')
    .width('100%')
  }
}

@Component
struct myProp {
  @Prop
  num: number;
  f: (s: number) => void = this.myFun

  myFun(s: number): void { }

  @State action: boolean = false

  build() {
    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 = 0

  syncData(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 = 0

  syncData(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%')
  }
}

总结

在 TypeScript 中，this 的指向问题是一个常见的挑战，尤其是在处理回调函数和方法引用时。通过使用箭头函数或手动绑定 this，可以确保 this 始终指向预期的对象。

箭头函数 是最简单的方法，因为它自动捕获定义时的 this 上下文。
手动绑定 提供了更大的灵活性，适用于需要在多个地方使用同一个方法的情况。

通过正确处理 this 的指向，可以避免许多潜在的错误，并确保应用程序的稳定性和可维护性。
在这里插入图片描述