🔹 Блок 4: JavaScript — функции, контекст, стек вызовов и классы
31. 📌 Что такое стек вызовов (Call Stack)?
💬 Простыми словами:
Call Stack — это структура данных, в которой JavaScript "запоминает", какие функции вызываются и откуда.
🛠 Как работает:
- При вызове функции — она добавляется в стек
- Когда функция завершилась — удаляется из стека
🧪 Пример:
function a() {
b();
}
function b() {
console.log('b');
}
a(); // стек: a → b → console → стек пуст
💡 Полезно знать:
Если стек переполняется (например, из-за рекурсии без выхода) — будет ошибка Maximum call stack size exceeded.
32. 📌 Что такое this в JavaScript?
💬 Простыми словами:
this — это ссылка на объект, в контексте которого вызвана функция.
🛠 Варианты значений:
- В методе объекта → сам объект
- В обычной функции → undefined (в strict) или window (в non-strict)
- В стрелочной функции → берёт this из внешнего контекста
🧪 Пример:
const user = {
name: 'Катя',
sayHi() {
console.log(this.name);
}
};
user.sayHi(); // 'Катя'
💡 Полезно знать:
this внутри стрелочной функции — никогда не меняется, даже с call, apply, bind.
33. 📌 Как работает bind, call, apply?
💬 Простыми словами:
- call — вызывает функцию с заданным this и аргументами
- apply — то же самое, но аргументы передаются массивом
- bind — не вызывает, а возвращает новую функцию с привязанным this
🧪 Пример:
function greet() {
console.log(`Привет, ${this.name}`);
}
const user = { name: 'Игорь' };
greet.call(user); // Привет, Игорь
greet.apply(user); // Привет, Игорь
const bound = greet.bind(user);
bound(); // Привет, Игорь
💡 Полезно знать:
bind — часто используют в обработчиках событий, чтобы зафиксировать this.
34. 📌 Что такое функция-конструктор?
💬 Простыми словами:
Это обычная функция, которую вызывают с new для создания объектов.
🛠 Как работает:
- Создаёт пустой объект
- Присваивает ему this
- Возвращает this
🧪 Пример:
function User(name) {
this.name = name;
}
const user1 = new User('Оля');
console.log(user1.name); // 'Оля'
💡 Полезно знать:
Если вызвать конструктор без new, this будет undefined (в strict mode) или глобальным объектом.
35. 📌 Что такое замыкание (closure)? (повтор, но подробнее)
💬 Простыми словами:
Замыкание — это когда функция "захватывает" переменные из окружающего контекста и сохраняет к ним доступ.
🛠 Как работает:
- Внутренняя функция помнит переменные внешней, даже если та завершилась
🧪 Пример:
function makeCounter() {
let count = 0;
return function () {
return ++count;
};
}
const counter = makeCounter();
console.log(counter()); // 1
console.log(counter()); // 2
💡 Полезно знать:
Замыкания позволяют создавать приватные переменные.
36. 📌 Что такое рекурсия?
💬 Простыми словами:
Рекурсия — это когда функция вызывает сама себя.
**🛠 Важно:
- Нужен базовый случай (условие выхода)
- Каждый шаг должен приближаться к выходу
🧪 Пример:
function factorial(n) {
if (n === 1) return 1;
return n * factorial(n - 1);
}
console.log(factorial(5)); // 120
💡 Полезно знать:
Рекурсия может заменить цикл, особенно при работе с деревьями или вложенными структурами.
37. 📌 Что такое метод объекта?
💬 Простыми словами:
Метод — это функция, которая записана в свойство объекта и вызывается через ..
🛠 Пример:
const user = {
name: 'Лена',
sayHi() {
console.log(`Привет, я ${this.name}`);
}
};
user.sayHi(); // Привет, я Лена
💡 Полезно знать:
Методы используют this, чтобы обращаться к другим свойствам объекта.
38. 📌 Что такое класс в JavaScript?
💬 Простыми словами:
Класс — это шаблон для создания объектов с одинаковой логикой и свойствами.
🛠 Синтаксис (ES6+):
class User {
constructor(name) {
this.name = name;
}
greet() {
console.log(`Привет, ${this.name}`);
}
}
🧪 Пример:
const user = new User('Кирилл');
user.greet(); // Привет, Кирилл
💡 Полезно знать:
Классы используют prototype под капотом и поддерживают наследование через extends.
39. 📌 Как работает наследование в классах?
💬 Простыми словами:
Один класс может "наследовать" свойства и методы другого — удобно для создания иерархий.
🛠 Синтаксис:
class Animal {
speak() {
console.log('Животное говорит');
}
}
class Dog extends Animal {
speak() {
super.speak(); // вызов родительского метода
console.log('Собака лает');
}
}
🧪 Пример:
const dog = new Dog();
dog.speak();
// Животное говорит
// Собака лает
💡 Полезно знать:
super используется для вызова конструктора или метода родителя.
40. 📌 Что такое геттеры и сеттеры?
💬 Простыми словами:
Это специальные методы, которые выглядят как обычные свойства, но позволяют выполнять дополнительную логику при чтении или записи значений.
🛠 Пример:
const user = {
firstName: 'Иван',
lastName: 'Петров',
get fullName() {
return `${this.firstName} ${this.lastName}`;
},
set fullName(value) {
[this.firstName, this.lastName] = value.split(' ');
}
};
console.log(user.fullName); // Иван Петров
user.fullName = 'Ольга Иванова';
console.log(user.firstName); // Ольга
💡 Полезно знать:
Сеттер может использоваться для валидации или трансформации входящих данных.