Статьи

Что такое «это» в JavaScript?

Январь 15, 2019

JavaScript — отличный язык программирования. Это было бы неоднозначным утверждением несколько лет назад, но разработчики заново открыли его красоту и элегантность. Если вам не нравится JavaScript, это, вероятно, потому что:

  • Вы столкнулись с различиями или проблемами API браузера, что на самом деле не является ошибкой JavaScript.
  • Вы сравниваете его с языком на основе классов, таким как C ++, C # или Java — и JavaScript не ведет себя так, как вы ожидаете.

Одним из наиболее запутанных понятий является ключевое слово this. В большинстве языков «this» является ссылкой на текущий объект, созданный классом. В JavaScript «this» обычно относится к объекту, которому «принадлежит» метод, но это зависит от того, как вызывается функция.

Глобальная сфера

Если текущего объекта нет, «this» относится к глобальному объекту. В веб-браузере это «окно» — объект верхнего уровня, который представляет документ, местоположение, историю и несколько других полезных свойств и методов. 


window.WhoAmI = "I'm the window object";
alert(window.WhoAmI);
alert(this.WhoAmI); // I'm the window object
alert(window === this); // true

Вызов функции

«this» остается глобальным объектом, если вы вызываете функцию: 

 
window.WhoAmI = "I'm the window object";

function TestThis() {
	alert(this.WhoAmI); // I'm the window object
	alert(window === this); // true
}

TestThis();

Вызов методов объекта

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

 
window.WhoAmI = "I'm the window object";

function Test() {

	this.WhoAmI = "I'm the Test object";

	this.Check1 = function() {
		alert(this.WhoAmI); // I'm the Test object
	};

}

Test.prototype.Check2 = function() {
	alert(this.WhoAmI); // I'm the Test object
};

var t = new Test();
t.Check1();
t.Check2();

Используя Call или Apply

По сути, вызовите и примените функции JavaScript, как если бы они были методами другого объекта. Простой пример демонстрирует это далее: 

 
function SetType(type) {
	this.WhoAmI = "I'm the "+type+" object";
}

var newObject = {};
SetType.call(newObject, "newObject");
alert(newObject.WhoAmI); // I'm the newObject object

var new2 = {};
SetType.apply(new2, ["new2"]);
alert(new2.WhoAmI); // I'm the new2 object

Единственное отличие состоит в том, что для вызова требуется отдельное количество параметров, а для команды apply может быть передан массив параметров.

Это «это» в двух словах! Тем не менее, есть несколько ошибок, которые могут вас поймать. Мы обсудим это в моем следующем посте …

34
Share: