Diagnosing Lost `this` Context in CoffeeScript: Fat Arrow vs Thin Arrow

The Problem

CoffeeScript offers two function arrows: the thin arrow -> and the fat arrow =>. The thin arrow behaves like a plain JavaScript function — its this value is determined by how the function is called. The fat arrow captures the this value from the surrounding lexical scope at definition time. When a callback is passed to a library, runtime, or event system, the caller often sets this to something unexpected (the global object, undefined in strict mode, or a DOM element). The symptom is usually a TypeError: Cannot read property '...' of undefined or logic that silently operates on the wrong object.

Takeaway: If a function needs to retain the this of its defining class or module, use the fat arrow =>. Reserve the thin arrow -> for functions that either don’t use this or are intentionally designed to receive a caller‑supplied context.

Recognizable Conditions

• Callback this is undefined or global: Passing a thin‑arrow method to setTimeout, Promise.then, or array methods like forEach.
• Event handler this is the DOM element: Using -> with addEventListener or jQuery’s on; the library deliberately sets this to the target element.
• super fails inside a callback: TypeError: Cannot read property 'call' of undefined because thin arrows lack the [[HomeObject]] internal slot required for super.
• Nested callback loses outer this: A thin arrow defined inside a method does not inherit the method’s this.

Diagnostic Table

Context	Thin arrow ->	Fat arrow =>
Class method definition	this = instance, super works	this = instance, super works
Callback passed to library	this = library‑chosen (often element)	this = lexical (class instance)
Nested callback inside method	this = lost/undefined	this = captured from outer method
setTimeout/Promise callback	this = global/undefined	this = captured lexical
Event handler (addEventListener)	this = target element	this = lexical (instance)

Ordered Checks

1. Locate the function definition — is it -> or =>?
2. Identify who calls it: your code, a library, or the runtime?
3. Determine the expected this: class instance, DOM element, or irrelevant?
4. If this must be the class instance and the caller overrides it, change -> to =>.
5. If super is used, the function must be => or a class method (not a thin arrow).

Fixes

Capture instance this in a callback

# Before: thin arrow loses `this`
class Widget
  constructor: ->
    @value = 42
  start: ->
    setTimeout ->
      console.log @value   # @ is undefined/window
    , 100

# After: fat arrow captures lexical `this`
class Widget
  constructor: ->
    @value = 42
  start: ->
    setTimeout =>
      console.log @value   # @ is the Widget instance
    , 100

Event handler needing both element and instance

# Fat arrow captures instance; `e.currentTarget` gives the element
el.addEventListener 'click', (e) => @handleClick(e, @)

Preserve super in asynchronous callbacks

# Thin arrow breaks `super`
class Child extends Parent
  save: ->
    Promise.resolve().then ->
      super()   # TypeError: Cannot read property 'call' of undefined

# Fat arrow (or class method) preserves `super`
class Child extends Parent
  save: ->
    Promise.resolve().then =>
      super()   # works

Escalation Criteria

• Memory pressure from long‑lived closures: Fat arrows retain the lexical scope. If a callback lives longer than the instance (e.g., stored in a global cache), consider Function.prototype.bind or a weak‑reference pattern to avoid leaks.
• Duplicate var _this = this in compiled output: Nested fat arrows each create their own closure. Inspect the generated JavaScript (coffee -c -m file.coffee) and flatten nesting if the duplication is excessive.
• TypeScript interop mismatches: Ensure @types/coffeescript matches the targeted ECMAScript version (ES2015+ classes vs. ES5 prototypes) so that super and arrow semantics align.

Version Differences and Verification

• CoffeeScript 1.x: => compiles to Function.prototype.bind(this) polyfill. arguments is available; new.target is not.
• CoffeeScript 2.x: => compiles to native ES6 arrow functions. arguments is not available; new.target is undefined (arrows cannot be constructors).
• Class body fat arrows (CS2+): Become instance methods via Object.defineProperty, not prototype methods. This affects Object.getOwnPropertyNames and serialization.

Practical verification steps

1. Create a minimal class with a thin‑arrow callback passed to setTimeout; observe this is undefined (strict) or window. Change to fat arrow; observe this is the instance.
2. Add an event listener with el.addEventListener 'click', -> console.log(@); click shows the element. Change to =>; click shows the class instance.
3. Define a subclass method with super inside a thin arrow passed to Promise.then; call it and catch TypeError. Move super to a fat arrow or class method; error disappears.
4. Compile with coffee -c -m file.coffee and inspect the generated JS: thin arrows become plain functions; fat arrows become function() {}.bind(this) (CS1) or () => {} (CS2).
5. Run the test suite in both CoffeeScript 1.12.x and 2.7.x (or latest 2.x) to confirm version‑specific output differences for => and super.

Limitations

• Fat arrows cannot be used as constructors (new Fn() throws). Do not use => for factory functions intended to be called with new.
• Destructuring this in a fat arrow parameter list (=>{@prop} ->) does not work. Use => and access @prop inside the body.
• Implicit return of the last expression in a fat‑arrow callback can leak values into promise chains or Array.map. Add explicit return or undefined when the return value is not intended.

Quick Reference

Scenario	Arrow	Reason
Class method that uses @ or super	=> (or plain method syntax)	Lexical this + [[HomeObject]]
Callback to library that sets its own this	=>	Capture defining scope
Event handler needing both element and instance	=> + e.currentTarget	Instance via closure, element via event
Utility function with no this dependency	->	No closure overhead
Function intended as a constructor	-> (or class)	Arrows cannot be constructed