JS Object, как получить доступ к объектам из себя

Question

Итак, я не вижу причин, почему это не работает, но я у стены и разочарован. Почему я не могу вызвать this.myself из функции wyr.message.close? Может быть, мое понимание этого нарушено, но я был уверен, что это относится к самому объекту, а не к функции.

this.myself is undefined

Код:

wyr.message = {
    myself: $('.message'),
    init: function() {
        if(this.myself.is(':visible')){
            setTimeout(this.close, 5000);
        }
    },
    close: function(){
        this.myself.fadeOut(1200,function(){
            this.myself.remove();
        });
    }
}

Answer 1

wyr.message = {
    myself: $('.message'),
    init: function() {
        var self = this;
        if(this.myself.is(':visible')){
            setTimeout(function(){
                self.close();
            }, 5000);
        }
    },
    close: function(){
        this.myself.fadeOut(1200,function(){
            $(this).remove();
        });
    }
}

Проблема в контексте. В функции обратного вызова, переданной fadeOut, this привязан к элементу, над которым работает jQuery, а не к объекту wyr.message.

EDIT

Существует также проблема с методом init. SetTimeout свяжет значение this с глобальным (window) объектом - поэтому мы сохраняем ссылку на this, которую мы хотим, и используем ее для вызова метода close.

Вы также можете посмотреть Function.prototype.bind, но он не поддерживается в старых браузерах.

Answer 2

Во-первых, выражения литерального свойства объекта javascript оцениваются во время создания экземпляра объекта. myself будет тем, что захватит этот селектор в это время, что, вероятно, ничто. Свойство myself должно быть функцией, если вы хотите, чтобы оно возвращало значение $('.message') во время вызова. Как следствие, вам также придется изменить все виды использования на вызовы функций.

Во-вторых, во время выполнения обратного вызова setTimeout this привязывается к объекту окна, поэтому вам необходимо правильно его квалифицировать:

  wyr.message = {
    myself: function() { return $('.message'); },
    init: function() {
      if(this.myself().is(':visible')){
        setTimeout(this.close, 5000);
      }
    },
    close: function(){
      message.myself().fadeOut(1200,function(){
        $(this).remove();
      });
    }
  };

(Обратите внимание, что при исчезновении тайм-аута это исчезнет и удалит все, что соответствует селектору.)