Как можно переопределить Scope?

Переопределение Scope в JavaScript

Scope в JavaScript определяет доступность переменных в разных частях кода. Существует несколько способов переопределить (изменить) scope и управлять видимостью переменных.

1. Функциональный Scope (Function Scope)

Классический способ создания нового scope через функции:

let globalVar = "global";

function myFunction() {
  let localVar = "local";  // новый scope
  console.log(globalVar);  // "global" — доступна
  console.log(localVar);   // "local" — доступна
}

my_function();
console.log(localVar);     // ReferenceError — не доступна

2. Блочный Scope (Block Scope) — let и const

Очень важно: let и const создают блочный scope, а var — функциональный:

if (true) {
  var x = 1;     // функциональный scope
  let y = 2;     // блочный scope
  const z = 3;   // блочный scope
}

console.log(x);  // 1 — доступна (функциональный scope)
console.log(y);  // ReferenceError
console.log(z);  // ReferenceError

3. Замыкания (Closures) — главный способ переопределения

Замыкания позволяют контролировать scope и скрывать переменные:

function createCounter() {
  let count = 0;  // скрыта в scope замыкания
  
  return {
    increment: function() {
      count++;
      return count;
    },
    getCount: function() {
      return count;
    }
  };
}

const counter = createCounter();
console.log(counter.increment());  // 1
console.log(counter.increment());  // 2
console.log(counter.getCount());   // 2

4. IIFE (Immediately Invoked Function Expression)

Принцип: создать новый scope и сразу же его выполнить:

var x = "global";

(function() {
  var x = "local";  // переопределяет x в новом scope
  console.log(x);   // "local"
})();

console.log(x);     // "global"

5. Модули (Module Pattern)

Полный контроль над scope и публичным API:

const Calculator = (function() {
  // приватный scope
  let result = 0;
  
  const add = function(x) {
    result += x;
    return this;
  };
  
  const subtract = function(x) {
    result -= x;
    return this;
  };
  
  const getResult = function() {
    return result;
  };
  
  // публичный API
  return { add, subtract, getResult };
})();

Calculator.add(5).subtract(2);
console.log(Calculator.getResult());  // 3

6. Стрелочные функции и this

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

const obj = {
  value: 42,
  regular: function() {
    console.log(this.value);  // 42
  },
  arrow: () => {
    console.log(this.value);  // undefined (наследует global scope)
  }
};

7. Контекст выполнения — call, apply, bind

Ти способа явно переопределить this (scope контекста):

function greet(greeting) {
  console.log(greeting + ", " + this.name);
}

const person = { name: "Alice" };

greet.call(person, "Hello");        // Hello, Alice
greet.apply(person, ["Hi"]);        // Hi, Alice
const boundGreet = greet.bind(person);
boundGreet("Hey");                  // Hey, Alice

Практические рекомендации

• Используй let и const вместо var для более точного контроля над scope
• Замыкания — мощный инструмент для инкапсуляции данных
• Модульный паттерн помогает организовать код и избежать загрязнения глобального scope
• Избегай глобальных переменных — создавай новые scope через функции или модули