Why is `this` sometimes undefined inside an object literal?

Question

Browser Error

• TypeError: this is undefined

Related Code

// start of module

$A.module({
    Name: 'MUserNew',

...

    enter: (function (event) {
        var pipe = {};
        if (event.keyCode === 13) {
            pipe = $A.definePipe(this.Name); // **fail here**
            $A.machine(pipe);
        }
    }).bind(this),

...

        // inside module as well
        this.E.un_go.addEventListener("keypress", 
                                       this.enterB, 
                                       false);

Answer 1

You're doing the right thing by using .bind(), but unfortunately this does not have the behavior you expect. It does not take on the value of an "in progress" object inside an object literal. You have to make the object, set the handler, and then pass it to your "module" method.

You can still do it in one expression, like this:

$A.module(function() {
  var obj = {
    // ... 
    enterB: function(event) { ... },
    // ...
  };
  obj.enterB = obj.enterB.bind(obj);
  return obj;
}());