JavaScript — растущий язык в современную эпоху. Хотя он известен как язык сценариев для создания интерактивных веб-страниц, многие небраузерные среды, такие как Node.js, Apache и Adobe Acrobat, используют JavaScript. Согласно опросу разработчиков Stack Overflow за 2020 год, JavaScript остается самым используемым языком сообщества уже восьмой год подряд!
Хотя JavaScript — довольно простой язык для изучения, его не так-то просто полностью понять. Одна концепция, с которой мы с другими разработчиками боролись, — это печально известное ключевое слово this.
Не ходите вокруг да около, давайте сразу перейдем к тому, что такое оператор this!
Определение
Согласно веб-документации Mozilla Developer Network, ключевое слово this функции — это идентификатор, который относится к свойству объекта. В глобальном контексте вещей (вне любой функции) this относится к глобальному объекту. Вот пример:
//In web browsers, the global object is the window object console.log(this === window); //true a = 37; console.log(window.a); //37 this.b = "MDN"; console.log(window.b); //"MDN" console.log(b); //"MDN"
С другой стороны, внутри функции значение this зависит от контекста где вызывается функция, а не от того, где функция объявлена. Вот пример:
var brand = "Nissan";
var myCar = {brand: "Honda"}
var getBrand = function(){
console.log(this.brand);
}
myCar.getBrand = getBrand;
myCar.getBrand();
//Output: Honda
getBrand();
//Output: Nissan
Как видите, хотя и myCar.getBrand(), и getBrand() указывают на одну и ту же функцию, getBrand, значение this отличается из-за контекста, в котором вызывается функция. С одной стороны, если функция вызывается в контексте объекта, в данном случае объекта myCar, то она будет ссылаться на свойство объекта. С другой стороны, если функция вызывается в глобальном контексте, то она будет ссылаться на глобальный объект — window.getBrand(), который вызывает window.brand. Таким образом, другой контекст дает другой результат.
Вызов локальной области видимости
Когда мы размещаем ключевое слово this, мы указываем ключевому слову контекст локальной области действия. В локальной области this есть три основных варианта:
thisиспользуется в простом вызове функции
Первый вариант — это отдельная функция, в которой мы вызываем функцию напрямую. Например:
function simpleCall(){
console.log(this);
}
simpleCall();
//Output: the Window object
В этом случае значение this вызовом не устанавливается. Поскольку код не работает в строгом режиме, значение this всегда должно быть объектом, поэтому по умолчанию используется глобальный объект.
Между тем, в строгом режиме значение this остается таким, каким оно было установлено при выполнении функции. Если значение this не определено, то оно остается неопределенным. Вот пример:
function simpleCall(){
"use strict";
console.log(this);
}
simpleCall();
//Output: undefined
2. this используется в методе объекта
Как и в приведенном выше примере Honda и Nissan, мы можем хранить функцию внутри объекта, что превращает ее в метод, который можно вызывать, вызывая объект.
Когда функция вызывается как метод объекта, ее значение this устанавливается равным свойству вызываемого объекта.
var message = {
content: "I love JavaScript";
showContent: function(){
console.log(this.content);
}
};
message.showContent(); //Output: "I love JavaScript"
Здесь, поскольку мы вызываем функцию showContent() как метод объекта message, this становится значением content сообщения. Таким образом, this.content равно message.content.
3. this используется в функциях-конструкторах
Мы можем использовать ключевое слово this для создания функции-конструктора, которая создаст объект. Думайте об этом как о фабрике по созданию новых объектов! Когда функция используется в качестве подрядчика, значение this привязывается к вновь созданному объекту. Вот пример ключевого слова this, используемого в качестве функции-конструктора:
function Message(content){
this.content = content;
this.showContent = function(){
console.log(this.content);
};
}
var message = new Message("I love JavaScript");
message.showContent();
//Output: "I love JavaScript"
В приведенном выше коде мы создали функцию-конструктор с именем Message, которая принимает аргумент content. Внутри функции-конструктора есть два ключевых слова this: this.content и this.showContent. Как упоминалось выше, ключевое слово this используется для установки значения создаваемого нового объекта, message. После создания нового объекта с использованием ключевого слова new и присвоения "I love JavaScript" в качестве значения аргумента content мы можем вызвать метод showContent() для объекта message с помощью message.showContent(), который выведет значение message.content.
Хороший пример
Чтобы проиллюстрировать определение ключевого слова this, позвольте мне показать несколько хороших примеров из документации:
Использование this в контексте функции:
var obj = {a: 'Custom'};
var a = 'Global';
function whatsThis(){
return this.a;
}
whatsThis(); //Output: 'Global'
whatsThis.call(obj); //Output: 'Custom'
whatsThis.apply(obj); //Output: 'Custom
Здесь мы объявляем объект с именем obj и переменную с именем a. Затем мы определили функцию whatsThis(). Здесь нужно знать, что значение this зависит от того, как вызывается функция.
Например, если функция вызывается как whatsThis(), то вывод будет 'Global', так как this в функции не установлен ни для какого объекта, что по умолчанию означает глобальный/оконный объект. Затем, если функция вызывается как whatsThis.call(obj) или whatsThis.apply(obj), то вывод будет «Пользовательский», поскольку this в функции устанавливается на obj.
Вывод
Итак, надеюсь, теперь вы понимаете, что такое ключевое слово this! Напомним, что ключевое слово this используется для обозначения свойства определенного объекта. Более того, при использовании ключевого слова this внутри функции важность контекста заключается в том, как функция вызывается, а не в том, где она объявлена.
