Javascript object literal & "this" context?

Question

Possible Duplicate:
Javascript: Object Literal reference in own key’s function instead of ‘this’

I have this simple code :

var myObj = {
    init: function ()
    {
        this.Name = "Royi";
        this.BindMe();
    }
    BindMe: function ()
    {
        $('myButton').on("click", this.Work);
    },
    Work: function ()
    {
        var self = this; <--------
    }
}

Running :

myObj.init();

This is a simple Object literal. The problem is on the Work Method. I want to make it know this ( myObj)

there are 2 ways of doing it :

option #1

In BindMe , When clicking , transfer the context via :

$('myButton').on("click",{self:this}, this.Work);

and in Work do :

var self = e.data.self... //need also to add e

option #2

write var self = myObj ;

Question

Is there any other way of doing it ?
which is the better/correct way ?

@Bergi I already saw this question. it doesnt provide the answer. ( to my specific question). — Royi Namir, Dec 01 '12 at 20:41
@AndrewWhitaker No. I want to learn this behavior in literal object. — Royi Namir, Dec 01 '12 at 20:42

score 3 · Accepted Answer · answered Dec 01 '12 at 20:42

3

Don't add it as data to the event object. Instead, use .bind() or the jQuery-ish (crossbrowser) proxy to provide the correct thisArg to the function (see MDN's introduction to the this keyword):

$('myButton').on("click", $.proxy(this, "Work"));

answered Dec 01 '12 at 20:42

Bergi

572,313
128
898
1,281

What's the difference between `$.proxy` and `Function#bind`? – John Dvorak Dec 01 '12 at 20:44
It seems to me that `$.proxy(f,t)` is the same as `f.bind(t)`. Am I right? – John Dvorak Dec 01 '12 at 20:47
nice solution. ( p.s. this answer wasnt on the duplicated question FYI). But Again , regarding my second option , is it ok to do so? – Royi Namir Dec 01 '12 at 20:47
@JanDvorak http://jsfiddle.net/sERVx/12/ – Royi Namir Dec 01 '12 at 20:56
@RoyiNamir: Yeah, sure, but why bind it to a local variable `self` at all if you want to statically refer to `myObj`? Have a look at [the possible duplicate](http://stackoverflow.com/q/10711064/1048572) on whether it's a good solution. – Bergi Dec 01 '12 at 20:57
@RoyiNamir misunderstood what you meant by option #2, sorry – John Dvorak Dec 01 '12 at 20:58
@Bergi can you please go to http://chat.stackoverflow.com/rooms/20459/room-for-royi-namir-and-bergi ? – Royi Namir Dec 01 '12 at 21:01

score 2 · Answer 2 · answered Dec 01 '12 at 20:44

You could pass the context to the handler function as part of a closure:

$('myButton').on("click", (function(context) {
    return function() {
        context.Work
    };
})(this));

Needless to say, this is cross browser, since it relies on one of the core features of JS.

Javascript object literal & "this" context?

2 Answers2