There's an issue with Microsoft's JScript interpreter (the one used by IE, Windows Scripting Host, and others) that you see mentioned deep in discussions of other things. I thought it would be worth just briefly talking about on its own.
Update: The newer version of JScript used by IE9 and up doesn't have this bug anymore. Yay! Still in IE8 and earlier, though.
Basically, if you use a named function expression in your JavaScript code, JScript will process it twice, creating two separate function objects, at two separate times: First it treats it as though it were a function declaration (even though it isn't), and then it treats it as the expression it is. This is not a distinction without a difference, either, as we'll see below. (Amongst other things, it creates "symbol bleed," putting the function's name in the enclosing scope in clear violation of Section 13 of the specification, which says that it should only be defined within the function's own scope).What do I mean by function declaration vs. function expression (named or otherwise)? Here's a function declaration:
function foo() {
}var foo = function() {
};var f1 = function foo() {
};bar(function foo(){});
var obj = {
nifty: function foo() {
}
};var f1 = function foo() {
alert(f1 === foo); // alerts "false" on IE, "true" on other browsers.
};
f1();Prototype example:
$('foo').observe('click', function fooClickHandler() {
if (/* ...some condition... */) {
this.stopObserving('click', fooClickHandler);
}
});$('#foo').click(function fooClickHandler() {
if (/* ...some condition... */) {
$(this).unbind('click', fooClickHandler);
}
});So how do you work around it? Just make sure you're using declarations, like this:
Prototype example:
function fooClickHandler() {
if (/* ...some condition... */) {
this.stopObserving('click', fooClickHandler);
}
}
$('foo').observe('click', fooClickHandler);function fooClickHandler() {
if (/* ...some condition... */) {
$(this).unbind('click', fooClickHandler);
}
}
$('#foo').click(fooClickHandler);Prototype example:
(function() {
function fooClickHandler() {
if (/* ...some condition... */) {
this.stopObserving('click', fooClickHandler);
}
}
$('foo').observe('click', fooClickHandler);
})();(function() {
function fooClickHandler() {
if (/* ...some condition... */) {
$(this).unbind('click', fooClickHandler);
}
}
$('#foo').click(fooClickHandler);
})();So what's this "symbol bleed" issue I mentioned? Well, according to the specification, the scope of the function name in a function expression is confined to the function itself, not the encompassing scope. So:
var f1 = function foo() {
// `foo` is defined here
};
// but not here(You can see this coming, can't you?) Since one of the times IE processes the named function expression it treats it as a declaration, it incorrectly defines the symbol in the enclosing scope — much like we would do if we didn't use the scoping functions above — which is incorrect.
Happy coding!
