I've recently been wrestling with a JavaScript problem. I added a member variable to my JS object and then tried to access it from one of the objects methods. It seemed like a simple thing, since functions within JS objects are closures, you have access to the containing object's members and functions. For the simple case, that's true, but I had found a place where that wasn't true.
I use Prototype and script.aculo.us, since they make my life easier. Inside the aforementioned function I was calling
foo:function(){
$$(".someClass").each(function(el,ndx){memberArr[ndx] = foo});
}and it was silently dying after that call, since it didn't know about memberArr. I tried calling it this.memberArr, but that didn't help. When I stepped into the function in Firebug, this was pointing to Window.
After stepping through it a number of times I realized that this was set properly when I entered the function, before $$() was called. So diving into the $$() rabbit-hole reset this to it's default, how annoying.
I knew I'd seen a solution to this type of problem before, and I looked at trying to call invoke(), but that wasn't an option because of the way I wanted the function to run.
I thought about trying to get apply() to work, since you can pass in an object as the first argument, and that obj will be the this within the function. That also made my code little wonky.
Then I remembered .bind() which keeps "this" pointing to the owner object. I had tried it before, but a typo made me think that it wasn't doing what I expected it to. Once that was sorted out, I re-wrote it as this:
foo: function(){
$$(".someClass").each(function(el,ndx){this.memberArr[ndx] = foo}.bind(this));
}And magically this pointed to the "owner" of the function.
