1
var foo = {
    data: "a",
    print: function() {console.log(this.data)}
}

element.addEventListener("click", function(){foo.print()});

In this case context is foo object

element.addEventListener("click", foo.print);

When in this one it's element

Why is it so?

gskalinskii
  • 967
  • 2
  • 11
  • 17
  • 6
    There are hundreds of articles here and on the net regarding `this` and `scope`. They would be a good start. – Andy Feb 23 '14 at 13:37

2 Answers2

1

The value of this is determined by the way a function is called. In the first case, the "print" function is called via a property reference from the object "foo". Therefore, the value of this is a reference to that object.

In the second case, you've passed the reference to the "print" function to the system when setting up the event handler. Event handlers are invoked with this set to refer to the element involved in the event.

In your first example, the value of this in the anonymous function will also be a reference to the clicked element. You could transmit that to the "print" function if you wanted to:

element.addEventListener("click", function(){ foo.print.call(this); });
Pointy
  • 405,095
  • 59
  • 585
  • 614
1

When you say

foo.print

you will be getting a reference to the function, but the function is actually attached to foo object which is lost by passing the foo.print. So, print becomes an unbound function. You can confirm this like this.

var a = foo.print;
a();                  // `this` will be referring to global now

To avoid this, you should bind the function with the object, like this

element.addEventListener("click", foo.print.bind(foo));

Now we are making sure that the function is bound to the foo object. You can check this, like this

var a = foo.print.bind(foo);
a();                  // a
thefourtheye
  • 233,700
  • 52
  • 457
  • 497