Victus Spiritus


How to bind class methods to global functions in CoffeeScript

27 Jun 2011

This morning's post is about a sticky piece of syntax I came across in CoffeeScript this weekend. I presume the problem arose due to several causes including my weekend laziness, the disconnect of errors from JavaScript to CoffeeScript, and partly because I wasn't compiling the CoffeeScript into JavaScript to iteratively inspect the code.

My goal was to pass a class method to setTimeout, and have it loop. Below I show each step and what was missing along with it's compiled JavaScript.

First cut:

The class GameOfLife contains an "update" method which takes in a single argument with a default parameter. The argument is compared with an internal member variable and if equal the time out id is cleared and play is paused.

If you're familiar with JavaScript you may notice that the update method passed to setTimeout is inaccessible. I wasn't reviewing the compiled JavaScript at the time, so it took me a little longer to see. Eventually I came to the same conclusion.

Second take:

This version of the passed method I enclosed in an anonymous function wrapper and tried slapping the function onto the window object to make it accessible everywhere. This turned out being a bad idea because the window object doesn't have all the other members and methods the update function relies on. But it did bring me closer to working code.

Third time's a charm:

Finally, after several interweb searches and rereading CoffeeScript docs it struck me. This is the perfect time for the FAT arrow. This time I passed in an anonymous function with the fat arrow


to bind the method always to the GameOfLife class it was called from, and removed the update function from the window object (whew). Eureka, it worked!

You can see the wiggling results at my html5 life page.