使用命名函数进行回调

Question

I have a major problem with profiling in javascript with anonymous functions, I have always many anonymous functions - most of them are callbacks - and It makes analyzing results of profiler very hard for me.

Finally I decided to use named functions for callbacks, like this:

var f = function(callback) {
    // Do something ...
    callback();
}

f(function named_function() {
    console.log('Sample callback function!');
});

I want to know that will I have any problems after making this change in my codes? And will this type of function definition and passing reserve the name (named_function) anywhere?

Answer 1

The name will only be available inside the scope of the named function expression.

But there is a problem in IE 8 and lower. It will leak out to the outer scope, and will actually create a different function object, so you should nullify it if that's a problem.

f(function named_function() {
    console.log('Sample callback function!');
});
var named_function = null;

See this article for more information: Named function expressions demystified

Or you could create it like this to solve the IE issue.

f(function() {
    return function named_function() {
        console.log('Sample callback function!');
    };
}());

But that's a little ugly.

Answer 2

If you pass anonymous functions like that, the name will exist inside the function itself.

It will not exist in any other scope.

var f = function(callback) {
    // Do something ...
    callback();
}

f(function named_function() {
    console.log(named_function); // Logs the function
    console.log('Sample callback function!');
});

console.log(named_function);​ // Error: named_function is undefined

Answer 3

You don't have to complicate things.

Just name the function when you declare it

var foo = function foo(){};

Answer 4

Defining a named callback in a scope will cause it to be visible only in that scope. I would therefore conclude that there shouldn't be any naming conflicts. For example, the following code runs as expected:

(function named_callback() { console.log("Callback 1"); })();
(function named_callback() { console.log("Callback 2"); })();​

Answer 5

Actually, you're still creating an anonymous function expression and assigning it to a local scoped variable f . Go for

function f( callback ) {
    callback();
}

f( named_function );

function named_function() {
    console.log('Sample callback function!');
}

That way, you're even avoiding the named function expression memory leak in <= IE8, plus since you're no longer creating a function expression but a *function declaration, you can even access f within the body.