在箭头方法回调中传递 class 方法会丢失 `this` 上下文

Question

我很难理解为什么这段代码会失去 this 的上下文？我想要实现的是从已实现的已执行函数中删除一个（第一个）参数。问题是现在我无法从 class 实例范围访问任何内容。有谁知道这里发生了什么？我相信它可能与已使用的双箭头方法有关，但我不知道如何修复它。

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

Answer 1

改变这个：

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

对此：

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

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

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

如果您真的打算将此 class 用作回调管理器，那么您可以像这样将绑定构建到回调 class 本身：

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。

在箭头方法回调中传递 class 方法会丢失 `this` 上下文

Passing class method within an arrow method callback is losing `this` context

javascript

node.js