JavaScript 中的装饰函数

Question

这是一个修改普通函数的简单装饰器模式：

function decorator1(f){
function wrapper(...args){
pre();
return f(...args);
post();
}
return wrapper
}

现在假设有一个对象obj并且它的原型中有一个属性prop。出于某种原因，我想修改对象的绑定函数。

我不能直接使用此模式来装饰绑定函数obj.prop因为如果我将其作为参数传递给decorator，它将不会在wrapper中使用正确的对象调用，因为 JavaScript 依赖于调用来传递正确的对象。因此，obj.prop()是上下文感知的，但obj.prop不是。有没有办法克服这个限制？

如果这是不可能的，我需要：

更改模式以接受对象和属性作为 2 个不同的参数并使其工作。

function decorator2(o, f){
function wrapper(...args){
pre();
return o.f(...args);
post();
}
return wrapper
}
obj.prop = decorator2(obj, prop);

传递一个绑定函数，出于某种原因，我认为这是一个硬编码。

// This creates a bound function to itself.
obj.prop = obj.prop.bind(obj)
// This modifies it.
obj.prop = decorator1(obj.prop)

哪一个是首选？我会选择前者，因为我认为创建绑定函数并不好，除非你真的需要它们。

Answer 1

您可以在wrapper中使用this：

function decorate(f) {
return function wrapper(...args) {
pre();
const res = f.apply(this, args); // or f.call(this, ...args)
//                          ^^^^
post();
return res; // make post() work
};
}

有了这个，一个简单的obj.prop = decorate(obj.prop);将起作用。