在typescript中,如果你在类中使用箭头函数,你需要手动将它们绑定到类实例上,否则this关键字就会指向undefined。为了避免手动绑定函数,我们可以使用Autobind装饰器。
Autobind装饰器是一个简单的装饰器,用来自动将函数绑定到类实例上。下面是一个Autobind装饰器的实现示例:
function Autobind(_: any, _2: string, descriptor: PropertyDescriptor) {
const originalMethod = descriptor.value;
const adjustedDescriptor: PropertyDescriptor = {
configurable: true,
get() {
const boundFn = originalMethod.bind(this);
return boundFn;
}
};
return adjustedDescriptor;
}
这个装饰器接收三个参数:原型、属性的名称和属性描述符。在这个装饰器中,我们获取原始的函数并返回一个新的属性描述符,它的getter方法返回经过绑定的原始函数。
接下来,我们可以将这个装饰器应用到我们的箭头函数上,以便它们可以自动绑定到类实例上:
class MyClass {
constructor() {
// ...
}
@Autobind
myMethod() {
console.log(this);
}
}
现在,当我们在类实例上调用myMethod时,this关键字将会正确地指向该实例。
const myInstance = new MyClass();
myInstance.myMethod(); // 输出: MyClass {}