Wednesday, June 5, 2024
 Popular · Latest · Hot · Upcoming
166
rated 0 times [  173] [ 7]  / answers: 1 / hits: 20152  / 16 Years ago, thu, april 2, 2009, 12:00:00

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);
}

More From » jquery

 Answers
77

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:




[#99759] Friday, March 27, 2009, 16 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
cindyanyssam

Total Points: 483
Total Questions: 94
Total Answers: 100

Location: Barbados
Member since Sat, May 28, 2022
2 Years ago
;