イベント内でのthisについて

画像のロールオーバー

var Rollover = (function(){

    var _func = {

        init: function(el,suffix){
            this.event(el,suffix);
        },

        event: function(el,suffix){
            var that = this;
            $(el).on({
                mouseover: function(){
                    var self = this;
                    self.setAttribute('src',that.util(self,suffix));
                },
                mouseout: function(){
                    var self = this;
                    self.setAttribute('src',that.util(self,suffix))
                }
            });
        },

        util: function(self,suffix){
            var src = self.src;
            if(src.indexOf(suffix + '.') < 0){
                return src.replace(/^(.+)(\.[a-z]+)$/, '$1' + suffix + '$2');
            }else{
                return src.replace(suffix,'');
            }
        }
    }

    return _func;
})();


//実行
$(function(){
    Rollover.init('.sample','_o');
});

こういう書き方の場合、通常は、this.util()でメソッドを呼び出せば問題ないけど、.on()内では、thisはターゲットのDOMを指す為、外側でthisを変数に格納する必要があります。

var _func = {

    event: function(el,suffix){
        //この時点でのthisはオブジェクト自身である_func
        this.util(); // 777
        var that = this;

        $(el).on('event',function(){
            //この中のthisは el
            that.util() // 777
            this.util() // undefined is not function
        });

        this.util(); // 777
    },

    util: function(){
        return 777;
    }
}

イベント内でthisを変数に格納せずにthis.util()とするとエラーになります。
this == elとなっているからで、el.util() ってやってるのと同じだから当たり前だけど、thisをちゃんと理解してないと、はまる要素になります。