HarmonyOS 鸿蒙Next 使用自定义装饰器后，被装饰的方法中无法使用 this，this 变成了 undefined

发布于 1周前 作者 wuwangju 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 使用自定义装饰器后，被装饰的方法中无法使用 this，this 变成了 undefined

示例代码如下


export interface Options<T> {
  errorReturn: T;
}

export function MyDecorator<T>(options: Options<T>) {
  return (target: Object, key: string, descriptor: PropertyDescriptor) => {
    if (canIUse('SystemCapability.ArkUI.ArkUI.Full')) {
      const originalMethod: Function = descriptor.value;
      descriptor.value = (...args: object[]):T => {
        try {
          return originalMethod(...args);
        } catch (error) {
          console.error(
            `catch error:${JSON.stringify(error)} with target:${target.constructor.name} method:${key}
            args:${JSON.stringify(args)}`
          );
          return options.errorReturn;
        }
      };
      return descriptor;
    } else {
      return descriptor;
    }
  }
}


import { MyDecorator } from "./Decorator";

export class DecoratorTest {
  result = 10;
  constructor() {

  }

  [@MyDecorator](/user/MyDecorator)<number>({ errorReturn: 0 })
  public doSomeThing(arg: string): number {
    // 被装饰之后，使用 this 会出错
    this.result = 11;
    return this.result;
  }
}

更多关于HarmonyOS 鸿蒙Next 使用自定义装饰器后，被装饰的方法中无法使用 this，this 变成了 undefined的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复
因为这里调用doSomething()方法，会通过 [@MyDecorator](/user/MyDecorator)装饰器 将 doSomething() 方法传入 MyDecorator方法中，然后再通过 MyDecorator方法中的 originalMethod(...args) 语句来调用 doSomething() 方法，所以此时的this指向不明。建议将doSomething()方法移出类并将其实例化后使用

更多关于HarmonyOS 鸿蒙Next 使用自定义装饰器后，被装饰的方法中无法使用 this，this 变成了 undefined的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，使用自定义装饰器后，被装饰的方法中this变成undefined的问题通常与装饰器如何改变方法的上下文绑定有关。在JavaScript及其衍生环境中（包括鸿蒙的JS开发框架），this的指向依赖于函数被调用的方式。装饰器可能会改变原始方法的调用方式，从而导致this指向不正确。

解决这类问题的一种常见方法是确保在装饰器内部正确绑定this。如果装饰器内部使用了函数或方法调用，并且希望保持原始的this上下文，可以通过使用.bind(this)或者在箭头函数中调用原始方法（箭头函数不绑定自己的this，会捕获其所在上下文的this值）来解决。

例如，如果你的装饰器是这样写的：

function myDecorator(target, key, descriptor) {
    const originalMethod = descriptor.value;
    descriptor.value = function(...args) {
        // 确保this指向正确
        return originalMethod.apply(this, args);
    };
    return descriptor;
}

确保在调用originalMethod时使用apply(this, args)或者改为箭头函数并在其中直接调用originalMethod()。

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部