Управление значением 'this' в событии jQuery

Я создал 'control' с помощью jQuery и использовал jQuery.расширьте, чтобы помочь сделать его как можно более OO.

во время инициализации моего элемента управления я подключаю различные события щелчка, такие как so

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

обратите внимание, что я вставляю " это " в качестве аргумента данных в методе bind. Я делаю это, чтобы я мог получить данные, прикрепленные к экземпляру элемента управления, а не от элемента, который запускает событие click.

это работает отлично, однако я подозреваю, что там это лучший способ

используя Prototype в прошлом, я помню синтаксис привязки, который позволял вам контролировать, какое значение " это " было в событии.

Каков путь jQuery?

8 71
jquery scope this

8 ответов:

можно использовать jQuery.proxy() С анонимной функцией, просто немного неудобно, что "контекст" является вторым параметром.

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

мне нравится ваш способ, на самом деле использовать аналогичную конструкцию:

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

и в первой строке.onClick:

var self = event.data.self;

мне нравится этот способ, потому что тогда вы получаете как элемент щелкнул (как это) и "этот" объект как себя без необходимости использовать замыкания.

36

jQuery имеет jQuery.proxy способ (доступен с 1.4).

пример:

var Foo = {
  name: "foo",

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

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

Я не думаю, что 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 (), которые вызывают метод с заданным объектом в качестве его "этой" области.

пример:

function foo() {
    alert(this);
}

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

вы можете использовать JavaScript связать способ такой:

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

var object = {coolValue: "bla"};


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

HTML 5-совместимые браузеры обеспечивают метод bind on Function.prototype который, вероятно, самый чистый синтаксис и не зависит от фреймворка, хотя он не встроен в IE до IE 9. (Есть полифилл для браузеров без него, хотя.)

основываясь на вашем примере, вы можете использовать его как это:

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

(Примечание: первый bind в этом заявление является частью jQuery и не имеет ничего общего с Function.prototype.bind)

или использовать немного более сжатый и современный jQuery (и устранить путаницу из двух различных видов bind s):

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

jQuery не поддерживает привязки и предпочтительным способом является использование функций.

потому что в Javascript, это.availableCategoryClick не означает вызов функции availableCategoryClick на этом объекте, jQuery советует использовать этот предпочтительный синтаксис:

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

понятия OO в Javascript трудно понять, функциональное программирование часто проще и читабельнее.

2

видя, что функции изменяют область действия, наиболее распространенным способом является сделать это вручную, с чем-то вроде var self = this.

var self = this

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