Введение

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

Загадка «этого»

Представьте себе такой сценарий: вы усердно создаете функцию или метод JavaScript и внезапно встречаете неуловимое ключевое слово this. Вы понимаете, что его значение меняется в зависимости от того, как и где вызывается функция. Эта постоянно меняющаяся природа this может быстро привести к замешательству и разочарованию.

Не бойтесь, мы собираемся изучить четыре фундаментальных правила, которые помогут прояснить поведение ключевого слова this:

Правило 1: Глобальный контекст Когда this появляется в глобальной области видимости (вне какой-либо функции), он ссылается на глобальный объект, обычно window в средах браузера. Если не соблюдать осторожность, это может привести к неожиданному поведению.

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

Правило 2: Вызов функции. Когда функция вызывается без какого-либо контекста объекта, this относится к глобальному объекту. Однако если функция выполняется в «строгом режиме», this остается неопределенным.

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

logThis(); // [object Window] (in non-strict mode)

Стрелочные функции и «это»

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

const myObject = {
    value: 42,
    getValue: function () {
        console.log(this.value); // Works as expected
        const arrowFunction = () => {
            console.log(this.value); // Inherits value from the outer instance
        };
        arrowFunction();
    }
};

myObject.getValue();

Правило 3: вызов конструктора. Когда функция используется в качестве конструктора для создания новых объектов, this относится к вновь созданному экземпляру. Это основа создания экземпляров объектов в JavaScript.

function Car(make) {
    this.make = make;

}

// This function present "Constructor" in a class syntax"
const myCar = new Car("Toyota"); 
console.log(myCar.make); // Toyota

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

В своей предстоящей статье я намерен углубиться во внутреннюю работу классов в JavaScript и дать полное представление об их функциональности. Кроме того, я раскрою тайну использования ключевого слова «extends» при наследовании классов.