javascript - 装饰在 Vue 中调用的函数弄乱了 'this' 绑定(bind)？

Question

我的 Vue 应用程序使用普通 JS 对象来集中数据库调用。我想控制台记录调用。为此，我正在装饰对象的方法，如下所示:

const Caller = {
    callingDB (arg1, arg2) { return ... } //Promise-wrapped db call here
}
const decorator = f => (...args) => {
    return f(...args).then(res => console.log(`Invoked method ${f.name} with ${args} for result: ${res}`))
}

Caller.callingDB = decorator(Caller.callingDB)

在几个 Vue 组件中，我有调用上述普通对象方法的组件方法: ...

methods: {
 cMethod() { this.Caller.callingDB(arg1, arg2) }
}

但有一个警告:一旦装饰了 Caller.callingDB 方法，就会由于“this”未定义而引发错误——我的应用程序中的数据流在这里和那里依赖于通过上述方法进行的链式数据库调用，所有这些都以类似的方式调用。没有装饰一切正常。

我不明白为什么会出现这些错误。关于我应该如何重写我的装饰器以保留所有后续的 this-bounded 调用的任何提示？还是我错过了这些错误背后的罪魁祸首？

Answer 1

const decorator = f => (...args) => {
    return f.apply(Caller, args).then(res => console.log(`Invoked method ${f.name} with ${args} for result: ${res}`))
}

js 中的函数有 apply 方法，它接受 this 值作为第一个参数，arguments 数组作为第二个参数。

这是修改后的代码的 fiddle https://jsfiddle.net/435h2gwp/