javascript/jQuery; this pekare på objekt kallad med timer.

Har lite problem med följande kod:

function WidthHandler() {
    this.BASE_WIDTH = 1140;
    this.checkResize = checkResize;
}

function checkResize(){
    alert(this.BASE_WIDTH);
}

var widthHandler = new WidthHandler();

$(document).ready(function() {
    //Bind the checkResize function to the resize event but add a timer so that the resize dont get called multiple times per resize.
    var timeOut = false;
    $(window).resize(function(){
        if(timeOut !== false)
            clearTimeout(timeOut);
        timeOut = setTimeout(widthHandler.checkResize, 200); //BUGGAR
    });
    widthHandler.checkResize(); // FUNKAR
});

När jag anropar withHandlers checkResize direkt med widthHandler.checkResize(); så funkar this.BASE_WIDTH som den ska och alerten skriver ut 1140. Men ifall jag anropar samma funktion genom timeOut = setTimeout(widthHandler.checkResize, 200); så skriver alerten ut "undefined". Jag har försökt läst på om varför det inte funkar men hittar ingenting som säger att det inte ska funka. Någon JS-guru därute som har koll på vad som är fel? Och i så fall, hur kan man ändra det så att det funkar utan att skriva fulkod med globala variabler etc?

Och en sidofråga, finns det något snyggt sätt att skapa funktioner som är inkapslade? Nu smutsar jag ju ner med saker som checkResize globalt. Det enda exemplet jag har sett som kapslar in gör det med anonyma funktioner typ:

function WidthHandler() {
    this.BASE_WIDTH = 1140;
    this.checkResize= function() {  
        alert(this.BASE_WIDTH);
    }  
}

Men detta måste väl ändå vara fulkod då checkResize objektet skapas varje gång jag anropar den om jag förstår javascripts anonyma funktioner rätt?

var widthHandler = {
	
	BASE_WIDTH: 1140,
		
	checkResize: function (){
		alert(widthHandler.BASE_WIDTH);
	}
}

Hej! Tack för svaret! Dock så är jag rädd att det fortfarande är samma problem egentligen, correct me if I'm wrong men visst skapas det ett funktionsobjekt varje gång checResize anropas?

Problemet med this har jag dock löst. Så ifall någon i framtiden snubblar över tråden så har det att göra med att utvecklarna av javascript måste varit för fulla när de gjorde detta språk. this kan typ peka på vad fan som helst varsomhelst och oftast inte på sig själv tydligen... Hittade en bra förklaring här: http://www.alistapart.com/articles/getoutbindingsituations/

Hittade till slut ett sätt att få det att funka på såhär:

function WidthHandler() {
    this.BASE_WIDTH = 1140;
    this.timeOut = false;
}

WidthHandler.prototype.doResize = function() {
    var _this = this;

    if(this.timeOut !== false)
        clearTimeout(this.timeOut);
    this.timeOut = setTimeout( function() {
        _this.handleTimer();
    }
    , 200);
}

WidthHandler.prototype.handleTimer = function() {
    alert(this.BASE_WIDTH);
}

widthHandler = new WidthHandler();

$(document).ready(function() {
    $(window).resize(function(){
        widthHandler.doResize();
    });
    widthHandler.doResize();
});

Kommentarer på hur man snyggar upp koden är förstås alltid välkomna!