What do these "this" mean in this JavaScript code?

Question

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>test</title>

    </head>
    <body>
        <script type="text/javascript" charset="utf-8">
            (function(){
                // this
                var test=function(){
                    //this
                    return function(){
                        //this
                    };
                }

                (function(){
                    //this
                    var a={
                        p1:function(){
                            //this
                        }
                    };
                })();
            })();
        </script>       
    </body>
</html>

Please note, Javascript contained may be less simple than advertised. Terms and conditions apply. Offer not valid in Canada. — Greg, Jul 13 '09 at 10:27
Just copy'n pasting some code doesn't make up a good question. -1 — Boldewyn, Jul 13 '09 at 10:40

score 14 · Accepted Answer · answered Jul 13 '09 at 11:27

David Dorward already mentioned about JavaScript: The Good Parts by Douglas Crockford.

From Section 4.3 of that excellent book:

Invoking a function suspends the execution of the current function, passing control and parameters to the new function. In addition to the declared parameters, every function receives two additional parameters: this and arguments. The this parameter is very important in object oriented programming, and its value is determined by the invocation pattern. There are four patterns of invocation in JavaScript: the method invocation pattern, the function invocation pattern, the constructor invocation pattern, and the apply invocation pattern. The patterns differ in how the bonus parameter this is initialized.

Crockford continues to explains the binding of 'this' in each of these patterns, as follows:

The Method Invocation Pattern: When a function is stored as a property of an object, we call it a method. When a method is invoked, this is bound to that object.

The Function Invocation Pattern: When a function is invoked with this pattern, this is bound to the global object. This was a mistake in the design of the language.

The Constructor Invocation Pattern: If a function is invoked with the new prefix, then a new object will be created with a hidden link to the value of the function's prototype member, and this will be bound to that new object.

The Apply Invocation Pattern: The apply method lets us construct an array of arguments to use to invoke a function. It also lets us choose the value of this. The apply method takes two parameters. The first is the value that should be bound to this. The second is an array of parameters.

nothing about the "call" invocation pattern (`fn.call(context,arg1,arg2,...argn)`)? — gion_13, Aug 13 '12 at 12:18
@gion_13, in terms of `this` it's equivalent to the "Apply Invocation Pattern", [see a related answer](http://stackoverflow.com/a/1986909/562906) — sinelaw, Jan 11 '13 at 18:38

score 4 · Answer 2 · answered Jul 13 '09 at 10:34

The meaning of this depends on how the function containing it was called, not how it was constructed.

There is an excellent explanation of how it works in JavaScript: The Good Parts.

The short version is that, when you call a function (m) as the method of an object (o), then this is o.

var o = {
   m: function () {
      return this;
   }
}

var foo = {
    bar: o.m;
}

o === o.m();
foo === foo.bar();

score 1 · Answer 3 · answered Jul 13 '09 at 10:31

other than this being a comment

In a scope chain sense it will move from the this in the bottom function all the way back to the global this.

e.g the this in

p1:function(){
       //this
   }

then the this above it

(function(){
  //this
  var a={
   p1:function()

Then the this above it

 (function(){
    // this
    var test=function(){

There is a good presentation by Nicholas Zakas at Yahoo on it at http://www.youtube.com/watch?v=mHtdZgou0qU

score 0 · Answer 4 · answered Aug 19 '11 at 18:50

It is best to look at javascript closures, to understand scopes and the this pointer assignment. "this" came about even before Object oriented programming, but is definitely essential for it.

http://jibbering.com/faq/notes/closures/

This depends heavily on the role of scope chains in identifier resolution and so on the resolution of property names on objects.

The simple explanation of a Closure is that ECMAScript allows inner functions; function definitions and function expressions that are inside the function bodes of other functions.

The properties created on the Variable object that correspond with declared local variables are initially assigned undefined values during variable instantiation, the actual initialisation of local variables does not happen until the evaluation of the corresponding assignment expressions during the execution of the function body code.

It is the fact that the Activation object, with its arguments property, and the Variable object, with named properties corresponding with function local variables, are the same object, that allows the identifier arguments to be treated as if it was a function local variable.

Finally a value is assigned for use with the this keyword. If the value assigned refers to an object then property accessors prefixed with the this keyword reference properties of that object. If the value assigned (internally) is null then the this keyword will refer to the global object.

The global execution context gets some slightly different handling as it does not have arguments so it does not need a defined Activation object to refer to them. The global execution context does need a scope and its scope chain consists of exactly one object, the global object. The global execution context does go through variable instantiation, its inner functions are the normal top level function declarations that make up the bulk of javascript code. The global object is used as the Variable object, which is why globally declared functions become properties of the global object. As do globally declared variables.

The global execution context also uses a reference to the global object for the this object. COurtesy of http://jibbering.com/faq/notes/closures/ chapter: Identifier Resolution, Execution Contexts and scope chains

What do these "this" mean in this JavaScript code?

4 Answers4

Linked