Заявление об ограничении ответственности: я не являюсь экспертом по JavaScript. Я просто делюсь своим опытом обучения с использованием ключевого слова this
. Итак, приступим.
Просто запомните эту строку
Для всех обычных вызовов функций
this
указывает на объект окна.
Теперь давайте сначала разберемся с вызовами регулярных функций.
Пример 1:
// Let's define our function first function sayHello() { console.log("Hello Reader!"); } // Now let's call our function sayHello(); // This type of function call is called Regular Function call. Output: Hello Reader!
Приведенный выше пример очень прост для понимания, поскольку он просто содержит определение функции, а затем ее вызов.
Пример 2:
// Defining our function function funcGenerator() { return function() { console.log("Hello Reader"); } } // Assigning a variable to a returned function let generatedFunction = funcGenerator(); //Regular Function call generatedFunction(); Output: Hello Reader!
В этом примере у нас есть функция, которая возвращает функцию. Итак, мы можем присвоить переменную возвращаемой функции и вызвать эту функцию с этой переменной.
Теперь вернемся к ключевому слову this
.
this
ключевое слово - это просто ключевое слово в JavaScript, которое относится к объекту.
console.log(this);
Если вы просто попытаетесь запустить только одну строку кода в консоли или узле браузера, ключевое слово this
будет относиться к глобальному объекту, то есть объекту окна в браузере и пустому объекту в узле.
var user = { firstName: "Arteev", lastName: "Raina", printName: function() { console.log(this); } } user.printName(); Output: Object { firstName: "Arteev", lastName: "Raina", printName: printName() }
Помните, что user.printName();
- это не обычный вызов функции. Таким образом, ясно одно: this
не будет относиться к глобальному объекту, но что теперь? Куда следует this
сослаться?
В этом случае this
будет относиться к владельцу метода printName()
, то есть user
объекта. Следовательно, объект user
регистрируется на консоли.
Поскольку в этом случае ключевое слово this
относится к объекту пользователя, это означает, что мы можем получить свойства объекта пользователя с помощью ключевого слова this
, такого как user.firstName
, теперь мы можем написать this.firstName
.
Теперь давайте напечатаем наше имя. Я печатаю свой, вы пытаетесь распечатать свой.
var user = { firstName: "Arteev", lastName: "Raina", printName: function() { console.log(this.firstName + " " + this.lastName); } } user.printName(); Output: Arteev Raina
Теперь давайте рассмотрим еще один пример, чтобы прояснить наше понимание.
var testObject = { printThis: function() { return function() { console.log(this); } } } var func = testObject.printThis(); func(); Output: Window Object in Browser (or) Empty Object in Node
Вам должно быть интересно, почему
this
имеет в видуwindow object
. Почему не говорится оtestObject
. Но вот то, что мы вызываем функцию, которая возвращает другую функцию, и мы сохраняем эту функцию в переменнойfunc
, а затем вызываемfunc()
, который снова является вызовом регулярной функции, а в вызовах регулярной функции это ключевое слово относится к объекту окна. Объект, стоящий перед точкой, - это то, к чему будет привязано ключевое слово this.