Урок 3. JavaScript. Что такое замыкания. Как они работают (+ примеры)

Получить профессию Frontend разработчика -

Подробнее узнать об обучении в Result School -

Я в соц сетях:

Мои паблики по JavaScript:

JavaScript cообщества:

Roadmap по каналу:

Урок 3. JavaScript. Что такое замыкания. Как они работают
В видео я расскажу, как работаю замыкания.
Вы увидите 2 примера того, как их применять в Javascript
В конце ролика будет небольшая практика на замыкания и контекст

Сложный JavaScript простым языком:

[lsidkzo]

стоило сказать, что apply или call можно было использовать при написании кастомного bind )) в остальном отличное видео

[indigosay]

Автор объяснил понятнее за 11 минут, чем Кантор, которого я полдня читал и не понял до конца!

[antontuchkin]

Огромное спасибо за такой ценный free материал! Есть маленькая просьба, для таких новичков как я, было бы очень ценно понимать в каких случаях применять полученные знания. Пара примеров из реальной жизни.

[VladilenMinin]

Смогли сами реализовать bind? Как вам идея с практикой в конце?)

[some_user]

Отдельное спасибо за примеры использования, не всегда понятно где и как реализовать ту, или иную особенность. 👍

[fwewwfb]

Исходные данные задачи в конце ролика:
function logPerson() {
// console.log(`Person: ${this.name}, ${this.age}, ${this.job}`)
// }

// const person1 = {name: 'Михаил', age: 22, job: 'Frontend'}
// const person2 = {name: 'Елена', age: 19, job: 'SMM'}

// bind(person1, logPerson)
// bind(person2, logPerson)

[kostasancez]

Ещё интересно было бы про AJAX, c практикой, короче скоро это будет топовый канал на ютубе с годными уроками по фронту))

[vadimtregubenko]

Что-то я не совсем понял.
Каким образом заполняется параметр с массивом ...args в замыкании?
В bind передается контекст ( объекты ) и функция.
А дальше как замыкающая получает параметры ?

[Aaaa-jnbm]

Мне кажется что в этом видео пропустили самый главный момент, без которого замыканий не существовало бы - вы пропустили момент создания лексического окружения, которое выполняется каждый раз при вызове функции

[oxniozp]

Кайф! Тяжело найти в инете такое понятное объяснение. Спасибо!

[gelosx]

Владилен, спасибо за классный контент - подача и материал, всё на очень высоком уровне.
В некоторых комментариях здесь утверждается, что в видео идет речь о функциях высшего порядка а не о замыканиях.
То что это функция высшего порядка, не отменяет тот факт, что здесь также присутствует замыкание:
1. Так как для функции внешним окружением является место, где она была объявлена, а не место
где она была вызвана, то в нашем случае анонимная функция которую мы возвращаем как результат выполнения
функции bind, получит в качестве ссылки на внешнее лексическое окружение, ссылку на лексическое окружение самой
функции bind.
При этом, эти ссылки сохраняются в так называемой куче(heap), что позволяет им, в отличии от непосредственно самой
функции, выполняющейся в стеке и удаляющейся оттуда сразу после того как функция завершит свою работу, оставаться в
памяти до удаления сборщиком мусора.
2. К лексическому окружению функции относятся не только ее параметры, но и аргументы. Поэтому, в нашем случае
и context и fn также входят в лексическое окружение функции bind.
Теперь, если:
const func = bind(person1, LogPerson)
то :
при вызове func(), произойдет следующее:
для получения context и fn функция сначала обратиться к своему лексическому окружению,
так как их там нет, то она по имеющейся у неё ссылке начнёт поиск в лексическом окружении внешней функции,
где она была объявлена, именно этот момент и есть замыкание.

Вот мои два варианта решения задачи:
Для чистоты эксперимента, сделал функционал как у оригинального bind, без явного добавления функции в параметры
и чтоб совсем все было своим, функцию apply также сделал кастомной:

Object.prototype.myApply = function (context, args) {
if(!Array.isArray(args)) throw new Error('parameter is not Array');
const tempContext = {...context, appliedFunc: this};

};

Object.prototype.myBind = function (context, ...args) {
const boundFunc = this;
return function () {
boundFunc.myApply(context, args)
}
};

logPerson.myBind(person1)()


Или другой вариант, наиболее оптимальный, объединяющий эти две функции:


Object.prototype.myBind2 = function (context, ...args) {
const tempContext = {...context, boundFunc: this};
return function () {

}
}

logPerson.myBind(person2)()

[ilgul]

Коротко, понятно + практика... Как итог - отличный урок. В общем как всегда.

[vazgenaleksanyan]

круто все. Было здорово посмотреть твой урок по созданию JAVASCRIPT плагина.

[dmitriyshisterov]

Чувак, огромная благодарность!) Великолепно объясняешь!

[zpxzfuj]

О боги, я понял это спустя неделю попыток и тонны лит-ры и видео) Прикладные примеры - самое важное, за это отдельное спасибо!

[vyacheslavvasilev]

Действительно простым языком. Спасибо за материал, помогли разобраться!

[dizelvinable]

В конце блоки со ссылками на другие видео перекрывают экран и не видно кода.

[lwqtzbp]

Ты лучший. Наконец стал понятен смысл замыканий

[alik]

я наконец-то понял, что такое замыкание, спасибо тебе огромное 🚀

[olesilin]

Примеры и задачи должны решаться с замыканием проще и изящней, чем без него. Иначе вопрос "зачем" остается не раскрыт. А по механике все очень доходчиво.