javascript - 在箭头方法回调中传递类方法正在丢失“this”上下文

我正在努力理解为什么这个片段会失去 this 的上下文?我想要实现的是从已实现的已执行函数中删除一个(第一个)参数。问题是现在我无法从类实例范围访问任何内容。有人知道这里发生了什么吗?我相信它可能与已使用的双箭头方法有关,但我不知道如何修复它。

class Callback {
    test = 'test';
    
    callback(a) {
        console.log(this);
        console.log(a);
    }
}


const callback = new Callback();

const serverAdapter = (cb) => (_, args, context) => cb(args, context?.req);

console.log("Having a context");
callback.callback('test');

console.log("Losing the context");
serverAdapter(callback.callback)(1,2,3);

结果:

[LOG]: "Having a context" 
[LOG]: Callback: {
  "test": "test"
} 
[LOG]: "test" 
[LOG]: "Losing the context" 
[LOG]: undefined 
[LOG]: 2

回答1

改变这个:

serverAdapter(callback.callback)(1,2,3);

对此:

serverAdapter(callback.callback.bind(callback))(1,2,3);

当您将 obj.foo 作为参数传递时,只有对该方法的引用作为普通函数传递,然后当您传递给它的函数调用该函数时,它只是作为普通函数调用,而不是作为 obj.foo() 所以那里不再是对原始对象的任何引用。

有多种方法可以解决这个问题。使用 .bind() 就是这样一种机制。

如果您真的要将此类用作回调管理器,那么您可以将绑定构建到回调类本身中,如下所示:

class Callback {
    test = 'test';

    constructor() {
        // create bound method
        this.callback = this.callbackOp.bind(this);
    }
    
    callbackOp(a) {
        console.log(this);
        console.log(a);
    }
}

然后,您可以将 obj.callback 作为回调传递,它会自动为您绑定到 obj

相似文章

随机推荐

最新文章