Применение ООП с jQuery

Я работаю с jQuery и пытаюсь применить некоторые основные принципы Javascript OOP к набору функций, которые управляют поведением наведения. Однако я не могу понять, как заставить ключевое слово "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 (). Поскольку "это" теперь относится к элементу, который был завис, он не работает по назначению. Я в основном хотелось бы вызвать функцию hoverReset () для этого экземпляра объекта (my_zoomin).

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

спасибо!

6
javascript javascript-events jquery oop

3 ответов

только назначение функции свойству объекта не связано 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.

8
  1. вы можете "привязать" обработчик событий к объекту (см. Mootools bind code например).
  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.

0

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

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

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

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

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

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

0