Керування значенням 'this' у події jQuery

Я створив "елемент керування", використовуючи jQuery, і використовував jQuery.extend, щоб допомогти зробити його максимально можливим.

Під час ініціалізації мого контролю я підключаю різні події клацання, подібні до цього

jQuery('#available input', 
            this.controlDiv).bind('click', this, this.availableCategoryClick);

Зверніть увагу, що я вставляю 'this' як аргумент даних у методі bind. Я роблю це для того, щоб отримати доступ до даних, приєднаних до екземпляра управління, а не з елемента, який запускає подію клацання.

Це працює чудово, проте я підозрюю, що є кращий спосіб

Раніше я використовував прототип, я пам’ятаю синтаксис прив’язки, який дозволяв вам контролювати значення значення „this” у події.

Що таке спосіб jQuery?

Ви можете використовувати jQuery.proxy()з анонімною функцією, лише трохи незручно, що "контекст" є другим параметром.

 $("#button").click($.proxy(function () {
     //use original 'this'
 },this));

Мені подобається ваш спосіб, насправді використовуйте подібну конструкцію:

$('#available_input').bind('click', {self:this}, this.onClick);

і перший рядок this.onClick:

var self = event.data.self;

Мені подобається цей спосіб, тому що тоді ви отримуєте як елемент, що клацнув (як цей), так і об’єкт „це” як самостійно, без необхідності використовувати закриття.

jQuery має jQuery.proxyметод (доступний з 1.4).

Приклад:

var Foo = {
  name: "foo",

  test: function() {
    alert(this.name)
  }
}

$("#test").click($.proxy(Foo.test, Foo))
// "foo" alerted

Я не думаю, що jQuery має вбудовану функцію для цього. Але ви можете використовувати допоміжну конструкцію, таку як:

Function.prototype.createDelegate = function(scope) {
    var fn = this;
    return function() {
        // Forward to the original function using 'scope' as 'this'.
        return fn.apply(scope, arguments);
    }
}

// Then:
$(...).bind(..., obj.method.createDelegate(obj));

Таким чином, ви можете створити динамічні 'функції обгортки' за допомогою createDelegate (), який викликає метод із заданим об'єктом як область 'this'.

Приклад:

function foo() {
    alert(this);
}

var myfoo = foo.createDelegate("foobar");
myfoo(); // calls foo() with this = "foobar"

HTML 5-сумісні браузери забезпечують спосіб зв'язування на Function.prototypeяке, ймовірно , найчистіший синтаксис і не є каркасного залежним, хоча вона не вбудована в IE до IE 9. (Існує polyfill для браузерів без нього, хоча.)

На основі вашого прикладу ви можете використовувати його так:

jQuery('#available input', 
        this.controlDiv).bind('click', this.availableCategoryClick.bind(this));

(примітка: перша bindв цьому твердженні є частиною jQuery і не має нічого спільного з цим Function.prototype.bind)

Або використовувати трохи більш стислий і сучасний jQuery (і усунути плутанину з-поміж двох різних типів bind):

$('#available input', this.controlDiv).click(this.availableCategoryClick.bind(this));

Ви можете використовувати метод прив'язки javascript таким чином:

var coolFunction = function(){
  // here whatever involving this
     alert(this.coolValue);
}

var object = {coolValue: "bla"};


$("#bla").bind('click', coolFunction.bind(object));

jQuery не підтримує прив'язки, і найкращим способом є використання функцій.

Оскільки в Javascript this.availableCategoryClick не означає виклик функції availableCategoryClick для цього об’єкта, jQuery радить використовувати такий бажаний синтаксис:

var self = this;
jQuery('#available input', self.controlDiv).bind('click', function(event)
{
   self.availableCategoryClick(event);
});

Поняття OO в Javascript важко зрозуміти, функціональне програмування часто простіше і читабельніше.

Побачивши, що функції змінюють обсяг, найпоширеніший спосіб - це зробити вручну, дещо на зразок var self = this.

var self = this

$('.some_selector').each(function(){
  // refer to 'self' here
}