26

The behavior of "this" when function bar is called is baffling me. See the code below. Is there any way to arrange for "this" to be a plain old js object instance when bar is called from a click handler, instead of being the html element?

// a class with a method

function foo() {

    this.bar();  // when called here, "this" is the foo instance

    var barf = this.bar;
    barf();   // when called here, "this" is the global object

    // when called from a click, "this" is the html element
    $("#thing").after($("<div>click me</div>").click(barf));
}

foo.prototype.bar = function() {
    alert(this);
}
I. J. Kennedy
  • 24,725
  • 16
  • 62
  • 87
  • Please explain the `"this" is the foo instance`. The following jsfiddle(http://jsfiddle.net/yY6fp/1/) demonstrates that `this` in `this.bar()` evaluates to the `window`(global) object. – Kevin Meredith Jan 01 '14 at 22:48

7 Answers7

37

Welcome to the world of javascript! :D

You have wandered into the realm of javascript scope and closure.

For the short answer:

this.bar()

is executed under the scope of foo, (as this refers to foo)

var barf = this.bar;
barf();

is executed under the global scope.

this.bar basically means:

execute the function pointed by this.bar, under the scope of this (foo). When you copied this.bar to barf, and run barf. Javascript understood as, run the function pointed by barf, and since there is no this, it just runs in global scope.

To correct this, you can change 

barf();

to something like this:

barf.apply(this);

This tells Javascript to bind the scope of this to barf before executing it.

For jquery events, you will need to use an anonymous function, or extend the bind function in prototype to support scoping.

For more info:

codechurn
  • 3,870
  • 4
  • 45
  • 65
Aaron Qian
  • 4,477
  • 2
  • 24
  • 27
  • 2
    I'm not 100% certain on the terminology myself, but I think this answer (and the resources linked to) are confusing 'scope' with 'execution context'. The object pointed to by `this` is the *execution context*, and is entirely independent of *scope* (which closures have to do with). Scope is determined at a function's creation time, and determines what variables the function can see; execution context is determined whenever the function is called, and determines what `this` refers to. Replace 'scope' with 'execution context' everywhere here and only then will it be correct - I think! – Mark Amery Jun 12 '13 at 22:03
6

There's a good explanation on this keyword in JavaScript available at QuirksMode.

Pawel Krakowiak
  • 9,940
  • 3
  • 37
  • 55
3

You might find this:

Controlling the value of 'this' in a jQuery event

or this:

http://www.learningjquery.com/2007/08/what-is-this

Useful.

Community
  • 1
  • 1
Will Dean
  • 39,055
  • 11
  • 90
  • 118
2

You may use Function.apply on the function to set what this should refer to:

$("#thing").after($("<div>click me</div>").click(function() {
    barf.apply(document); // now this refers to the document
});
moff
  • 6,415
  • 31
  • 30
  • 1
    Beside the fact that there is a missing closed bracket at your code - the function *apply* instantly executes the function *barf* instead of returning a function pointer. – Martin Apr 02 '09 at 17:00
2

Get the book: JavaScript: the Good Parts.

Also, read as much as you can by Douglas Crockford http://www.crockford.com/javascript/

Chris Brandsma
  • 11,666
  • 5
  • 47
  • 58
1

This is because this is always the instance that the function is attached to. In the case of an EventHandler it is the class that triggered the event.

You can help your self with an anonymous function like this:

function foo() {
  var obj = this;
  $("#thing").after($("<div>click me</div>").click(function(){obj.bar();}));
}

foo.prototype.bar = function() {
  alert(this);
}
Martin
  • 10,738
  • 14
  • 59
  • 67
0
this.bar();  // when called here, "this" is the foo instance

this comment is wrong when foo is used as a normal function, not as a constructor. here:

foo();//this stands for window
Boki
  • 31
  • 1