Как контекст функции зависит от Scope

1️⃣ Как кратко ответить

Контекст функции в JavaScript определяется значением this и зависит от того, как функция вызывается, а не от ее лексического окружения (scope). Scope определяет доступность переменных, а контекст — это объект, на который ссылается this в момент вызова функции.

2️⃣ Подробное объяснение темы

В JavaScript важно различать два понятия: scope (область видимости) и контекст. Они играют ключевые роли в том, как функции работают и как они взаимодействуют с данными.

Scope (Область видимости):

Scope определяет, какие переменные доступны в определенной части кода. В JavaScript есть несколько типов областей видимости:

• Глобальная область видимости: Переменные, объявленные вне всех функций, доступны везде в коде.
• Функциональная область видимости: Переменные, объявленные внутри функции, доступны только внутри этой функции.
• Блочная область видимости: Переменные, объявленные с помощью let или const внутри блока (например, в цикле или условии), доступны только внутри этого блока.

Пример:

function exampleFunction() {
    let functionScopedVariable = 'I am function scoped';
    if (true) {
        let blockScopedVariable = 'I am block scoped';
        console.log(blockScopedVariable); // 'I am block scoped'
    }
    // console.log(blockScopedVariable); // Ошибка: blockScopedVariable не определена
    console.log(functionScopedVariable); // 'I am function scoped'
}

Контекст (Context):

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

Основные способы вызова функции, которые влияют на контекст:

• Обычный вызов функции: this указывает на глобальный объект (в браузере это window), если функция не в строгом режиме. В строгом режиме this будет undefined.

function showThis() {
    console.log(this);
}
​
showThis(); // В нестрогом режиме: [object Window], в строгом: undefined

• Метод объекта: Когда функция вызывается как метод объекта, this указывает на этот объект.

const obj = {
    method: function() {
        console.log(this);
    }
};
​
obj.method(); // { method: [Function: method] }

• Конструктор (через new): При вызове функции как конструктора с помощью new, this указывает на новый созданный объект.

function ConstructorFunction() {
    this.value = 'I am a new object';
}
​
const instance = new ConstructorFunction();
console.log(instance.value); // 'I am a new object'

• Явное указание контекста: Методы call, apply и bind позволяют явно задавать контекст для функции.

function showThis() {
    console.log(this);
}
​
const obj = { name: 'My Object' };
​
showThis.call(obj); // { name: 'My Object' }

Контекст и область видимости — это разные концепции, но они часто взаимодействуют в коде. Понимание того, как они работают, помогает писать более предсказуемый и управляемый код.