HarmonyOS 鸿蒙Next中回调函数中的this值为undefined

HarmonyOS 鸿蒙Next中回调函数中的this值为undefined 如下代码，在横竖屏切换时，回调函数screenChange会抛异常，原因是this的值为undefined，为什么会出现这个问题呢？

async aboutToAppear()  {
  display.on('change', this.screenChange);
}

screenChange() {
  try {
    const currentDisplay = display.getDefaultDisplaySync();
    this.orientation = currentDisplay.orientation
    console.info('当前屏幕方向:', currentDisplay.orientation);
  } catch (err) {
    console.error('获取屏幕信息失败:', err);
  }
}

更多关于HarmonyOS 鸿蒙Next中回调函数中的this值为undefined的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

将回调函数注册，修改为下面这样试试：

display.on('change', this.screenChange.bind(this));

或者

display.on('change', ()=>{
  this.screenChange()
});

更多关于HarmonyOS 鸿蒙Next中回调函数中的this值为undefined的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


一、display.on(‘change’, this.function)的潜在问题

作用域丢失风险

直接传递 this.function作为回调时，方法内的 this可能不再指向当前类实例。在事件触发时，若未显式绑定作用域，this可能指向全局对象或 undefined，导致访问类成员时出错。

class Example {
  private data = 0;
  handleChange() {
    console.log(this.data); // 可能报错：this.data 为 undefined
  }
  registerEvent() {
    display.on('change', this.handleChange); // this 未绑定
  }
}

需手动绑定作用域

若必须使用类方法，需通过 .bind(this)显式绑定：

display.on('change', this.handleChange.bind(this)); // 正确绑定 this

二、display.on(‘change’, () => {})的优势

自动绑定作用域

箭头函数 (() => {}) 会继承外层作用域的 this，确保回调内的 this始终指向当前类实例，避免作用域丢失问题：

display.on('change', () => {
  this.handleChange(); // this 正确指向类实例
  this.data = 100;     // 可安全访问类成员
});

灵活性更高

箭头函数允许在回调内直接编写逻辑或调用多个方法，无需额外封装：

display.on('change', () => {
  this.updateData();
  this.refreshUI();
});

在HarmonyOS Next中，回调函数内this值为undefined是由于严格模式下的执行上下文差异。可使用箭头函数自动绑定外层this，或通过Function.prototype.bind()显式绑定。若回调为类方法，可在构造函数中使用bind预先绑定实例。

在HarmonyOS Next中，回调函数的this值丢失是JavaScript/TypeScript的常见问题。当将this.screenChange作为回调直接传递给display.on()时，函数会脱离原始对象上下文执行，导致this变为undefined。

解决方案：

  1. 使用箭头函数（推荐）：
async aboutToAppear() {
  display.on('change', () => this.screenChange());
}

箭头函数自动绑定外部this上下文。

  1. 显式绑定：
async aboutToAppear() {
  display.on('change', this.screenChange.bind(this));
}
  1. 类字段箭头函数：
screenChange = () => {
  // 方法实现
}

根本原因：JavaScript的函数调用上下文取决于调用方式。直接传递类方法作为回调时，会丢失原始对象的this绑定。HarmonyOS的事件系统调用回调时使用默认的全局上下文（严格模式下为undefined）。

回到顶部