Применение ООП с помощью jQuery

Question

Я работаю с jQuery и пытаюсь применить некоторые базовые принципы ООП Javascript к набору функций, которые управляют поведением при наведении курсора.Однако я не могу понять, как заставить ключевое слово «this» ссылаться на экземпляр объекта, который я создаю.Мой пример кода:

var zoomin = new Object();

zoomin = function() {
       // Constructor goes here
};

zoomin.prototype = {
       hoverOn: function() {
          this.hoverReset();
          // More logic here using jQuery's $(this)...
       },
       hoverReset: function() {
          // Some logic here.
       }
       };

// Create new instance of zoomin and apply event handler to matching classes.
var my_zoomin = new zoomin();
$(".some_class").hover(my_zoomin.hoverOn, function() { return null; });

Проблемная строка в приведенном выше коде - это вызов this.hoverReset () внутри функции hoverOn ().Поскольку «this» теперь относится к элементу, на который был наведен курсор, он работает не так, как задумано.Я бы хотел вызвать функцию hoverReset () для этого экземпляра объекта (my_zoomin).

Есть ли способ сделать это?

Спасибо!

Answer 1

Только присвоение функции свойству объекта не связывает this внутри функции с объектом. Это способ, которым вы вызываете функцию.

Позвонив

.hover(my_zoomin.hoverOn,...)

Вы только передаете функцию. Он не будет «помнить», к какому объекту он принадлежал. Что вы можете сделать, это передать анонимную функцию и вызвать hoverOn внутри:

.hover(function(){ my_zoomin.hoverOn(); },...)

Это заставит this внутри hoverOn сослаться на my_zoomin. Так что звонок на this.hoverReset() будет работать. Однако внутри hoverOn вы не будете иметь ссылку на объект jQuery, созданный селектором.

Одним из решений будет передача выбранных элементов в качестве параметра:

var zoomin = function() {
   // Constructor goes here
};

zoomin.prototype = {
   hoverOn: function($ele) {
      this.hoverReset($ele);
      // More logic here using jQuery's $ele...
   },
   hoverReset: function($ele) {
      // Some logic here.
   }
};


var my_zoomin = new zoomin();
$(".some_class").hover(function() { 
    my_zoomin.hoverOn($(this));  // pass $(this) to the method
}, function() { 
    return null; 
});

---

В качестве следующего шага вы можете рассмотреть возможность создания jQuery-плагина .

Answer 2

пожалуйста, смотрите мои ответы на эти вопросы:

где мое "это"?

почему "это" не это ?

this постоянно возникает путаница.

когда вы передаете функцию в качестве обратного вызова, она вызывается как отдельная функция, поэтому ее "this"становится глобальным объектом.

"bind" является встроенной частью ecmascript 5 и является частью прототипа функции.Если вы перейдете к концу моего второго ответа, вы получите ссылку на веб-сайт Mozilla, на котором есть версия «bind» для «совместимости».Используйте команду myfunction.bind (myobject), и она будет использовать встроенную функцию, если она доступна, или функцию JS, если ее нет.

Answer 3

1. Вы можете «привязать» обработчик события к объекту ( см., Например, код привязки Mootools ).
2. Вы можете передать объект в качестве параметра в анонимной функции и использовать его вместо this в обработчике событий

Что касается 1, вы добавляете метод bind к function

bind: function(bind){
        var self = this,
            args = (arguments.length > 1) ? Array.slice(arguments, 1) : null;

        return function(){
            if (!args && !arguments.length) return self.call(bind);
            if (args && arguments.length) return self.apply(bind, args.concat(Array.from(arguments)));
            return self.apply(bind, args || arguments);
        };
    }

Не уверен, однако, насколько хорошо он будет взаимодействовать с JQ.