鸿蒙开发：this的指向问题

jinchanchan

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

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

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

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

@Entry

@Component

struct Index {

  @State title: string = "标题"

 

  build() {

    Column() {

      Text(this.title)

    }

  }

}

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

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

@Component

export struct Child {

  title: string = "我是Child"

  @BuilderParam layout: () => void

 

  build() {

    this.layout()

  }

}

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

@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，这也是前言中很多同学的反馈。

Child({

      layout: this.TextView

    })

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

Child({

      layout: ()=>{

        this.TextView()

      }

    })

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

相关总结

所以，在以后遇到@Builder函数的时候，如果你要用到外部宿主的this，书写方式为箭头函数()=>{}，在大括号里引用你定义的@Builder函数，切记，箭头函数的this才是指向的是宿主对象，否则指向的是自定义组件。

()=>{

  //你定义的@Builder函数

}

所以啊，老铁们，你们在使用别人自定义的组件时，一定要注意到这个this指向问题，并不是别人封装的不对，而是我们使用的方式不对，学会这些以后，我相信你已经摩拳擦掌了，这里有base北京，上海，深圳等的大厂机会，戳——>链接快速内推吧。

希望这个this，能打开你的新世界大门！

作者：程序员一鸣
来源：稀土掘金