Функции глубже on JSFlow

Замыкания и область видимости

Mon, 01 Jan 0001 00:00:00 +0000

Замыкания и область видимости #

Замыкание — функция, которая «помнит» переменные из внешней области видимости даже после того, как внешняя функция уже завершилась. В JavaScript это обычное поведение: каждая функция создаётся вместе со ссылкой на окружение, в котором она была объявлена.

Лексическая область видимости #

JavaScript ищет переменные снаружи внутрь — от текущего блока к родительским:

const courseTag = 'jsflow'

function describeLesson(title) {
 const prefix = '[урок]'
 return function format() {
 return `${prefix} ${courseTag}: ${title}`
 }
}

const formatIntro = describeLesson('Введение')
formatIntro() // "[урок] jsflow: Введение"

Внутренняя format видит prefix из describeLesson и courseTag из глобальной области. Это и есть лексическая (статическая) видимость: она определяется местом объявления, а не местом вызова.

Rest и spread

Mon, 01 Jan 0001 00:00:00 +0000

Rest и spread #

Rest (...) собирает оставшиеся элементы в массив; spread разворачивает итерируемое значение в отдельные элементы. Один и тот же синтаксис ..., но роль зависит от позиции: в объявлении параметров — rest, в выражении — spread.

Rest-параметры #

Rest заменяет устаревший arguments и всегда даёт настоящий массив:

function logTags(primary, ...extra) {
 console.log('главный:', primary)
 console.log('остальные:', extra)
}

logTags('javascript', 'замыкания', 'async', 'dom')
// главный: javascript
// остальные: ['замыкания', 'async', 'dom']

Правила:

rest-параметр только один и только последний в списке;
до него можно ставить обычные параметры и значения по умолчанию.

function buildSearchUrl(base, page = 1, ...filters) {
 const query = filters.map(encodeURIComponent).join(',')
 return query ? `${base}?page=${page}&q=${query}` : `${base}?page=${page}`
}

buildSearchUrl('/docs', 2, 'функции', 'замыкания')
// "/docs?page=2&q=%D1%84%D1%83%D0%BD%D0%BA%D1%86%D0%B8%D0%B8,%D0%B7%D0%B0%D0%BC%D1%8B%D0%BA%D0%B0%D0%BD%D0%B8%D1%8F"

Spread в массивах #

Разворачивает элементы при создании массива, передаче аргументов или конкатенации:

setTimeout и setInterval

Mon, 01 Jan 0001 00:00:00 +0000

setTimeout и setInterval #

setTimeout откладывает однократный вызов функции; setInterval повторяет её через заданный интервал. Оба планируют колбэк в очереди задач браузера или Node.js — код после вызова таймера выполняется сразу, не дожидаясь колбэка.

setTimeout #

Синтаксис: setTimeout(callback, delayMs, ...args). Возвращает числовой id для отмены:

function showHint(message) {
 console.log(message)
}

const timerId = setTimeout(showHint, 1500, 'Продолжайте урок — вы на верном пути')

// отмена до срабатывания
clearTimeout(timerId)

delay — минимальная задержка, не гарантия точного времени: при загруженной вкладке или длинной синхронной задаче колбэк сработает позже.

call, apply, bind

Mon, 01 Jan 0001 00:00:00 +0000

call, apply, bind #

call, apply и bind — методы функций для явного выбора значения this и управления аргументами. Они не меняют определение функции, а задают контекст на момент вызова или возвращают новую функцию с «приклеенным» this.

Зачем это нужно #

this в обычной функции зависит от способа вызова, а не от места объявления:

const counter = {
 value: 0,
 increment() {
 this.value += 1
 return this.value
 },
}

const fn = counter.increment
fn() // NaN или ошибка в strict — this не counter

Передача метода как колбэка «отрывает» объект от this. call/apply/bind возвращают контроль.