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




Telegram: https://teleg.one/js_by_vladilen
Instagram: https://www.instagram.com/vladilen.minin
VK: https://vk.com/vladilen.minin
Группа VK: https://vk.com/js_by_vladilen

Полный курс по Angular 8+:
https://clc.to/angular

React Native: мобильная разработка на JavaScript:
https://clc.to/rnative

Полный курс по ReactJS:
https://clc.to/react

Поддержать выпуск новых видео:
ЯД: https://money.yandex.ru/to/410013757655670
PayPal: https://www.paypal.me/vladilenm

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

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


Original source


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

  1. Владилен, спасибо за урок! Не сразу понял, зачем прописали …args (spread) с дополнительными аргументами, которые в примере на самом деле и не используются и без …args всё будет работать, это только запутывает при разборе примера. Пример кода, в котором я попытался передать …args и использовать их – https://codepen.io/varsptz/pen/eYNBqRm?editors=0010. А вот где можно на практике применить этот …spread я так и не уловил.

  2. Можете обьяснить, или дать ссылку: откуда вы знаете, что именно передаётся в ..args, потому что выглядит как магия.
    Мой вариант был:
    function bind(context,fn) {
    return fn.call(context);
    }
    Прочитал комменты к видео, и вообще не понятно: какие доп параметры? Ведь задание дано четкое.
    Со стороны, как будто вначале обясняете джунам, а потом "нет времени обьяснять, вот вам синийорский код".
    Какие доп.параметры? Хоть бы пример показали под своё же решение.
    Решение испортило всё видео, потому что сложность из 3 скатилась сразу к 20.
    Пожалуйста, я понимаю, что вы знаете тонкости языка. Но аудитория, под которую предназначен этот контент – скорее всего нет.

  3. Подскажите плс, можно ли так писать или это считается плохим способом из-за создания нового объекта?
    const binder = {
    check(extra){
    console.warn(`${this.name}'s name is ${this.name}!!!`);
    if(extra) console.warn(`${this.name} said => ${extra}`);
    }
    };

    function bind(context, func) {
    return function (…arg) {
    const newContext = {
    …context,
    startFunc: func
    };
    newContext.startFunc(…arg)
    }
    }
    bind(lena, binder.check)('Does it work?');

  4. function urlGen(domain){
    return function (url){

    return `https://${url}.${domain}`;

    }

    }

    urlGen('com')('kem')

    Данный пример является замыканием? Или замыкание происходит именно при присваивании?

  5. Зачем или какой толк в замыкании , например в примере с url ?

    Если мы можем сделать одну функцию с двумя аргументами , function(url,domain) и тд ….
    спасибо за объяснения , понял , как работает , но не понял зачем ))

  6. Данную задачу можно решить гораздо проще и правильнее:
    function logPerson() {
    console.log(`Person: ${this.name}`);
    }

    const person1 = {name: 'Alex', age: 19, job: 'QA'};
    const person2 = {name: 'Danyil', age: 19, job: 'QA'};

    function bind(persona, func) {
    persona.func = func;
    persona.func();
    }

  7. Сколько уже слов было сказано об этом канале, но я не поленюсь и тоже напишу.
    Очень лаконично и четко, все по полочкам без воды, спасибо за труды. Привіт з України!

  8. Владилен огромное спасибо за объяснения и подробного рода видео.
    Но вот в целом до меня идиота не доходит, зачем мне замыкание если

    function createIncrementor(n,num){
        return n + num;
    }
    const anyVar = createIncrementor(5,51);
    console.log(anyVar);

    Пожалуйста,объясните,никак не могу понять

  9. Владилен Минин, спасибо за урок. Не знаю js, так как только пытаюсь понять. Сделал так, но кто бы покритиковал…
    function bind(person, func){

    this.name = person.name;

    this.age = person.age;

    this.job = person.job;

    return func();

    }
    так тоже вроде работает:
    function bind(person, func){

    name = person.name;

    age = person.age;

    job = person.job;

    return func();

    }
    const person1 = {name : "Misha", age: 21, job: "SMM"};

    bind(person1, logPerson);

  10. Можно гораздо короче и без вообще без замыканий! :
    function bind(obj, func) {
    func.call(obj)
    }

    Кому интересно подробности ниже:

    А зачем использовать замыкания и apply, вы что то вы перемудрили )))

    можно же все через call в одной функции. Я вот так реализовал, посмотрите может не прав конечно, ведь только учусь. Убил полдня на решение потому что когда переписывал задания поставил в вызове функции bind у функции logPerson круглые скобки получилось:
    bind(person1, logPerson())
    и это ну никак не давало мне справиться с заданием. Я пересмотрел еще раз уроки про прототипы ,контекст и замыкания, но все равно никак не получалось. Поэтому сначала попробовал сделать это без функции но через bind но bind ведь как вы научили только возвращает функцию, но ее не запускает, поэтому пришлось использовать новую переменную и вызов функции
    const value = logPerson.bind(person1)
    value()

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

    logPerson.bind(person1)()

    потом в уроке увидел что можно использовать call тогда и скобки писать не надо

    logPerson.call(person1)

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

    P.S. даже return не нужен потому что функция не должна ничего возвращать а только выводить в консоль
    свою ошибку со скобками понял тогда, когда даже ничего не написв в функции bind при запуске программы на экране выводилось Person:undefined, undefined,undefined
    мне это показалось странным, как может срабатывать вывод чего либо в консоль, если он реализован только в функции logPerson значит где то она вызывается

    и нашел где! все из-за лишних скобок после имени функции (((

  11. Почему было не объявить несколько переменных между внутренней и внешней функцией? Эти переменные доступны с внутренней функции и не доступны с глобал скоуп.

    function f1 (){

    let a=0, b=0, c=0;

    return function f2(){

    console.log(a+=1, b+=2, c+=3)

    }

    };

    let close=f1();

    close();

    close();

    close();

    По моему это представление замыкания более наглядное. Наочно видно, что мы замкнули переменные a, b, c. С функции close мы достаем эти переменные, которые недоступны с глобал скоуп.

Leave a Reply