What is the `target` in javascript decorators

Question

I'm playing with javascript decorators but I'm having a hard time with the target which is passed to the decorator function

For example, if you have

@Bar()
class Foo {
    @deprecated(true)
    doMagic() {}
}

function Bar() {
    return function decorator(target) {

    }
}

function deprecated(state) {
    return function decorator(target, name, config) {
         return config;
    }
}

I would expect that both targets are one and the same thing, right, well it isn't. For example

function Bar() {
    return function decorator(target) {
        let bar = new target(); // WORKS
        bar instanceof target; // -> true
    }
}

function deprecated(state) {
    return function decorator(target, name, config) {
         let bar = new target(); // ERROR
         let bar = new target.constructor() // WORKS

         bar instanceof target; // ‌TypeError: Right-hand side of 'instanceof' is not callable
         bar instanceof target.constructor // WORKS
         return config;
    }
}

As you can see there is a difference between both targets, and my question is what is wrong with that second target

I use node v7.8.0 and I'm using the follow babel plugins (.babelrc)

{
    "presets": [
        "es2015",
       "stage-0"
   ]

}

Answer 1

It sounds like you're using the old legacy decorators. Beware that the decorators proposal has moved on since then and the API is still evolving. The proposal is (as I write this) at Stage 2, e.g. "draft" (see this document for details).

The target in your @deprecated decorator using the old legacy plugin is the object that will ultimately be saved as Foo.prototype. Whereas in @Bar, it's the Foo class constructor itself. That's why in your @deprecated decorator, you can't use new target (target is a non-callable object), but you can use new target.constructor (which is Object).

But again: This stuff is still in flux.