鸿蒙Next开发-普通函数和箭头函数 this指向的区别以及对UI刷新的影响

问题场景 

在项目中使用如下代码订阅全局事件

AppUtil.getContext().eventHub.on('theme', this.eventFunc);

eventFunc(theme:number){ this.xxx }//普通方法

这样实现this 的指向是调用该方法的对象即AppUtil，则不会触发UI的刷新

，找原因找半天原来是this 的问题 还以为是@State的注解使用有问题

正确使用方法如下

AppUtil.getContext().eventHub.on('theme', (t:number)=>{//这里需要使用箭头函数自动继承上下文的this 如果使用普通函数this指向的是调用该方法的对象即AppUtil，则不会触发UI的刷新。  this.xxx= t});

使用箭头函数后刷新UI正常了。

总结回顾 

在鸿蒙应用开发（基于ArkTS，即TypeScript的超集）中，普通函数和箭头函数的this指向行为与JavaScript/TypeScript一致，区别如下：

1. 普通函数（Function Declaration）

• 动态绑定：this的值由函数调用时的上下文决定。

• 常见场景：

  • 直接调用：非严格模式下this指向全局对象（如window），严格模式下为undefined。

  • 对象方法调用：this指向调用该方法的对象。

  • 构造函数调用：this指向新创建的实例。

  • 通过call/apply/bind调用：this指向绑定的对象。

示例

class MyClass {
  value: string = "Hello";

  // 普通函数
  printValue() {
    console.log(this.value); // 依赖调用时的上下文
  }
}

const obj = new MyClass();
const func = obj.printValue;
func(); // 错误：此时`this`指向全局对象，`value`为undefined

2. 箭头函数（Arrow Function）

• 静态绑定：this继承自定义时的外层作用域，且不可被修改（call/apply/bind无效）。

• 适用场景：

  • 需要固定this指向（如事件回调、异步操作）。

  • 避免因上下文丢失导致的错误。

示例

class MyClass {
  value: string = "Hello";

  // 箭头函数
  printValue = () => {
    console.log(this.value); // 始终指向当前类实例
  };
}

const obj = new MyClass();
const func = obj.printValue;
func(); // 正确输出"Hello"

核心区别总结

鸿蒙开发中的实践建议

1. 类方法定义：

   class MyComponent {
     count: number = 0;
   
     // 推荐：箭头函数绑定正确上下文
     handleClick = () => {
       this.count++; // 正确访问实例属性
     };
   }

• 若需确保this始终指向类实例，优先使用箭头函数。

事件回调：

Button()
  .onClick(this.handleClick) // 使用箭头函数确保`this`正确

• 事件处理函数（如按钮点击）需用箭头函数，避免this丢失。

避免全局污染：

• 在模块或类作用域内定义箭头函数，避免this指向全局对象。

通过合理选择函数类型，可以有效管理this指向，避免运行时错误，提升代码可维护性。

关注我获取更多知识或者投稿