JavaScript - this Keyword

Привет, будущие разработчики JavaScript! Сегодня мы отправляемся в увлекательное путешествие в мир ключевого слова this. Как ваш доброжелательный邻居-преподаватель информатики, я здесь, чтобы помочь вам понять это иногда сложное, но всегда fascinирующее понятие. Так что возьмите любимый напиток, устройтесь поудобнее и погружайтесь с нами!

Что такое ключевое слово 'this'?

Представьте, что вы на вечеринке, и кто-то кричит: "Эй, ты!" Кто повернется? Все, верно? Но если бы они сказали: "Эй, Сара!", только Сара бы ответила. В JavaScript ключевое слово this похоже на说法 "Эй, ты!" к объекту. Это способ ссылаться на текущий объект в контексте.

Ключевое слово this - это особый идентификатор, который автоматически определяется в scope каждой функции. Но вот загвоздка - его значение зависит от того, как вызывается функция. Эта динамическая природа this делает его и мощным, и иногда сбивающим с толку.

На какой объект ссылается 'this'?

Теперь事情 становятся интересными. Объект, на который ссылается this, может изменяться в зависимости от того, как и где он используется. Это как хамелеон, который меняет свой цвет в зависимости от окружающей среды. Давайте рассмотрим несколько сценариев:

Синтаксис

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

console.log(this);

Просто, правда? Но не дайте его простоте обмануть вас. Магия (или пакость) происходит, когда мы используем его в разных контекстах.

JavaScript 'this' в глобальном scope

Когда используется в глобальном scope (вне любой функции), this ссылается на глобальный объект. В браузере это usually window объект.

console.log(this === window); // true

this.myGlobalVar = "Я глобальный!";
console.log(window.myGlobalVar); // "Я глобальный!"

Здесь this как ВИП-пропуск, который gives вам доступ ко всему празднику (глобальный scope).

JavaScript 'this' в функции

Когда this используется внутри обычной функции, его значение зависит от того, как вызывается функция.

function showThis() {
console.log(this);
}

showThis(); // window (в нестрогом режиме)

В этом случае this как потерявшийся щенок, который附着自己 к тому, что рядом - что в нестрогом режиме это глобальный объект.

'this' в функции в строгом режиме

Строгий режим как строгий учитель, который не позволяет вам увиливать. В строгом режиме this внутри функции undefined,除非显式но установлено.

"use strict";
function strictThis() {
console.log(this);
}

strictThis(); // undefined

'this' в конструкторской функции

Когда функция используется как конструктор (с ключевой фразой new), this ссылается на newly созданный объект.

function Person(name) {
this.name = name;
this.greet = function() {
console.log("Привет, я " + this.name);
};
}

const john = new Person("John");
john.greet(); // "Привет, я John"

Здесь this как свидетельство о рождении, устанавливающее личность newly рожденного объекта.

'this' в стрелочной функции

Стрелочные функции - это rebels JavaScript мира. Они не привязывают свое собственное this, но наследуют его от окружающего scope.

const obj = {
name: "Алиса",
sayHello: () => {
console.log("Привет, " + this.name);
}
};

obj.sayHello(); // "Привет, undefined"

В этом случае this в стрелочной функции не ссылается на obj, но на surrounding scope (вероятно, глобальный scope).

'this' в методе объекта

Когда this используется в методе (функция, которая является свойством объекта), он ссылается на объект, на который был вызван метод.

const car = {
brand: "Toyota",
getBrand: function() {
return this.brand;
}
};

console.log(car.getBrand()); // "Toyota"

Здесь this как верный слуга, всегда ссылающийся на своего хозяина (объект).

'this' в функции внутри метода объекта

Здесь事情 могут become сложными. В функции внутри метода this больше не ссылается на объект.

const restaurant = {
name: "Вкусные угощения",
getMenu: function() {
function displayName() {
console.log(this.name);
}
displayName();
}
};

restaurant.getMenu(); // undefined

В этом случае this в displayName() ссылается на глобальный объект, а не на restaurant.

JavaScript 'this' в обработчиках событий

В обработчиках событий this обычно ссылается на элемент, который получил событие.

<button id="myButton">Нажми меня!</button>

<script>
document.getElementById("myButton").addEventListener("click", function() {
console.log(this); // <button id="myButton">Нажми меня!</button>
});
</script>

Здесь this как световое пятно, фокусирующееся на звезде шоу - элементе, который был clicked.

Явное связывание функции в JavaScript

Иногда мы хотим быть начальником и сказать this exactly что он должен быть. Мы можем сделать это, используя call(), apply(), или bind().

const person1 = { name: "Алиса" };
const person2 = { name: "Боб" };

function sayHello() {
console.log("Привет, " + this.name);
}

sayHello.call(person1); // "Привет, Алиса"
sayHello.apply(person2); // "Привет, Боб"

const boundHello = sayHello.bind(person1);
boundHello(); // "Привет, Алиса"

Эти методы как режиссер,казывающий this exactly какую роль играть.

Приоритет связывания 'this' в JavaScript

Теперь давайте подведем итог приоритета связывания this:

Rule	Precedence
new keyword	1 ( Highest)
Explicit binding (call, apply, bind)	2
Method invocation	3
Function invocation	4 (Lowest)

помните, что стрелочные функции особенные и всегда наследуют this от surrounding scope.

И вот оно,folks! Мы отправились в путешествие по земле this, исследуя его многие лица и странности. Помните, понимание this как учиться ездить на велосипеде - сначала это может быть неуверенно, но с практикой вы будете мчаться без проблем. Продолжайте программировать, продолжайте исследовать и, самое главное, продолжайте весело проводить время с JavaScript!

Credits: Image by storyset