python decorator with javascript

Question

What I want to do is the following :

I have a function that alert something :

myfunction = function(foobar) { 
                 alert(foobar); 
             };

Now I want to decorate it so that :

decorate = function(callback) { 
              return function(foobar) { 
                  callback(foobar); 
                  console.log(foobar); 
           }; 
};

So then I can write :

myfunction = decorate(myfunction);

And then myfunction will do the normal + log in the console.

How can I make it works with Javascript ?

Answer 1

Yes, you can. And in fact, you have, your implementation works perfectly: Live example | source

var myfunction = function(foobar) { alert(foobar); };

var decorate = function(callback) { return function(foobar) { callback(foobar); console.log(foobar); }; };

var result = decorate(myfunction);

result("Hi there");

I would recommend using function declarations rather than function expressions , though:

function myfunction(foobar) {
    alert(foobar);
}

function decorate(callback) {
    return function(foobar) {
        callback(foobar);
        console.log(foobar);
    };
}

var result = decorate(myfunction);

result("Hi there");

And if you want to create a more generic version, look at using apply ( MDN | spec ) and the arguments pseudo-array ( MDN | spec ): Live example | source

function decorate(original, wrapper, context) {
    return function() {
        try {
            original.apply(this, arguments);
        }
        catch (e) {
        }
        try {
            wrapper.apply(context || this, arguments);
        }
        catch (e) {
        }
    };
}

function myFunction(arg1, arg2) {
    alert("arg1 = " + arg1 + ", arg2 = " + arg2);
}

var newFunction = decorate(myFunction, function(arg1, arg2) {
    console.log("arg1 = " + arg1 + ", arg2 = " + arg2);
});

newFunction(1, 2);

That version does a couple of things:

1. Lets you supply the callback as an argument to one central decorate function.

2. Lets you optionally supply a "context" ( this value) to use when calling the callback.

3. Preserves the value of this when calling both the original and (if you don't supply context ) the callback.

...which an be handy when decorating object functions (sometimes called methods).

Answer 2

More generic using arguments and apply :

function myfunction(foobar) { 
    alert(foobar); 
}

function decorate(callback) { 
    return function() { 
        callback.apply(null, arguments); 
        console.log(arguments); 
    }; 
}

var result = decorate(myfunction);

result("Hi there");