jQuery Chat UI Widget

Question

I'm creating a chat UI with jQueryUI:

$.widget("ui.chatwindow", {
    options: {
        nickname: "obama";
    },
    setNickname: function(nick){
        var self = this;
        var id_pre = 'wchat_' + self.options.nickname;
        $('#' + id_pre + '\\:name').text(self.options.nickname);
    },
    setStatus: function(status){
            var self = this;
            var id_pre = 'wchat_' + self.options.nickname;
            switch(status){
                case 1:
                    $('#' + id_pre + '\\:status').removeAttr('class');
                    $('#' + id_pre + '\\:status').addClass('chat-icon-online');
                    $('#' + id_pre + '\\:status').attr('title','Online');
                    break;
                    ...
                default:
                    break;                    
            }
            ...
        },
    ...
}

I always write this in every method to change element class or text content:

var self = this;
var id_pre = 'wchat_' + self.options.nickname;

Is this a good or efficient way to code?

Answer 1

I can't say there's anything technically wrong with doing it that way, and maybe some people who are only familiar with "self" in certain languages will get the point, but I think "this" is just as readable, and it saves you some code (along with some of us wondering where in the world "self" was defined if we're looking at a lot of code where the declaration isn't obvious).

So short of adding some extra work for yourself (and raising a couple of eyebrows), I don't see a big problem with it. Do you need it? No. Will it hurt? Not likely.

Answer 2

I completely agree with Kerri, but there is one good reason one may do this, namely if you need to reference your widget inside a closure or other anonymous function.

Example:

 // ...
 setStatus: function(status) {
    var self = this;
    window.setTimeout(function() {
       // If you try to access "this" here, if will no longer 
       // be referring to your widget. You have to use your 
       // variable "self" here.
    }, 1000);
   // ...
 }, 
 // ...