HarmonyOS 鸿蒙NEXT @Builder 里的 this 指向问题:

HarmonyOS 鸿蒙NEXT @Builder 里的 this 指向问题: Parent 组件给 Children 组件,传递了 @BuilderParam, 这个自定义构建函数里的 this,指向谁?

有两种情况:

  1. 如果用 @Builder 装饰的,指向 Children
  2. 如果用 @LocalBuilder 装饰的,指向 Parent

我们需要详细解释这两种情况,并总结提炼。

背景知识:

  • @Builder装饰器:用于定义一个自定义构建函数,可以在组件内定义(局部)或在全局定义(全局构建函数)。
  • @BuilderParam属性装饰器:用于子组件中,表示该属性可以接收一个自定义构建函数,由父组件传递。

关键点:在构建函数内部,this的指向取决于构建函数的定义位置和传递方式。

情况1:使用全局的@Builder(或者组件外的@Builder)定义构建函数,然后传递给子组件的@BuilderParam

// 全局构建函数
[@Builder](/user/Builder) function globalBuilderFunction() {
  // 这里的this指向谁?
}
@Entry
@Component
struct Parent {
  build() {
    Column() {
      Children({ builderParam: globalBuilderFunction })
    }
  }
}
@Component
struct Children {
  [@BuilderParam](/user/BuilderParam) builderParam: () => void
  build() {
    this.builderParam()
  }
}

在这种情况下,全局构建函数中的this在调用时指向子组件(Children)的实例。因为全局构建函数独立于任何组件,当在子组件中被调用时,其执行上下文是子组件。

情况2:使用局部自定义构建函数(在父组件内部使用@Builder定义)传递给子组件的@BuilderParam

@Entry
@Component
struct Parent {
  [@Builder](/user/Builder) localBuilderFunction() {
    // 这里的this指向谁?
  }
  build() {
    Column() {
      Children({ builderParam: this.localBuilderFunction })
    }
  }
}
@Component
struct Children {
  [@BuilderParam](/user/BuilderParam) builderParam: () => void
  build() {
    this.builderParam()
  }
}

在这种情况下,局部构建函数中的this在定义时就已经绑定到父组件(Parent)的实例。因为局部构建函数是作为父组件的一个方法,它内部的this指向父组件实例。即使传递给子组件并在子组件中调用,它仍然保持对父组件的引用。

总结:

  • 全局构建函数(定义在组件外)中的this在子组件中调用时,指向子组件实例。
  • 局部构建函数(定义在父组件内)中的this始终指向父组件实例,无论在哪里调用。

注意:在ArkUI中,组件的this指向当前组件的实例,可以访问该组件的状态变量、方法等。

因此,我们可以提炼如下:

  1. 全局自定义构建函数(使用@Builder定义在组件外): 当传递给子组件的@BuilderParam并在子组件中调用时,函数体内的this指向子组件实例(即Children组件实例)。
  2. 局部自定义构建函数(使用@Builder定义在父组件内): 当传递给子组件的@BuilderParam时,函数体内的this仍然指向父组件实例(即Parent组件实例),因为该函数是在父组件的上下文中创建的。

更多关于HarmonyOS 鸿蒙NEXT @Builder 里的 this 指向问题:的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

实际开发中的建议:

1, 在构建函数中避免使用this,除非你很清楚它的指向。

2, 如果需要访问父组件的数据,使用局部构建函数并利用闭包(直接使用父组件的状态变量,因为构建函数定义在父组件内,可以访问父组件的变量)或者通过参数传递数据。

3, 如果需要访问子组件的数据,可以使用全局构建函数,并在子组件中调用时通过this访问子组件的数据,或者通过参数传递。

更多关于HarmonyOS 鸿蒙NEXT @Builder 里的 this 指向问题:的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙NEXT中,@Builder装饰器内的this指向当前组件实例。当@Builder作为组件方法定义时,this指向所属组件;当作为全局函数定义时,this指向undefined。在@BuilderParam装饰的方法内,this指向调用该方法的组件实例。注意箭头函数会改变this绑定行为,保持定义时的上下文。

关于HarmonyOS NEXT中@Builder的this指向问题,总结如下:

  1. 全局@Builder函数(定义在组件外部):
  • this指向调用者组件实例(子组件Children)
  • 因为全局构建函数独立于组件,执行时绑定调用者上下文
  • 示例中globalBuilderFunctionthis指向Children实例
  1. 局部@Builder函数(定义在父组件内部):
  • this始终指向定义它的组件实例(父组件Parent)
  • 作为父组件方法,this在定义时已绑定父组件上下文
  • 示例中localBuilderFunctionthis保持指向Parent实例

关键区别在于函数定义位置决定this绑定时机:

  • 全局构建函数在调用时动态绑定this
  • 局部构建函数在定义时静态绑定this

这种设计保持了JavaScript/TypeScript的this绑定规则,同时适应了ArkUI的组件化架构需求。开发者需要注意构建函数的定义位置会影响this的可访问成员。

回到顶部