4

I understand that "this" is a reference for the caller object.

I'm used to see "this" in code like:

var Person = function() {
   this.name = "foo";
}

But then I saw these lines of code:

Example 1:

function helloWorld1() {
   this({ body: "Hello world!" })();
}

Example 2:

I also seen this code:

function helloWorld2() {
  this
    ({ body: "Hello, " })
    ({ body: "world!" })
    ();
}
  • What does "this" means here?
  • What is happening in the above examples?
1
  • 1
    I guess you mean this.name instead of self.name in the first example? Commented Sep 26, 2010 at 2:21

1 Answer 1

8

Actually this can refer to different thing, implicitly, it is set depending how you invoke a function, for exmaple:

obj.func();

The this value inside func will refer to obj.

new Func();

The this value will refer to a newly created object that inherits from Func.prototype.

func();

The this value will refer to the Global object.

And the value can be set explicitly also, using the call or apply methods, for example:

function foo () {
  alert(this);
}

foo.call("hello world");

The helloWorld1 example you post, would work only if the this value refers to a function, that returns another function, because if you analyze the line:

this({ body: "Hello world!" })();

You can note that this needs to be a function, because you are invoking it, passing the object to it. And we know the return value needs also to be a function, because the last parentheses, are another function invocation.

For example:

var fn = function(o){
  return function () {
    alert(o.body);
   }
};
helloWorld1.call(fn);  // or the equivalent

fn.method = helloWorld1;
fn.method();

Edit: To make the helloWorld2 example you post work, the this value needs to be a function with a pattern that allows us to chain multiple function calls, returning the same function each time, until the function is called without arguments, e.g.:

var fn = (function(){
  var msg = '';
  return function inner (o) {
    if (o) { // called with an argument?
      msg += o.body;
    } else { // no, show the message
      alert(msg);
    }
    return inner; // return a reference to itself
  };
})();

function helloWorld2() {
  this
  ({ body: "Hello, " })
  ({ body: "my " })
  ({ body: "world!" })
  ();
}
helloWorld2.call(fn); // "Hello my world!"
Sign up to request clarification or add additional context in comments.

4 Comments

@ajsie: Could you provide an example about how the function is invoked?, as you can see, the this value can refer almost to anything if we set the value explicitly.
Actually I have no idea. I'm trying to learn a js framework with these constructions: flickr.com/photos/tr4nslator/sets/72157623883700702/show. Have a look at the slide. It's very interesting =)
Wow, you are awesome! This helped me to understand a lot! Is there a good javascript book that you recommend that explains these kind of things? Cause the javascripts book I've read are just explaining simple things with DOM manipulations and some fancy effects.
@ajsie: Thanks!, I'm glad my answer helped you, I can recommend you a couple of places where you can find something about this kind of functional patterns: Learning Advanced JavaScript, Eloquent JavaScript, about books the one I always recommend, JavaScript: The Definitive Guide, also I've posted some time ago a list of general good resources.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.