Question

我正在尝试为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）。

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

Answer 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。

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

1 个答案: