javascript 装饰器中的目标缺少其属性答案

【问题标题】：target in javascript decorator is missing its propertiesjavascript 装饰器中的目标缺少其属性
【发布时间】：2017-07-14 16:06:55
【问题描述】：

我正在尝试为 Aurelia 项目构建一个简单的 pub-sub 装饰器，但遇到了障碍。

当我从订阅中进行回调时，装饰器中的目标没有属性，只有方法。我可能做错了什么，但我不知道是什么。

装饰器

class AuxPubSub {
constructor() {
    this.subs = [];
}

subscribe = func => {
    return (target, name, descriptor) => {
        console.log(`subscribing ${func}`);

        console.log("Subscribe target: ", target);

        this.subs[func] = this.subs[func] || [];
        this.subs[func].push({obj: target, fn: descriptor.value});

        return descriptor;
    };
}

publish = func => {
    return (target, name, descriptor) => {
        console.log(`publishing ${func}`);

        console.log("Publish target: ", target);

        const origFunction = descriptor.value;

        descriptor.value = () => {
            console.log("Calling back.");

            origFunction.apply(target, arguments);

            for (let sub of this.subs[func]) {
                sub.fn.apply(sub.obj);
            }
        };

        return descriptor;
    };
}
}

出版商

export class FirebaseWrapper {
    isLoggedIn;

    @publish("firebase.isLoggedIn")
    setLoggedIn(state) {
        console.log("Setting state");
        this.isLoggedIn = state;
    }
}

订阅者

export class App {
    showLogin;
    showRegistration;
    email;
    password;
    isLoggedIn;

    @subscribe("firebase.isLoggedIn")
    setLoggedIn() {
      console.log("Setting log in state.", this);
      this.isLoggedIn = this.firebase.getLoggedInState;
    }
}

发布装饰器的目标具有预期的一个属性 (isLoggedIn)。

订阅装饰器的目标没有属性但所有正确的方法

【问题讨论】：

为什么你的装饰器是类的一部分，而不仅仅是从模块中导出的函数？
@AshleyGrant - 这是因为他们共享状态。有更好的方法吗？我对此很陌生。
我会说这可能是完成此任务的错误方法。忽略这一点，您为什么不直接使用 Aurelia 事件聚合器呢？看起来你真的是在重新发明轮子。
一个字：没有经验。我现在用的是EA。花了几分钟才开始工作。感谢您的帮助@AshleyGrant

标签： javascript decorator aurelia

【解决方案1】：

这是因为target 是类原型，而不是实例（另请参阅this similar TypeScript question）。

这使得origFunction 被错误的上下文调用。应该是：

const {subs} = this;
descriptor.value = function () {
    console.log("Calling back.");

    origFunction.apply(this, arguments);

    for (let sub of subs[func]) {
        sub.fn.apply(sub.obj);
    }
};

另外，arguments 不允许在箭头函数中。

【讨论】：