В jquery, что означает this и когда он используется?
Что значит "это" в jQuery?
Ответ 1
this в JavaScript очень особенный и мощный. Это может означать что угодно. Я описываю некоторые из них здесь и здесь, но это действительно стоит найти хороший учебник по JavaScript и провести некоторое время с ним.
Посмотрите сначала на использование jQuery, затем поговорите об этом в общем в JavaScript (немного).
В jQuery, в частности
В коде, написанном с помощью jQuery, this обычно ссылается на элемент DOM, который является объектом вызываемой функции (например, в обратном вызове).
Пример обратного вызова события jQuery (что this находится в .bind docs):
$("div").click(function() {
// Here, `this` will be the DOM element for the div that was clicked,
// so you could (for instance) set its foreground color:
this.style.color = "red";
// You'll frequently see $(this) used to wrap a jQuery object around the
// element, because jQuery makes lots of things a lot simpler. You might
// hide the element, for example:
$(this).hide();
});
Аналогично, различные функции jQuery, которые действуют на все элементы, соответствующие текущему селектору jQuery, могут, при желании, принимать функцию, и когда эта функция вызывается, this снова является элементом DOM в вопросе — например, функция html позволяет это:
// Find all divs inside the `foo` element, and set
// their content to their CSS class name(s)
// (Okay, so it a hokey example)
$("#foo div").html(function() {
return this.className;
});
Другое место, в котором jQuery использует this, находится в обратном вызове jQuery.each:
var a = ["one", "two", "three"];
jQuery.each(a, function() {
alert(this);
});
..., который будет предупреждать "один", затем "два", затем "три". Как вы можете видеть, это совершенно другое использование this.
(Смутно, jQuery имеет две функции, называемые each, одну выше, которая находится непосредственно в самой функции jQuery/$и всегда называется таким образом [jQuery.each(...) или $.each(...)], а другая - в экземплярах jQuery [ объекты], а не jQuery/$function iself. Вот документы для другого, я не обсуждаю другой в этом ответе потому что он использует this таким же образом html и обратный вызов события, и я хотел показать другое использование this jQuery.)
Обычно в JavaScript
Обновление. Что касается строгого режима ES5, это больше не верно, this относится к объекту.this может иметь любое значение. Значение this в пределах любого заданного вызова функции определяется тем, как вызывается функция (а не там, где определена функция, как в таких языках, как С# или Java). Наиболее распространенный способ настройки this при вызове функции - вызов функции через свойство объекта:
var obj = {};
obj.foo = function() {
alert(this.firstName);
};
obj.firstName = "Fred";
obj.foo(); // alerts "Fred"
Там, поскольку мы вызвали foo через свойство на obj, this было установлено на obj на время вызова. Но не создавайте впечатление, что foo никоим образом не женат на obj, это отлично работает:
var obj = {};
obj.foo = function() {
alert(this.firstName);
};
obj.firstName = "Fred";
obj.foo(); // alerts "Fred"
var differentObj = {};
differentObj.firstName = "Barney";
differentObj.bar = obj.foo; // Not *calling* it, just getting a reference to it
differentObj.bar(); // alerts "Barney"
Фактически, foo не привязан вообще к какому-либо объекту вообще:
var f = obj.foo; // Not *calling* it, just getting a reference to it
f(); // Probably alerts "undefined"
Там, поскольку мы не вызывали f через свойство объекта, this не был явно установлен. Если this явно не задано, по умолчанию используется глобальный объект (который находится в window в браузерах). window, вероятно, не имеет свойства firstName, и поэтому мы получили "undefined" в нашем предупреждении.
Существуют другие способы вызова функций и установка того, что this: с помощью функций .call и .apply:
function foo(arg1, arg2) {
alert(this.firstName);
alert(arg1);
alert(arg2);
}
var obj = {firstName: "Wilma"};
foo.call(obj, 42, 27); // alerts "Wilma", "42", and "27"
call устанавливает this в первый аргумент, который вы ему даете, а затем передает любые другие аргументы, которые вы передаете ему вызывающей функции.
apply делает то же самое, но вы даете ему аргументы для функции как массива, а не отдельно:
var obj = {firstName: "Wilma"};
var a = [42, 27];
foo.apply(obj, a); // alerts "Wilma", "42", and "27"
// ^-- Note this is one argument, an array of arguments for `foo`
Опять же, есть гораздо больше, чтобы исследовать this в JavaScript. Концепция является мощной, немного обманчивой, если вы привыкли к тому, как это делают некоторые другие языки (а не если вы привыкли к некоторым другим), и стоит знать.
Вот несколько примеров this, не относящихся к объекту в строгом режиме ES5:
(function() {
"use strict"; // Strict mode
test("direct");
test.call(5, "with 5");
test.call(true, "with true");
test.call("hi", "with 'hi'");
function test(msg) {
console.log("[Strict] " + msg + "; typeof this = " + typeof this);
}
})();
Вывод:
[Strict] direct; typeof this = undefined [Strict] with 5; typeof this = number [Strict] with true; typeof this = boolean [Strict] with 'hi'; typeof this = string
Если в свободном режиме все из них сказали бы typeof this = object; живая копия.
Ответ 2
Ключевое слово
В JavaScript вещь, называемая этим, является объектом, который "владеет" кодом JavaScript.
Значение этого, когда оно используется в функции, является объектом, который "владеет" функцией. Значение этого, когда оно используется в объекте, является самим объектом. Это ключевое слово в конструкторе объекта не имеет значения. Это только замена нового объекта. Значение этого станет новым объектом, когда конструктор используется для создания объекта.
Обратите внимание, что это не переменная. Это ключевое слово. Вы не можете изменить значение этого.
Ответ 3
Вот как я бы это объяснил, просто:
this относится к object , который называется function.
так глядя на это:
var foo = {
name: "foo",
log: function(){
console.log(this.name);
}
}
var bar = {
name: "bar"
}
bar.log = foo.log;
bar.log();
объект bar хранит ссылку на метод foo log в собственном свойстве log для себя. теперь, когда bar вызывает свой метод log, это будет указывать на bar, потому что метод был вызван объектом bar.
это работает для любого другого объекта, даже объекта окна. если вы вызываете функцию через глобальную область видимости, это будет указывать на объект окна.
используя методы связывания или вызова функции, вы можете явно определить, на что будет ссылаться объект this во время выполнения.
Интересный факт: все, что определено в global scope, который является верхним слоем/уровнем, становится свойством window object (global scope = window object).
Ответ 4
Топ результата Google для "javascript this": http://www.quirksmode.org/js/this.html
Изменить: Я думаю, что ключевое предложение:
"В JavaScript "this" всегда ссылается на" владельца "выполняемой нами функции, или, вернее, на объект, который функция является методом."
Quirksmode (обычно *) отлично, стоит прочитать всю статью в деталях.
* Очевидно, что это утверждение не обязательно правильно, см. T.J. Комментарий к Crowder ниже.
Ответ 5
Ключевое слово this действует как заполнитель и будет ссылаться на какой-либо объект, называемый этим методом, когда метод фактически используется в Java Script
Ответ 6
Тот же объект, который вызывает функцию, передается в функцию в качестве параметра this.
Когда объект создается из класса, он содержит только набор свойств, и в нем нет функции. И функции принадлежат классу. однако как функция вызывается объектом?
Рассмотрим следующий код.
var obj = {
p1: 'property 1',
func1 () {
return this.p1
},
func2 (param) {
return this.p1 + param
}
}
А также вызывать функции с помощью объекта obj
obj.func1 ();
obj.func2 ('A');
Компилятор добавляет параметр this в начало параметров функции. И фактически скомпилированные функции выглядят следующим образом.
var obj = {
p1: 'property 1',
func1 (this) {
return this.p1
},
func2 (this, param) {
return this.p1 + param
}
}
И вызов скомпилированной функции также изменяется следующим образом.
func1 (obj);
func2 (obj, 'A');