Объекты JS/jQuery

Question

Я пишу простую систему уведомлений, но я просто изучаю JS/jQuery (передний интерфейс для меня новый), и у меня проблема. я написал следующий код:

(function ($) { 

    var notification = function(title, msg, duration) { 
     this.element = $('<div class="notification"><h3>' + title + '</h3><div class="notification_body">' + msg + '<br/><i>(для скрытия уведомления кликните здесь два раза)</i></div></div>'); 
     this.element.dblclick(notification.hide); 
     $('#notifications_bar').prepend(this.element.hide().fadeIn(1000)); 
    } 

    notification.hide = function() { 
     var $this = this; 
     this.element.fadeOut(1000, function() { 
      $this.element.remove(); 
     }) 
    } 

    $.extend({ 
     notify: function(title, msg, duration) { 
      return new notification(title, msg, duration); 
     } 
    }); 
}) 
    (jQuery); 

Но есть ошибка в методе notification.hide: this.element не определен. Можете ли вы объяснить мне, где ошибка? Спасибо.

Answer 1

При передаче функции, которая была , прикрепленной к объекту непосредственно, функции забывает, какой объект он был прикреплен к (и, следовательно, значение this изменений). Это связано с тем, что значение этого не разрешено, пока функция не будет вызвана.

Вместо этого следует использовать тот же подход, использованный для fadeOut функции (хранящий ссылку на this, и использовать его внутри анонимной функции;

var $this = this; 
this.element.dblclick(function() { 
    $this.hide(); 
}); 

В качестве альтернативы, вы можете использовать jQuery.proxy() или Function.prototype.bind() (ES5-complient браузеры только), которые заставляют значение this на функции, независимо от того, где он прикреплен позже:

this.element.dblclick(jQuery.proxy(notification.hide, this));