鸿蒙开发：this的指向问题

前言

"你开发的组件，明明我数据改变了，为什么却没有变化？"

"不对吧，你这个封装的不行，我在@Builder函数中获取外部的属性，总是为undefined？"

可以说，以上的反馈，无论是在工作之中，还是在外部的开源中，遇到了无数次，我的回答就一句话，那是你的this指向不对。

this，浅显易懂，就是指的自己，用于类中访问属性和方法，举一个很常见的一个案例，也是最简单的，通常我们给组件设置数据时，经常会用到this，如下所示，this就是指的当前组件Index。

TypeScript 复制代码

@Entry
@Component
struct Index {
  @State title: string = "标题"

  build() {
    Column() {
      Text(this.title)
    }
  }
}

如果是正常的组件引用，一般this不会出现大的问题，但是在自定义组件，用到了@BuilderParam装饰器，在需要外部传递@Builder函数的时候，问题就暴露出来了，我们还是来一个案例。

首先自定义一个组件，如下所示，接收一个外部传递组件layout。

TypeScript 复制代码

@Component
export struct Child {
  title: string = "我是Child"
  @BuilderParam layout: () => void

  build() {
    this.layout()
  }
}

我们把上述的自定义组件Child引用一下，然后自定义一个@Builder函数。

TypeScript 复制代码

@Entry
@Component
struct Index {
 title: string = "我是Index"

  build() {
    Child({
      layout: this.TextView
    })
  }

  @Builder
  TextView() {
    Column() {
      Text(this.title)
    }
  }
}

那么以上的案例，在运行之后，Text组件会显示 "我是Index" 还是 "我是 Child " 呢？

答案是 "我是Child"。

很多同学也会很懵，明明我在Index里调用的this，为什么不是显示Index里的 "我是Index" 数据呢？，哎，这就是this指向问题，也是很多同学在@Builder函数中一直困惑的问题。

this指向分析

以上的案例中，我们在使用自定义组件的时候，是直接通过this传递的，此时的this指向的是自定义组件Child，所以，在@Builder装饰器函数中，this获取的是自定义组件Child里的数据，如果自定义组件中未有定义，那么就为undefined，这也是前言中很多同学的反馈。

TypeScript 复制代码

Child({
      layout: this.TextView
    })

那么如何把this指向，修改宿主对象呢？也就是调用自定义组件的Index组件呢？很简单，只需要，修改为箭头函数即可。

TypeScript 复制代码

Child({
      layout: ()=>{
        this.TextView()
      }
    })

以上的案例，this指向的就是宿主对象，这样就解决了数据为什么为undefined，数据为什么无法更新的问题。

鸿蒙开发：this的指向问题

前言

this指向分析

相关总结