6

I am a little bit confused as to what happen when I call the following code:

goog.net.XhrIo.send("/welcome", goog.bind(this.handleWelcome, this));

I have a function with this signature:

myproject.MyClass.prototype.handleWelcome = function(response)

Before I was binding, the context of handleWelcome did not have access to instance fields of my Javascript class myproject.MyClass (understandably). Following the information here, I now have the context of the class instance. All well and good.

What was the context of "this" before I made the change?

Please excuse any non-Javascript idioms I'm using -- I'm much more familiar with Java and am probably using a hodgepodge of terms.

EDIT

Initially I had some questions about what argument was being passed to the callback (in this case an event with a target of of type goog.net.Xhrio) but the main question is about about this and bind, so I removed the tangential q's.

Community
  • 1
  • 1
Ben Flynn
  • 18,524
  • 20
  • 97
  • 142

3 Answers3

9

goog.bind is equivalent to function.prototype.bind, but that the first parameter is the function to be bound to, the second the "this" value that should be bound and any remaining parameters are bound to the functions formal parameters.

JavaScript has first class functions, but they aren't inheritly bound with a "this" value, so unless you bind it, the value depends on how it is called:

var x = { f : handler };
x.f(); // handler is called with "x" as the this value.
handler(); // unspecified this

Traditionally, if "this" value is unspecified, undefined, or null then it is coerced into the global this, "window" usually. However, if you are running in EcmaScript 5 strict mode, the value remains unchanged (unspecified is "undefined").

John
  • 5,443
  • 15
  • 21
1

It depends on what the google code does, since it could concievably bind this to something when it invokes your callback, but it was probably undefined.

That is, inside the google library somewhere, it's got an event handler that does something like:

  goog.whatever.randomHandler = function( foo ) {
    // ...
    if (config.benFlynnHandler) {
      config.benFlynnHandler.call( something_mysterious, someArgument );
    }
    // ...

well "something_mysterious" could be null, it could be some semi-interesting object, or who knows.

Pointy
  • 405,095
  • 59
  • 585
  • 614
  • Ahh interesting. So somewhere it's using 'call' to call my welcomeHandler with some argument? I think it ends up being an XmlHttpResponse or something like that. – Ben Flynn Dec 16 '11 at 00:15
  • I don't actually know what it's doing; it may be doing a ".call()" or it may be doing something else. The point is that if you don't know what the framework does, then you just don't know. – Pointy Dec 16 '11 at 04:17
1
goog.net.XhrIo.send("/welcome", goog.bind(this.handleWelcome, this));

the first this in this.handleWelcome is reference to the parent class (function). the second this is a reference to the current function;

That is the vaguest way I can explain it and maybe is not 100% technically correct, but should be close. They could be holding anything or nothing.

The simplest way to see what is going on is to pass both to the console and see what the contain, using maybe firebug.

Hope this helps.

Tim Wickstrom
  • 5,476
  • 3
  • 25
  • 33
  • That makes sense, but maybe I should make my question clearer. What if I did: goog.net.XhrIo.send("/welcome", this.handleWelcome); What would the context of "this" be during the executing of handleWelcome? I've been poking around a bit with debuggers trying to get a better feel for it. – Ben Flynn Dec 16 '11 at 00:13
  • The second this should be a reference to the object in which bind is being called, not a function, yeah? – Ben Flynn Dec 16 '11 at 03:14