Ключевое слово this в JavaScript довольно запутанно, но оно входит в число наиболее часто используемых ключевых слов.

thisключевое слово ведет себя в JavaScript немного иначе, чем в других языках. Он также имеет некоторые различия между строгим режимом и нестрогим режимом.

В JavaScript ключевое слово this относится к объекту, которому оно принадлежит. Он может иметь разные значения в зависимости от того, где он используется.

  • В методе this относится к объекту-владельцу.
  • При использовании отдельно this относится к глобальному объекту.
  • В функции this относится к глобальному объекту.
  • В функции в строгом режиме this равно undefined.
  • В событии this относится к элементу, который получил событие.
  • Такие методы, как call() и apply(), могут ссылаться this на любой объект.

Приведенные ниже правила могут помочь вам узнать, на какой объект ссылается ключевое слово this в экземпляре:

  1. Глобальный охват
  2. Метод объекта
  3. call() или метод apply()
  4. метод привязки()

Глобальный охват

Когда функция включает ключевое слово 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).