Ключевое слово this в JavaScript довольно запутанно, но оно входит в число наиболее часто используемых ключевых слов.
this
ключевое слово ведет себя в JavaScript немного иначе, чем в других языках. Он также имеет некоторые различия между строгим режимом и нестрогим режимом.
В JavaScript ключевое слово this
относится к объекту, которому оно принадлежит. Он может иметь разные значения в зависимости от того, где он используется.
- В методе
this
относится к объекту-владельцу. - При использовании отдельно
this
относится к глобальному объекту. - В функции
this
относится к глобальному объекту. - В функции в строгом режиме
this
равноundefined
. - В событии
this
относится к элементу, который получил событие. - Такие методы, как
call()
иapply()
, могут ссылатьсяthis
на любой объект.
Приведенные ниже правила могут помочь вам узнать, на какой объект ссылается ключевое слово this в экземпляре:
- Глобальный охват
- Метод объекта
- call() или метод apply()
- метод привязки()
Глобальный охват
Когда функция включает ключевое слово this
и вызывается из глобальной области видимости, тогда this
будет указывать на объект окна.
var myVar = 100;
function alertVar() {
var myVar = 200;
alert("Value = " + myVar); // Returns 200
alert("this.Value = " + this.myVar); //Returns 100
}
В приведенном выше примере функция alertVar()
вызывается из глобальной области видимости, которая находится в контексте объекта окна. При желании мы можем назвать его как window.alertVar()
. Таким образом, в приведенном выше примере ключевое слово this
в функции alertVar()
будет ссылаться на объект окна, поэтому this.myVar
вернет 100. Однако, если вы получите доступ к myVar
без this
, тогда оно будет ссылаться на локальную переменную myVar
, определенную в функции alertVar()
.
Метод объекта
Когда вы создаете объект функции, используя ключевое слово new, тогда this
будет указывать на этот конкретный объект.
var myVal = 50;
var obj = {
myVal : 600,
alertVal: function(){
var myVal = 150;
alert(myVal); // 150
alert(this.myVal); // 600
}
};
obj.alertVal();
В приведенном выше примере
метод call() или apply()
Основная цель call() и apply() - установить контекст this
внутри функции, независимо от того, вызывается ли эта функция в глобальной области видимости или как метод объекта.
Вы можете передать объект в качестве первого параметра в call() и apply(), на который должен указывать this
внутри вызывающей функции.
var myVal = 100;
function alertVal() {
alert(this.myVal);
}
var obj1 = { myVal : 200 , alertVal: alertVal };
var obj2 = { myVal : 300 , alertVal: alertVal };
alertVal(); // 'this' will point to window object
alertVal.call(obj1); // 'this' will point to obj1
alertVal.apply(obj2); // 'this' will point to obj2
obj1.alertVal.call(window); // 'this' will point to window object
alertVal.apply(obj2); // 'this' will point to obj2
В приведенном выше примере, когда функция alertVal
вызывается this
внутри функции, следует правилу - относится к объекту окна. Однако, когда alertVal
вызывается с использованием методов call() и apply(), тогда this
относится к объекту, который передается в качестве первого параметра, независимо от того, как вызывается функция.
Следовательно, this
будет указывать на obj1, когда функция вызывается как alertVal.call(obj1)
. Точно так же this
будет указывать на obj2 при вызове функции типа alertVal.apply(obj2)
.
связать()
Его можно использовать для установки контекста this
на указанный объект при вызове функции.
Метод bind() обычно полезен при настройке контекста this для функции обратного вызова.
var myVal = 100;
function myFunction(callback)
{
var myVal = 200;
callback();
};
var obj = {
myVal: 300,
alertVal : function() {
alert("'this' points to " + this + ", myVal = " + this.myVal);
}
};
myFunction(obj.alertVal);
myFunction(obj.alertVal.bind(obj));
В приведенном выше примере, когда вы передаете obj.alertVal
в качестве параметра в alertVal(), тогда this
указывает на глобальный объект окна вместо obj, потому что obj.alertVal()
будет выполняться как глобальная функция движком JavaScript. Вы можете решить эту проблему, явно установив значение this
с помощью метода bind(). Таким образом, myFunction(obj.alertVal.bind(obj))
установит this
в obj
, указав obj.alertVal.bind(obj)
.