and to add another clarification as to why bind is needed here:
foo = {
func : function(){console.log(this)}
}
foo.func(); //foo
setTimeout(foo.func,10); //window
why? because once we pass a reference of a function to another function,
that reference will always be independent of any object it might of resided
in. This is the same with addEvent. So when we want to make sure a function
still reference a parent object when we pass it, we use bind:
setTimeout(foo.func.bind(foo),10);//foo
The best place for you to read about 'this' is here:
http://dmitrysoshnikov.com/ecmascript/chapter-3-this/
it's quite long, but very thorough. I can't think of any better place that
you can learn about js mechanics than this blog (while you're at it - that
entire series is a must - look at the menu for more articles)
On Wed, Feb 23, 2011 at 8:15 PM, Aaron Newton <[email protected]> wrote:
> One last bit here on terminology. "this" has nothing to do with scope. This
> is scope:
>
> var foo = function(){
> var bar = 0;
> };
> //bar is not available here because it is not in scope
>
> "this" is actually pretty easily defined: "this" is the object to which the
> current function belongs. Its how objects with methods can refer to
> themselves (how else could they?). When a function is defined on its own,
> its owner is the window:
>
> (function(){ console.log(this) })();
> //logs the window
>
> Even if that function is inside another function or method this is the
> case:
>
> var foo = {
> bar: function(){
> console.log(this); //logs foo
> (function(){ console.log(this) })(); //logs window
> }
> };
>
> We bind things so that we can use functions as arguments within an instance
> and still reference that instance:
>
> var foo = {
> bar: function(){
> (function(){ console.log(this) }).apply(this); //logs foo
> }
> };
>
> On Wed, Feb 23, 2011 at 9:04 AM, Sean McArthur <[email protected]>wrote:
>
>> It looks you were trying to pass scope to addEvent using a third argument,
>> but it does not work that way. As Piotr showed, you need to bind the
>> function.
>>
>>
>>
>> On Wed, Feb 23, 2011 at 8:41 AM, Piotr Zalewa <[email protected]> wrote:
>>
>>> http://jsfiddle.net/zalun/GwxvG/2/
>>>
>>> bind changes the scope, so this refers to the object and not to clicked
>>> element.
>>> If you're confused about what is "this" in a function simply
>>> console.log(this) as a first thing in this function will give you a hint.
>>>
>>> zalun
>>>
>>> On 02/23/11 16:29, roark wrote:
>>> > Hi Everyone.
>>> >
>>> > I've had a good read through the article Aaron wrote at
>>> http://jqueryvsmootools.com
>>> > and I'm really battling to understand scope or when to use "this" in
>>> > my classes etc.
>>> >
>>> > I'm writing a class that will display a help context when you focus on
>>> > a filed in a form.
>>> > http://jsfiddle.net/roark/GwxvG/1/
>>> >
>>> > When I click on a filed, i get "this.function_name" is not defined.
>>> > Trying to search google for the term 'mootools "this" ' is not very
>>> > successful as you can image so i was hoping soemone could have a look
>>> > and let me know where I'm going wrong?
>>> >
>>> > Thanks
>>> > Roark
>>>
>>>
>>> --
>>> blog http://piotr.zalewa.info
>>> jobs http://webdev.zalewa.info
>>> twit http://twitter.com/zalun
>>> face http://facebook.com/zaloon
>>>
>>
>>
>
--
Arieh Glazer
אריה גלזר
052-5348-561
http://www.arieh.co.il
http://www.link-wd.co.il
