javascript - 使用装饰器将类方法附加到窗口对象

Question

我正在将 VueJS 与 typescrpit 一起使用，但这可以在任何 js 框架中。

我有一些组件，其中包含一些我想在全局公开的方法，以便可以通过浏览器控制台使用它们。第一个想法是将它们附加到窗口对象。这可以通过生命周期方法来完成，例如我们在我的案例中安装的方法，但我更喜欢使用装饰器来编写和使用更干净、更容易的解决方案。

我尝试过类似的方法:

mycomponenet.ts:

function makeGlobal() {
   return function(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
     (window as any)[propertyKey] = () => target[propertyKey]();
   };
 }

然后这个装饰器将很容易使用，例如:

@makeGlobal()
myMethodToGoGloabl(){
// do stuff ...
}

到目前为止，一切正常，直到函数使用 "this" ，如下所示:

@makeGlobal()
myMethodToGoGloabl(){
  this.firstName = "";
}

然后我收到错误firstName of undefined。通过搜索和阅读，我了解到装饰器是在类实例化之前执行的，因此我暴露的(如果我错了，请纠正我)是原型(prototype)方法，而不是实例的方法，这就是为什么我们无法访问它。我尝试过绑定(bind)(this)，但由于同样的原因我失败了，因为我没有全局公开实例的方法。

在我的情况下有没有办法使用装饰器，或者它们在这里毫无用处？

Answer 1

猜测问题出在你的装饰器上。你根本不接管这个实例...... 另外，按照您的方式，您将无法传递参数。

建议:

function makeGlobal() {
   return function(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
     var currentThis = this;
     (window as any)[propertyKey] = () => target[propertyKey].apply(currentThis, args);
   };
 }

还要记住克里斯蒂安在评论中所说的话。它基本上只能用于单例，因为它将重写多个实例的方法