В чем разница между областью видимостью и контекстом?

В чем разница между областью видимостью и контекстом

Введение

Область видимости (Scope) и контекст (Context) — это две разные концепции в JavaScript, которые часто путают из-за похожести названий.

• Область видимости — это доступность переменных в коде
• Контекст — это значение this в момент выполнения функции

1. Область видимости (Scope) — где доступны переменные

Область видимости определяет, какие переменные доступны в конкретном месте кода:

const globalVar = "global";

function outer() {
  const outerVar = "outer";

  function inner() {
    const innerVar = "inner";
    
    // inner функция может использовать:
    console.log(innerVar);   // ✓ своя переменная
    console.log(outerVar);   // ✓ переменная родителя
    console.log(globalVar);  // ✓ глобальная переменная
  }

  // outer не может использовать innerVar
  console.log(outerVar);     // ✓
  console.log(innerVar);     // ✗ ReferenceError
}

// Глобальная область видимости может использовать только globalVar
console.log(globalVar);       // ✓
console.log(outerVar);        // ✗ ReferenceError

2. Контекст (Context) — значение this

Контекст — это значение this, которое определяется тем, как вызывается функция:

const person = {
  name: "Alice",
  greet: function() {
    console.log(this.name); // this зависит от способа вызова
  }
};

// Способ 1: метод объекта
person.greet(); // this === person, выведет "Alice"

// Способ 2: обычная функция
const greet = person.greet;
greet(); // this === window (strict: undefined), выведет undefined

// Способ 3: стрелочная функция (не имеет своего this)
const arrowGreet = () => {
  console.log(this.name); // this из внешней области видимости
};

3. Таблица сравнения

4. Область видимости (подробнее)

Блочная область видимости (Block Scope):

if (true) {
  const blockVar = "block scope";
  let blockLet = "block let";
  var blockVar2 = "function scope"; // var = функциональная область
}

console.log(blockVar);  // ✗ ReferenceError
console.log(blockLet);  // ✗ ReferenceError
console.log(blockVar2); // ✓ "function scope" (var игнорирует блоки)

Функциональная область видимости (Function Scope):

function outer() {
  var functionVar = "function scope";
  let blockVar = "block scope";

  if (true) {
    console.log(functionVar); // ✓ "function scope"
    console.log(blockVar);    // ✓ "block scope"
  }
}

function another() {
  console.log(functionVar); // ✗ ReferenceError (не видна из другой функции)
}

5. Контекст (подробнее)

Различные значения this:

// 1. В методе объекта — this === объект
const user = {
  name: "Bob",
  greet: function() {
    console.log(this); // { name: "Bob", greet: function }
  }
};
user.greet();

// 2. В обычной функции — this === window (или undefined в strict mode)
function standalone() {
  console.log(this); // window (или undefined в strict mode)
}
standalone();

// 3. В конструкторе — this === новый объект
function Person(name) {
  this.name = name; // this = новый объект
}
const p = new Person("Alice");
console.log(p.name); // "Alice"

// 4. В addEventListener — this === элемент
button.addEventListener('click', function() {
  console.log(this); // button элемент
});

// 5. В setTimeout/setInterval — this === window
setTimeout(function() {
  console.log(this); // window
}, 1000);

6. Стрелочные функции (Arrow Functions)

Стрелочные функции не имеют своего this, они наследуют его из внешней области видимости:

const user = {
  name: "Alice",
  
  // Обычная функция
  greet: function() {
    console.log(this.name); // "Alice"
  },
  
  // Стрелочная функция
  greetArrow: () => {
    console.log(this.name); // undefined (this из глобальной области)
  },
  
  // Комбинация
  delayedGreet: function() {
    setTimeout(() => {
      console.log(this.name); // "Alice" (this из методо greet, не из setTimeout)
    }, 1000);
  }
};

user.greet();          // "Alice"
user.greetArrow();     // undefined
user.delayedGreet();   // "Alice" (после 1 сек)

7. Методы управления контекстом

call() — вызывает функцию с указанным this:

function greet(greeting) {
  console.log(`${greeting}, ${this.name}`);
}

const user1 = { name: "Alice" };
const user2 = { name: "Bob" };

greet.call(user1, "Hello");  // "Hello, Alice"
greet.call(user2, "Hi");     // "Hi, Bob"

apply() — как call, но аргументы передаются массивом:

function sum(a, b, c) {
  return this.total + a + b + c;
}

const account = { total: 100 };

sum.apply(account, [10, 20, 30]); // 160

bind() — создает новую функцию с фиксированным this:

const user = {
  name: "Alice",
  greet: function() {
    console.log("Hello, " + this.name);
  }
};

const greetAlice = user.greet.bind(user);
greetAlice(); // "Hello, Alice" (this всегда = user)

// Полезно в обработчиках событий
button.addEventListener('click', user.greet.bind(user));

8. Практический пример

class Counter {
  constructor(name) {
    this.name = name;
    this.count = 0;
  }

  increment() {
    this.count++;
    console.log(`${this.name}: ${this.count}`);
  }

  scheduleIncrement() {
    // ❌ Неправильно: this === window в setTimeout
    // setTimeout(this.increment, 1000);
    
    // ✓ Правильно: bind
    // setTimeout(this.increment.bind(this), 1000);
    
    // ✓ Правильно: стрелочная функция
    setTimeout(() => this.increment(), 1000);
  }
}

const counter = new Counter("Counter1");
counter.scheduleIncrement(); // Через 1 сек: "Counter1: 1"

9. Область видимости vs Контекст: сложный пример

const global = "global scope";

const obj = {
  name: "ObjectContext",
  value: "global scope", // переменная с тем же названием
  
  method: function() {
    // Область видимости: может использовать global и obj.value
    // Контекст: this === obj
    
    console.log(global);        // "global scope" (из глобальной области видимости)
    console.log(this.name);     // "ObjectContext" (из контекста obj)
    console.log(this.value);    // "global scope" (свойство obj, но из контекста)
    
    const nested = () => {
      // Область видимости: может использовать переменные из method
      // Контекст: this === obj (наследуется из method)
      
      console.log(global);      // "global scope" (из области видимости)
      console.log(this.name);   // "ObjectContext" (this из method через стрелочную функцию)
    };
    
    nested();
  }
};

obj.method();
// "global scope"
// "ObjectContext"
// "global scope"
// "global scope"
// "ObjectContext"

10. Правило: когда использовать

// Область видимости — для понимания доступности переменных
const x = 1;
function outer() {
  const y = 2;
  function inner() {
    const z = 3;
    console.log(x, y, z); // Все доступны через область видимости
  }
  inner();
}

// Контекст — для понимания this
const user = {
  name: "Alice",
  sayHi: function() {
    console.log(this.name); // this = контекст вызова (user)
  }
};

user.sayHi(); // this === user

const sayHi = user.sayHi;
sayHi(); // this === window (потеря контекста)

Заключение

• Область видимости (Scope) — это доступность переменных, определяется тем, где написан код
• Контекст (Context) — это значение this, определяется тем, как вызывается функция
• Область видимости создается при определении функции (лексическая область видимости)
• Контекст определяется при вызове функции
• Стрелочные функции не имеют собственного this, они наследуют его из область видимости
• Используй bind(), call(), apply() для управления контекстом