---
title: Область видимости
seo:
title: Область видимости — React Developer
description: Тема «Область видимости» для собеседования React Developer. Что такое замыкание (Closures)? Что такое поднятие (Hoisting)?
---
[Все темы React Developer](/react-developer)
## Что такое замыкание (Closures)? [#q-14bee738d69b818fbadce9bfbed30d4b]
Замыкание состоит из функции и доступного ей лексического окружения. Функция сохраняет доступ к внешним переменным, в том числе после завершения вызова, в котором она была создана.
#### Основные характеристики:
{/* prettier-ignore */}
1. Доступ к внешним переменным:
- Функция может сохранять доступ к переменным своей внешней функции.
- Пример:
```javascript
function outerFunction() {
let outerVariable = 'I am outside!';
function innerFunction() {
console.log(outerVariable);
}
return innerFunction;
}
const closure = outerFunction();
closure(); // "I am outside!"
```
1. Приватные переменные:
- Замыкания могут использоваться для создания приватных переменных.
- Пример:
```javascript
function createCounter() {
let count = 0;
return function() {
count++;
return count;
};
}
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
```
Замыкания позволяют функции запоминать и получать доступ к переменным своей внешней функции, даже после завершения выполнения этой внешней функции.
:::note[Ссылки для изучения]
1. [Область видимости в JavaScript](https://learn.javascript.ru/closure)
:::
---
## Что такое поднятие (Hoisting)? [#q-14bee738d69b81a5b90cf5644455c807]
Hoisting описывает создание привязок до выполнения соответствующих строк кода, а не буквальное перемещение исходного текста. var заранее получает undefined; объявления функций обычно доступны для вызова; let и const нельзя читать до инициализации из-за TDZ.
#### Основные характеристики:
{/* prettier-ignore */}
1. Переменные:
- Объявления переменных (с var) поднимаются вверх, но их инициализация остается на месте.
- Пример:
```javascript
console.log(x); // undefined
var x = 5;
```
1. Функции:
- Объявления функций поднимаются полностью, включая тело функции.
- Пример:
```javascript
greet(); // "Hello"
function greet() {
console.log("Hello");
}
```
1. let и const:
- Переменные, объявленные с помощью let и const, также поднимаются, но они находятся в "временной мертвой зоне" (TDZ) до инициализации.
- Пример:
```javascript
console.log(y); // ReferenceError
let y = 10;
```
Hoisting описывает создание привязок до выполнения соответствующих строк кода, а не буквальное перемещение исходного текста. var заранее получает undefined; объявления функций обычно доступны для вызова; let и const нельзя читать до инициализации из-за TDZ.
:::note[Ссылки для изучения]
1. [Область видимости в JavaScript](https://learn.javascript.ru/closure)
:::
---
## Что такое область видимости (Scope)? [#q-14bee738d69b81099598e895e94f8e08]
Область видимости (
Scope
) — это контекст, в котором определяются и доступны переменные
и функции в JavaScript.
#### Основные виды:
{/* prettier-ignore */}
1. Глобальная область видимости:
- Переменные и функции, объявленные в глобальном контексте, доступны в любом месте кода.
- Пример:
```javascript
var globalVar = "I'm global";
function globalFunction() {
console.log(globalVar);
}
```
1. Функциональная область видимости:
- Переменные, объявленные внутри функции, доступны только внутри этой функции.
- Пример:
```javascript
function myFunction() {
var localVar = "I'm local";
console.log(localVar);
}
// console.log(localVar); // Ошибка: localVar не определена
```
1. Блочная область видимости:
- Переменные, объявленные с помощью let и const внутри блока ({}), доступны только внутри этого блока.
- Пример:
```javascript
{
let blockVar = "I'm block-scoped";
console.log(blockVar);
}
// console.log(blockVar); // Ошибка: blockVar не определена
```
Область видимости определяет контекст, в котором переменные и функции доступны для использования в JavaScript, обеспечивая контроль над видимостью и временем жизни данных.
:::note[Ссылки для изучения]
1. [Область видимости в JavaScript](https://learn.javascript.ru/closure)
:::
---
## Какое значение имеет this? [#q-14bee738d69b819dacbbe8dbe7c5392d]
this — это ключевое слово, которое ссылается на объект, к которому
принадлежит текущий контекст выполнения.
#### Основные контексты:
{/* prettier-ignore */}
1. В глобальной области видимости:
- В обычном браузерном скрипте на верхнем уровне this равен window. В ES-модуле он равен undefined, а на верхнем уровне модуля CommonJS в Node.js обычно равен module.exports.
- Пример:
```javascript
console.log(this); // В браузере выведет объект window
```
1. В методе объекта:
- При вызове obj.method() обычная функция получает obj как this. Если извлечь метод и вызвать отдельно, this определяется новым способом вызова, а не объектом, где функция хранилась.
- Пример:
```javascript
const obj = {
name: "Alice",
getName: function() {
return this.name;
}
};
console.log(obj.getName()); // "Alice"
```
1. В конструкторах и классах:
- this ссылается на новый экземпляр объекта, создаваемый конструктором или классом.
- Пример:
```javascript
function Person(name) {
this.name = name;
}
const person = new Person("Bob");
console.log(person.name); // "Bob"
```
1. В функциях-стрелках:
- Стрелочная функция не создаёт свой this, а использует его значение из окружающего лексического контекста. Это значение не меняют call, apply и bind.
- Пример:
```javascript
const obj = {
name: "Alice",
getName: () => this.name
};
console.log(obj.getName()); // undefined, так как this ссылается на глобальный объект
```
Пример со стрелочной getName не читает obj.name. В браузерном скрипте он читает window.name; в ES-модуле обращение к this.name выбросит TypeError, потому что this равен undefined. Комментарий с undefined в примере не универсален.
:::note[Ссылки для изучения]
1. [Область видимости в JavaScript](https://learn.javascript.ru/closure)
:::