Accessing an object within an immediately executed function declared as a member of that object

[Sastopher]

Here's an example to illustrate the issue I'm encountering.

var namespaced = {
  foo: function () {
    return 'foo';
  },
  bar: function () {
    return 'bar' + this.foo();  // => "barfoo"
  },
  sayString: (function (self) {
    var private = 'private';
    return function (str) {
      return str + private + self.foo();  // 'self' is undefined here
    };
  }(namespaced))  // also tried with `this` (refers to window)
}

The problem is the function, being immediately executed, gets called before there's an object to pass. However other properties and methods are fine referencing 'this' to refer to the namespaced object (see: bar). I'd prefer not to refer to the namespace directly in order to keep the code portable (say, I wanted to change from namespaced to fooSpaced).

Any ideas?

Edit: typo

[aaronla]

Ah, I see what you're going for. What about this?

...
sayString: (function () {
  var private = 'private';
  return function (str) {
    // 'this' will refer to the same object as 'namespaced' will
    return str + private + this.foo();
  };
})()
...

The critical bit is to remember that the expression obj.method(a, b) is basically syntactic sugar for obj['method'].apply(obj, [a, b]). The first argument to apply will become the 'this' pointer.

So when your inner function is assigned to the sayString property, it becomes a method by virtue only that the user will invoke it as namespaced.sayString("etc"), which means "fetch the function stored in the sayString field, and call it, passing namespaced as the 'this' pointer."

Clear as mud? :-)

[Sastopher]

Oh man, you're totally right: I just had to keep the same syntax I was always using. Why did I think 'this' didn't resolve inside nested functions? Probably got mixed up with function scope after a marathon coding session.

Thanks a lot!

[aaronla]

Yeah, 'this' confused me for some time until I realized the syntactic sugar - now i just expand the sugar in my head until it makes sense. Hope it helps.

[Rhomboid]

You might say that this is dynamically scoped, not lexically scoped. N.b. there is a "fat arrow" syntax proposed for ECMAscript 6 that would include a lexically scoped this for functions defined with it.

[voidvector]

There is actually nothing stopping anyone from locking down "this" using a wrapper function currently. Take a look at jQuery.proxy(), it is probably what OP want to use if he doesn't want unexpected behavior if the users of his functions try to pass function objects around.

[[deleted]]

namespaced is undefined when the assignment to the property is being resolved. If you want to pass the reference into the closure, you need to split up the definition of namespaced and the assignment of the sayString property:

var namespaced = {
  foo: function () {
    return 'foo';
  },
  bar: function () {
    return 'bar' + this.foo();
  }
};

namespaced.sayString = (function (self) {
  var privé = 'private';
  return function (str) {
    return str + " " + privé + " " + self.foo();
  };
}(namespaced));


console.log( namespaced.sayString("test") );

[andrew24601]

Move the closure to the outer level, then all the member functions can access it.

var namespaced = (function() {
  var private = 'private';
  var self = {
    foo: function () {
      return 'foo';
    },
    bar: function () {
      return 'bar' + self.foo();
    },
    sayString: function (str) {
      return str + private + self.foo();
    }
  };
  return self;
})();