JavaScript UXO Removal Updated
JavaScript is a lovable language. Real closures, first class functions, incredibly dynamic behavior...it's a joy when you know it well.
Less experienced JS programmers often feel as though they're waltzing in a minefield, though. At many steps along the path to JS enlightenment everything feels like it's breaking down around you. The lack of block lexical scope sends you on pointless errands, the various OO patterns give you fits as you try to do anything but what's in the examples, and before you know it even the trusty "dot" operator starts looking suspect. What do you mean that this doesn't point to the object I got the function from?
Repairs for some of the others are on the way in ES6 so I want to focus on the badly botched situation regarding "promiscuous this", in particular how ES5 has done us few favors and why we're slated to continue the cavalcade of failure should parts of the language sprout auto-binding.
Here's the problem in 5 lines:
var obj = {
_counter: 0,
inc: function() { return this._counter++; },
};
node.addEventListener("click", obj.inc);
See the issue? obj.inc results in a reference to the inc method without any handle or reference to its original context (obj). This is asymmetric with the behavior we see when we directly call methods since in that case the dot operator populates the ThisBinding scope. We can see it clearly when we assign to intermediate variables:
var _counter = 0; // global "_counter", we'll see why later
var inc = obj.inc;
obj.inc(); // 1
obj.inc(); // 2
inc(); // 1
Reams have been written on the topic, and ES5's belated and weak answer is to directly transcribe what JS libraries have been doing by providing a bind() method that returns a new function object that carries the correct ThisBinding. Notably, you can't un-bind a bound function object, nor can you treat a bound function as equal to its unbound ancestor. This, then, is just an API formalism around the pattern of using closures to carry the ThisBinding object around:
var bind = function(obj, name) {
return function() {
return obj[name].apply(obj, arguments);
};
};
// Event handling now looks like:
// node.addEventListener("click", bind(obj, "inc"));
var inc = bind(obj, "inc");
obj.inc(); // 1
obj.inc(); // 2
inc(); // 3
inc === obj.inc; // false
ES5's syntax is little better but it is built-in and can potentially perform much better:
var inc = obj.inc.bind(obj);
// In a handler:
node.addEventListener("click", obj.inc.bind(obj));
Syntax aside, we didn't actually solve the big problems since unbound functions can still exist, meaning we still have to explain to developers that they need to think of the dot operator doing different things based on what charachters happen to come after the thing on the right-hand side of the dot. Worse, when you get a function it can either be strongly-bound (i.e., it breaks the .call(otherThis, ...) convention) or unbound -- potentially executing in the "wrong" ThisBinding. And there's no way to tell which is which.
So what would be better?
It occurs to me that what we need isn't automatic binding for some methods, syntax for easier binding, or even automatic binding for all methods. No, what we really want is weak binding; the ability to retrieve a function object through the dot operator and have it do the right thing until you say otherwise.
We can think of weak binding as adding an annotation about the source object to a reference. Each de-reference via [[Get]] creates a new weak binding which is then used when a function is called. This has the side effect of describing current [[Get]] behavior when calling methods (since the de-reference would carry the binding and execution can be described separately). As a bonus, this gives us the re-bindability that JS seems to imply should be possible thanks to the .call(otherThis) contract:
var o = {
log: function(){
console.log(this.msg);
},
msg: "hello, world!",
};
var o2 = {
msg: "howdy, pardner!",
};
o.log(); // "hello, world!"
o2.log = o.log;
// calling log through o2 replaces weak binding
o2.log(); // "howdy, pardner!"
But won't this break the entire interwebs!?!?
Maybe not. Hear me out.
We've already seen our pathological case in earlier examples. Here's the node listener use-case again, this time showing us exactly what context is being used for unbound methods:
document.body.addEventListener("click", function(evt) {
console.log(this == document.body); // true in Chrome and FF today
}, true);
We can think of dispatch of the event calling the anonymous function with explicit ThisBinding, using something like listener.call(document.body, evt); as the call signature for each registered handler in the capture phase. Now, it's pretty clear that this is whack. DOM dispatch changing the ThisBinding of passed listeners is an incredibly strange side-effect and means that even if we add weak binding, this context doesn't change. At this point though we can clearly talk about the DOM API bug in the context of sane, consistent language behavior. The fact that event listeners won't preserve weak binding and will continue to require something like this is an issue that can be wrestled down in one working group:
node.addEventListener("click",
(function(evt) { ... }).bind(otherThis),
true);
The only case I can think of when weak bindings will change program semantics is when unbound method calls in the global object do work on this in a way that is intentional. We have this contrived example from before too, but as you can see, it sure looks like a bug, no?
var _counter = 0; // a.k.a.: "this._counter", a.k.a.: "window._counter"
var obj = {
_counter: 0,
inc: function() { return this._counter++; },
};
var inc = obj.inc;
obj.inc(); // 1
obj.inc(); // 2
console.log(obj._counter, this._counter); // 2, 0
inc(); // 1
inc(); // 2
console.log(obj._counter, this._counter); // 2, 2
If this turns out to be a problem in real code, we can just hide weak bindings behind some use directive.
Weak binding now gives us a middle ground: functions that are passed to non-pathological callback systems "do the right thing", most functions that would otherwise need to have been bound explicitly can Just Work (and can be rebound to boot), and the wonky [[Get]] vs. [[Call]] behavior of the dot operator is resolved in a tidy way. One less bit of unexploded ordinance removed.
So the question now is: why won't this work? TC39 members, what's to keep us from doing this in ES6?
Update: Mark Miller flags what looks to be a critical flaw:
var obj = {
callbacks: [],
register: function(func) {
for (var i = 0, i < this.callbacks.length; i++) {
this.callbacks[i]();
}
},
};
obj.register(foo.bar); // Does the wrong thing!
The problem here is our call into each of the callback functions which still execute in the scope of the wrong object. This means that legacy code still does what it always did, but that's just as broken as it was. We'd still need new syntax to make things safe. Ugg.