How to use THIS with OOP javascript?

Question

I am new to OOP in JavaScript, just trying to do some stuff the same way I would i PHP. In the example below I can't use the THIS keyword to generically call the method getMyWeekDay() of the class Screen, what I have to do in my prototype function is to call a specific instance of my "Screen" class (namely my instance called "screen") which kind of ruins the purpose a little bit...

I guess I just made a newbie mistake in my design?

//Our screen object
function Screen() {}

//update the clock element on the screen
Screen.prototype.updateClock = function(date) {
    //do some stuff
    $('#dateContainer').html(screen.getMyWeekDay(date)+' '+date);
    //Here I would prefer    $('#dateContainer').html(this.getMyWeekDay(date)+' '+date);
}

//return the day name in swedish
Screen.prototype.getMyWeekDay = function(d) {
    var d=new Date(d);
    var weekday=new Array(7);
    weekday[0]="Söndag";
    weekday[1]="Måndag";
    weekday[2]="Tisdag";
    weekday[3]="Onsdag";
    weekday[4]="Torsdag";
    weekday[5]="Fredag";
    weekday[6]="Lördag";
    var n = weekday[d.getDay()];
    return n;
}

screen = new Screen();

//use the new instance (screen) of class Screen

-- UPDATE --

I realize my problem might have been outside of the code I shared, using the solution suggested worked though.

Here is my entire code, I was just trying to spare you a bunch of what I considered unneccessary reading...

Screen.prototype.updateClock = function() {

    var jqxhr = $.get('{{ path('getClock') }}')
      .success(function(data) { 
            time = data.substring(data.indexOf("|")+1, data.indexOf("|")+6);
            date = data.substring(0, data.indexOf("|"));

            $('#timeContainer').html(time);          

            try{
                //see if template has its own function for date rendering...
                template_date_format(getMyWeekDay(date),date);
            }
            catch(e) {
                //standard fallback if not
                $('#dateContainer').html(this.getMyWeekDay(date)+' '+date);
            }       
       })
      .error(function() {
            console.log('there was an error fetching clock data');
      });        
            setTimeout(function() {
              updateClock();
            }, 15000);          

}

Here is a good introduction from MDN for OOP in JS: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript — e382df99a7950919789725ceeec126, Jan 04 '14 at 12:28
Ok.. there was an answer here a minute ago that totally works, but when I went to check it as the solution it had been deleted.. whoever you postee are, was there a problem with the code you posted? — Matt Welander, Jan 04 '14 at 12:32
There is no reason using `this.getMyWeekDay()` shouldn't work. Do you get any error? — dcodesmith, Jan 04 '14 at 12:39
dcodesmith are you the one posting that answer? Anyways, my own answer below builds on the "save a reference to the THIS" that someone here just taught me. Have a look below, you'll propably see why calling THIS where I did didn't work. — Matt Welander, Jan 04 '14 at 12:43
More on how to use constructor functions and what `this` exactly is here: http://stackoverflow.com/a/16063711/1641941 — HMR, Jan 04 '14 at 13:12

score 0 · Accepted Answer · answered Jan 04 '14 at 12:53

Screen.prototype.updateClock = function() {

var oopThis = this;

var jqxhr = $.get('{{ path('getClock') }}')
    .success(function(data) { 

        // the log line below will return an object which contains the ajax calls options
        console.log(this);

        time = data.substring(data.indexOf("|")+1, data.indexOf("|")+6);
        date = data.substring(0, data.indexOf("|"));

        $('#timeContainer').html(time);          

        try {
            //see if template has its own function for date rendering...
            template_date_format(getMyWeekDay(date),date);
        } catch(e) {
            //standard fallback if not
            $('#dateContainer').html(oopThis.getMyWeekDay(date)+' '+date);
        }    
    })
    .error(function() {
        console.log('there was an error fetching clock data');
    });        

    setTimeout(function() {
        oopThis.updateClock();
    }, 15000);
}

OK. Based on your code above this in the context of an ajax/get/post function refers to the ajax object which contains its options.

BTW, The common convention is to do var self = this;

How to use THIS with OOP javascript?

1 Answers1