JavaScript 装饰器 : How to store function with this scope?

Question

我想创建一个装饰器来为类创建的每个实例在数组中存储具有此范围的函数我找不到合适的词语来解释，所以这里假设我有以下代码:

class Foo
{
    constructor()
    {
        this.MyValue = "Foo";
    }

    @StoreFunction()
    TestA()
    {
        console.log("Foo MyValue:", this.MyValue);
    }
}
class Bar extends Foo
{
    constructor()
    {
        this.MyValue = "Bar";
    }

    @StoreFunction()
    TestB()
    {
        console.log("Bar MyValue:", this.MyValue);
    }
}

function StoreFunction()
{
    return function(target, key, descriptor)
    {
        // How would i go about saving the function there so i can call it later??
        return descriptor;
    }
}

我知道装饰器在类实例化期间不会被处理。所以我尝试在 StoreFunction 中执行以下操作。

var StoredFunctions = [];

function StoreFunction()
{
    return function(target, key, descriptor)
    {
        if(target._StoredFunctions)
        {
            target._StoredFunctions = [];
        }
        // Save the function's name
        target._StoredFunctions.push(key);

        return descriptor;
    }
}

然后在构造函数中绑定(bind)它们。

class Foo
{
    constructor()
    {
        this.MyValue = "Foo";
        this.BindFunctions()
    }

    BindFunctions()
    {
        if(this._StoredFunctions)
        {
            this._StoredFunctions.forEach( method => {
                StoredFunctions.push(this[method].bind(this));
            });
        }
    }
}

但是 this._StoredFunctions 并没有正确存储 StoredFunctions，因为它们是静态的。我不太确定如何使其正常工作。

如果问题不清楚，请告诉我，我很难解释这个问题。

Answer 1

您可以插入一个自动子类，它可以处理“公开”(或以其他方式处理)标记函数的必要工作，请参阅注释:

// `exposable` sets the class up for `exposed` on methods
function exposable() {
    return function decorator(target, name) {
        // Create our subclass with the same name
        const o = {[name]: class extends target {
            constructor(...args) {
                super(...args);
                // "Expose" the bound methods
                this.exposed = {};
                Object.getOwnPropertyNames(target.prototype).forEach(name => {
                    const method = target.prototype[name];
                    if (method.exposed) {
                        this.exposed[name] = method.bind(this);
                    }
                });
            }
        }};
        return o[name];
    };
}

// `expose` marks a method to be exposed in the constructor
function exposed(state) {
    return function decorator(target, name, config) {
        config.value.exposed = true;
        return config;
    };
}

// Example
@exposable()
class Foo {
    constructor(name) {
        this.name = name;
    }

    @exposed()
    testA() {
        console.log("testA says " + this.name);
    }

    testB() {
        console.log("testB says " + this.name);
    }
}

const f = new Foo("Fred");
f.exposed.testA(); // Says "testA says Fred" because it's bound

<小时/>

您说过我们可以依赖一个公共(public)基类 (Foo)。如果是这样，我们可以将逻辑移至 Foo 本身:

// `expose` marks a method to be exposed in the constructor
function exposed(state) {
    return function decorator(target, name, config) {
        config.value.exposed = true;
        return config;
    };
}

// Example
class Foo {
    constructor(name) {
        this.name = name;
        this.exposed = Object.create(null);
        let proto = Object.getPrototypeOf(this);
        while (proto && proto !== Object.prototype) {
            Object.getOwnPropertyNames(proto).forEach(name => {
                if (!this.exposed[name]) {
                    const method = this[name];
                    if (typeof method === "function" && method.exposed) {
                        // Expose it
                        this.exposed[name] = method.bind(this);
                    }
                }
            });
            proto = Object.getPrototypeOf(proto);
        }
    }

    @exposed()
    testA() {
        console.log("testA says " + this.name);
    }
}

class Bar extends Foo {

    @exposed()
    testB() {
        console.log("testB says " + this.name);
    }
}

const f = new Foo("Fred");
f.exposed.testA(); // Says "testA says Fred" because it's bound
const b = new Bar("Barney");
b.exposed.testA(); // Says "testA says Barney" because it's bound
b.exposed.testB(); // Says "testB says Barney" because it's bound