0

我正在编写一个简单的通知系统，但我只是在学习 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未定义。你能解释一下错误在哪里吗？谢谢你。

4

1 回答 1

4

当您传递直接附加到对象的函数时，该函数会忘记它附加到的对象（以及this更改的值）。这是因为this的值直到函数被调用才被解析。

相反，使用与fadeOut函数相同的方法（存储对 的引用this，并在匿名函数中使用它；

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

或者，您可以使用jQuery.proxy()or Function.prototype.bind()（仅兼容 ES5 的浏览器）this在函数上强制一个值，无论它稍后附加到何处：

this.element.dblclick(jQuery.proxy(notification.hide, this));
于 2013-03-09T10:27:34.907 回答