javascript - 为基类的函数运行函数引用时出现 Angular 丢失上下文

This question already has answers here:

How to access the correct `this` inside a callback?

(12个答案)


1年前关闭。




假设我有扩展了CtrlOne的CtrlTwo和在componentOne模板中实例化的CtrlOne。一些代码(我跳过了大多数不相关的代码，因此问题将更加清楚):

class CtrlOne extends CtrlTwo {
    constructor() { super(); }
}

class CtrlTwo {

    sayMyName(name: string) {
        console.log(this.getMyLastName() + name);
    }

    getMyLastName() {
       return 'squarepants';
    }
}

这是与CtrlOne关联的模板:

<component-one data-say-my-name="vm.sayMyName"></component-one>

这是无状态的componentOne:

angular.module('mymodule').component('componentOne', {
     bindings: {
         sayMyName: '&'
     },
     template: '<button data-ng-click="$ctrl.sayMyName()('spongebob')></button>'
});

单击时，我成功到达sayMyName的函数CtrlTwo，但是它拒绝识别this.getMyLastName，而是抛出TypeError: this.getMyLastName is not a function。

如果我只是直接从sayMyName模板中使用getMyLastName或CtrlOne，则一切正常。但是，如果我通过传递给componentOne的绑定(bind)使用它，则会收到错误消息。

我在这里想念什么？

最佳答案

应该用作回调的类方法应绑定(bind)到其上下文。

喜欢

class CtrlTwo {
    constructor() {
        this.sayMyName = this.sayMyName.bind(this);
    }
    ...
}

或者

class CtrlTwo {
    sayMyName = (name: string) => { ... }
    ...
}