Использование контекста ключевого слова this с jQuery

Question

Как неофит jQuery, я несколько смущен различными контекстами, в которых используется ключевое слово this . Иногда это относится к элементу DOM, например this.id и иногда он ссылается на объект jQuery, например $ (это) .val () .

Сообщение в блоге Реми Шарпа полезно, но я хотел бы знать, как вы объясните разницу новичку. Является ли разница строго проблемой jQuery или общей для всего Javascript?

Спасибо за все ответы до сих пор - отличный материал, я выберу ответ завтра. Вот еще одна запись в блоге, с которой я впоследствии столкнулся, которая также была полезна: Что это? Майк Алсуп .

Answer 1

Пост Реми Шарпа сбивает с толку, если вы, по моему мнению, не читаете его внимательно. Значение this никогда не меняется. В приведенном вами примере было 2 варианта использования this. Как элемент DOM в событии:

$('a').click(function() {
    alert(this.tagName);
});

и обернуто как объект jQuery в событии:

$('a').click(function() {
    alert($(this).val());
});

Если вы внимательно прочитаете 2 приведенных выше фрагмента, вы заметите, что this никогда не меняет значения. Это всегда относится к элементу DOM. Разница заключается в том, как он используется.

В jQuery по умолчанию this относится к элементу DOM (не объекту jQuery), который вызвал событие. Во втором фрагменте кода выше это все еще того же элемента DOM, только он обернут в элемент jQuery, обернув $() вокруг него. Как и в случае с любым аргументом конструктора jQuery, передача this в конструктор преобразует его в объект jQuery.

Я думаю, что путаница возникает, когда Реми начинает говорить о плагинах jQuery в той же статье, что и события jQuery. Плагины jQuery - это то, что люди редко пишут и часто используют. При написании плагина jQuery вы работаете в контексте прототипа объекта jQuery. В этом случае вы используете слово this для обозначения написанного вами плагина. В обычных случаях вы не будете часто писать плагины, так что это гораздо менее распространенный сценарий. Если вы не находитесь в области действия плагина, вы не можете использовать this для ссылки на объект jQuery.

---

В языке JavaScript ключевое слово this относится к текущему экземпляру объекта в JavaScript. При использовании в прототипе JavaScript он ссылается на экземпляр прототипа. В зависимости от браузера, при использовании модели событий не-jquery, this также ссылается на элемент DOM. Поскольку некоторые браузеры (Internet Explorer) не называют this элементом DOM в событии, это затрудняет работу с событиями. Чтобы обойти это, jQuery выполняет магию JavaScript, которая всегда заставляет this ссылаться на элемент DOM, который вызвал событие. Это (одна из многих) причин, чтобы использовать JavaScript-фреймворк вместо собственного.

Answer 2

Не забывайте, что если вы когда-либо не уверены, что такое «это» в каком-либо конкретном контексте, вы можете диагностировать его в Firebug с помощью консоли:

console.log("This is: " + this)

Если вы используете jQuery (как вы уже упоминали), вы всегда можете убедиться, что «this» все еще является объектом jQuery, выполнив следующее:

this = $(this);

Затем, вернувшись в консоль, вы можете увидеть, что представляет собой объект jQuery «this», зарегистрировав его в Firebug:

console.log("The jQuery This is: " + $(this))

Наконец, так как мы говорим о jQuery, есть несколько случаев, когда «this» изменяется. Например, когда вы делаете обратный вызов после анимации или fadeIn или fadeOut. В этом контексте «это» будет относиться к предмету, получающему эффект.

Просто помните, если вы когда-нибудь не уверены, что это "...", спросите Жар-жука. Firebug видит все. Firebug знает все.

Answer 3

jQuery Proxy может помочь вам получить ваш ответ. Вы можете вызвать функцию jQuery и изменить объект, к которому относится область действия this.

например. что-то вроде:

var me = {
  type: "zombie"
  ,test: function() {$('#result').html(this.type)}

};

$.proxy( me.test(), me ); //prints 'zombie'

Answer 4

иногда это относится к объекту jQuery, например $ (это) .val () .

this здесь относится к элементу DOM; вызов функции $ () - это то, что оборачивает элемент DOM в объект jQuery. Для обратных вызовов событий jQuery this будет (почти?) Всегда ссылаться на элемент DOM. При написании функции, расширяющей jQuery, которую можно вызвать с помощью $ ('select'). Myfunc (), this будет ссылаться на объект jQuery.

---

В JavaScript в целом this применяется, когда функция вызывается как свойство объекта (вызов метода). Итак, с учетом функции:

function foo() {
    doSomethingWith(this);
}

var obj1 = {'foo': foo};
var obj2 = {};
obj2.myFoo = foo;

obj1.foo(); // calls function foo(), with 'this' set to obj1
obj2.myFoo(); // calls function foo(), with 'this' set to obj2
foo();      // calls function foo(), with 'this' set to the global object
            // (which, in a browser, is the window object)
foo.apply(new Date()); // calls foo(), with 'this' set to a Date object

Итак, в Javascript вид объекта, на который ссылается «this» в функции, зависит больше от того, как вызывается функция, чем от фактического определения функции.