类构造函数上的JavaScript Decorator [英] JavaScript Decorator on Class constructor

问题描述

我正在尝试在类实例（例如插件系统）中添加一些属性。
为此，我遵循了这个示例使用类装饰器来做到这一点：

I'm trying to add some properties in class instances (like a Plugin system). For that, I followed this example to do that with a Class Decorator:

function testDecorator(target:any) {
    // save a reference to the original constructor
    var original = target;

    // the new constructor behaviour
    var f : any = function (...args: any[]) {
        console.log("New: " + original.name); 
        return original.apply(this, args)
    }

    // copy prototype so intanceof operator still works
    f.prototype = original.prototype;

    // return new constructor (will override original)
    return f;
}

class AbstractClass {
    constructor() {
        console.log('Init AbstractClass');
    }
}

@testDecorator
class AClass extends AbstractClass {

    constructor() {
        super();
        console.log('Init AClass');
    }

    foo() {
        console.log('Launch foo');
    }

}

class BClass extends AClass {
    constructor() {
        super();
        console.log('Init BClass');
    }

    bar() {
        console.log('Launch bar');
    }
}

var bInstance = new BClass();

bInstance.foo();
bInstance.bar();

但这不起作用：由于目标是一个类，因此出现此错误：

But it doesn't work: as target is a class, I get this error:

return original.apply(this, args);
                       ^
TypeError: Class constructor AClass cannot be invoked without 'new'

，则无法调用类构造函数AClass我了解由于Class构造函数（而不是原型函数 constructor）而无法执行此操作。

I understand that I cannot do that because of Class constructor (not prototype function "constructor").

所以我尝试将这段代码修改为：

So I tried to adapt this code to:

function testDecorator(target:any) {
    // save a reference to the original constructor
    var original = target;

    // the new constructor behaviour
    var f : any = function (...args: any[]) {
        console.log("New: " + original.name); 
        return new original(...args)
    }

    // copy prototype so instanceof operator still works
    f.prototype = original.prototype;

    // return new constructor (will override original)
    return f;
}

class AbstractClass {
    constructor() {
        console.log('Init AbstractClass');
    }
}

@testDecorator
class AClass extends AbstractClass {

    constructor() {
        super();
        console.log('Init AClass');
    }

    foo() {
        console.log('Launch foo');
    }

}

class BClass extends AClass {
    constructor() {
        super();
        console.log('Init BClass');
    }

    bar() {
        console.log('Launch bar');
    }
}

var bInstance = new BClass();

bInstance.foo();

console.log(bInstance instanceof AClass);// true
console.log(bInstance instanceof BClass);// false

bInstance.bar();

因此，bInstance不再是BClass的实例。所以它也不起作用。所以我得到这个错误：

With that, bInstance is not an instance of BClass anymore. So it doesn't work also. So I get this error:

bInstance.bar();
          ^
TypeError: bInstance.bar is not a function

有任何建议吗？

谢谢。

推荐答案

以防有人仍然需要此功能。在装饰器内部，而不是通过函数创建包装器，可以使用新的类包装器创建它：

In case somebody would still need this. Inside the decorator instead of creating the wrapper via function, you can create it with a new class wrapper:

function testDecorator(target:any) {

    return class extends target {
        constructor (...args) {
            console.log(`New: ${target.name}`);
            super(...args);
        }
    }
}

这篇关于类构造函数上的JavaScript Decorator的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！