如何正确传递这个范围

Question

I'm having trouble with the scope of this in the following:

var test = {

    $divs: $('div'),

    init: function() {
        this.$divs.each(function(){
            $(this).on('click', test.whatsmyid);
            $(window).on("resize", test.whatsmyid);
        });
    },

    whatsmyid: function() {
        console.log($(this).attr("id"));
    }

};

test.init();

http://jsfiddle.net/4NZgd/1/

The click event handles the scope of this correctly but the window resize doesn't. I understand the reason is that this isn't being passed to the window resize event but I don't want to pass the element to whatsmyid using a variable so how do I get around this?

Answer 1

That is because this when called by resize is the window. Windows object doesnt have id 's. That's why it return undefined .

if you want to change the this inside the function, you can use .bind :

$(window).on("resize", test.whatsmyid.bind(this));

Fiddle : http://jsfiddle.net/4NZgd/2/

Answer 2

I know an answer has already been accepted for this however not every browser supports .bind meaning anything below IE 9.

so here's an alternative answer

http://jsfiddle.net/4NZgd/9/

var test = {

$divs: $('div'),

init: function() {
    this.$divs.each(function(){
        var $this = $(this);
        $(this).on('click', test.whatsmyid);
        $(window).on("resize", function () {
            test.whatsmyid.call($this);
        });
    });
},

whatsmyid: function() {
    console.log($(this).attr("id"));
}

};

test.init();

Answer 3

I like to pass eventData to the bind function. Basically, eventData is javascript PlainObject and you can pass information for the event. jQuery bind()

var varModule = {
    $divs: $("div"),
    init: function() {
        var me = this;

        me.$divs.each(function() {
            $(this).bind("click", { me: $(this) }, me.findID);
            $(window).bind("resize", { me: me }, me.findID);
        });
    },
    findID: function(event) {
        var me = event.data.me;    //You will get PlainObject in event.data
        console.log(me.attr("id"));    //div object will give you id but window object wont give you id attribute
    }
};

(function() {
    varModule.init();
})();