Урок 9. JavaScript. Proxy. Объекты, функции, классы. Часть 1

Получить профессию Frontend разработчика -
bit.ly/3xXexT7
Подробнее узнать об обучении в Result School -
bit.ly/3u4DGKG
Бесплатный курс HTML & CSS - bit.ly/3OLh5us
Сделать 5 проектов на JavaScript - bit.ly/3y15Ebn
Я в соц сетях:
Telegram: t.me/js_by_vla...
VK: vladile...
Instagram: / vladilen.minin
Мои паблики по JavaScript:
Telegram: t.me/result_sc...
VK: result....
Instagram: / result.scho. .
JavaScript cообщества:
Discord: / discord
Telegram: t.me/js_by_vla...
Roadmap по каналу:
vladilen.notio...
Урок 9. JavaScript. Proxy. Объекты, функции, классы. Часть 1
В этой части я расскажу про теорию использования Proxy в javascript
Вы узнаете как прокси работает с объектами, классами и функциями
Ссылка на документацию:
developer.mozi...
Сложный JavaScript простым языком:
• Урок 1. JavaScript. Чт...

[@Teslyar75]

Автору большой респект за умение качественно преподносить материал. Коротко и по существу.

[@mels4886]

Первый раз посмотрел - нечего не понял, спустя неделю посмотрел ещё раз, нечего не понял, прошло некоторое время, посмотрел, и снова нечего. Сегодня решил снова посмотреть, но что то подсказывало что на этот раз пойму, и я все понял, на этот раз все было понятно. Владилен ты лучший, продолжай делать такие крутые ролики

[@zahar1979]

что то я сомневаюсь что в 4 раз ты все понял

[@andriihelever1793]

Посмотрел прошлое видео и забыл поставить лайк, и начал смотреть это и что чувство такое как будто забыл что то важное, как вспомнил вернулся, поставил лайк и теперь смотрю дальше!!!

[@vandrounik_pa_domu]

Крутые видео, Владилен! Без твоих стараний мне было бы гораздо сложнее изучать JS, спасибо! Жду новых видео

[@TheLNMA]

Большое спасибо за старание и понятную подачу информации.

[@lumeaceaiuluisrl6343]

Владилен, спасибо ! Я новичок и мне не всегда с первого раза всё понятно, но Вам удаётся сложные вещи так преподнести, что они кажутся не такими уж и страшными) Это талант!

[@r45her]

Тема интересная, но за 2 года хоть раз пригодилось это?)

[@VladilenMinin]

У вас уже есть идеи как применить Proxy?) Примеры я приведу в следующем ролике

[@s.konstantin]

Пока не знаю, может пригодится. Спасибо!

[@VladilenMinin]

@DJ MIAMI Думаю тебе стоит начать с более простых вещей в таком случае

[@alexs7931]

Я думал щас будет пример как сделать свой HashMap аналог Java, формула расчёта hash уже есть в сети, осталось только реализовать механизм поиска коллизий. Спасибо это очень полезные уроки, бывает случаи когда приходится работать со старым кодом, который нужно перенести на новый движок. Так вот с помощью этих примеров можно обернусь все что угодно в красивые, и приятные для использования методы, которые будут брать на себя всю рутину по общению со старым кодом.

[@VorobyevAlexander]

Первым в голову пришло: использовать для отладки....

[@olegsubik]

если я все правильно понимаю, то mobx работает на Proxy. раньше это было типа: "работает? ну и хорошо)". так хоть понимаю что это

[@jjjj-wo6np]

Владилен, вы - невероятный. Огромное Вам спасибо! Лучший учитель в русскоязычном сегменте!

[@ЕвгенийПатрогин]

Спасибо Владилен,у вас очень понятная модель изложения информации.

[@zmeygorynych5684]

Полезный материал, однозначно лайк. Успехов тебе Владилен

[@vitalii.pohoretskyi]

Поддержка иммутабельности дело конечно святое, но когда в обьекта овер 3 вложености и это все нужно постоянно копировать.. Решил добавить в проект библиотеку immer и как оказалось ее функционал построен на прокси, вот и пришло время посмотреть этот урок :) Все просто и понятно обьяснил, спасибо!

[@MrFeedme86]

Вооу, последний пример про age_name_job просто отрыв бошки, невероятно круто!

[@samgasper99]

Жесть он крууут! Смотри брат что он творит!

[@ilyalevtsov9266]

Отличное видео! Надо подумать куда его применять все же.

[@АлександрМаслов-ф1г]

Огромное спасибо за ваш труд, все очень интересно и познавательно... но что я заметил во всех(почти) обучающих видео. Все учат писать код, каким то фишкам, паттернам, синтаксису и т.д. Но мало кто учит программировать, а именно объяснять как это все применяется в боевой задаче, ну или хотя бы видеть какой-нибудь полезный результат от своей программы. Очень сложно все это осознать если ты не понимаешь где это можно применить. Ну и добавлю от себя что самое лучшее это взять для себя какую-нибудь задачу и попытаться ее реализовать(гугля, читая доку и т.д.)

[@arthurhovhannisyan31]

Владилен, давай контент по докеру. Будет просто пушка!

[@JohnDoe-p1y]

Отменное видео! Спасибо, Владилен!

[@РусланДолгов-и4ф]

емко и понятно. спасибо, автор!

[@TrayHardPlay]

Очень большая просьба - лучше начинай подобные уроки с примеров применения. Чтобы было сразу понятно, зачем вообще это нужно, для чего это учить, что оно дает. Потому что иначе смотреть тяжеловато и скучновато. Понятно, что будут те, кто в любом случае досмотрит, но если хочешь максимально всех охватить, то лучше всё-таки начинать как и любые публичные выступления - с актуальности обсуждаемой далее темы или технологии. Энивей за урок спасибо)

[@VladilenMinin]

Я очень думал, как сделать это с прокси и понял, что конкретно в этом случае лучше тот порядок, что я дал Тема не самая простая и начальные примеры могли бы только запутать Но я обращу внимание на это, благодарю

[@multidotha]

@@VladilenMinin все супер! Но я тоже за то, чтобы в уроке был маленький практический пример. Спасибо!

[@orbismala8124]

Спасибо за видео. В конце фишка особенно понравилась.

[@Kreator321RG]

Наверное ты первый кто смог рассказать о Proxy просто и понятно)) Спасибо)

[@VladilenMinin]

Я старался, благодарю)

[@M0nren]

Я поднялся на ступеньку выше благодаря этому видео, спасибо

[@МаксимНырков-у6г]

Спасибо! Ничего не понял)

[@andTutin]

Жиза

[@dmitrap1982]

lol'

[@alym.aleksey]

Потому что он ничего не объяснил

[@TheRelow]

@@alym.aleksey Ничего не объяснил? Как ты себе представляешь "настоящее объяснение"?

[@DmytroVeleshchuk]

Ставлю палец вверх еще не посмотрев!

[@mineralnone3684]

Спасибо за видео! Очень интересно слушать Вас.

[@alexandrelagin5490]

Спасибо, интересное видео. Уже заинтригован следующими видео с примерами Proxy.

[@ЭлизаАрт]

Я не пробовала разобраться в этом всём сама, но видно, что материал сложный и без вашего объяснения было бы тяжко. Спасибо вам за уроки

[@АртурБеленченко]

Благодарю Вас Владилен!) Вы очень толково все объясняете. Жду новых видео)

[@User-kn3gv]

Владилен ты супер, брат.привет тeбe c Еревана!!!

[@VitalikAwesome]

Лучший!!! Продолжай в том же духе.!!

[@overseer7591]

Красавчик и спасибо, ушёл от Фрилансера по жизни!

[@SanchoXDE1337]

Спасибо за труд!

[@IgorNovakus]

Если я не ошибаюсь - при создании стрелочных функций, нельзя перебить контекст родителя в котором она была создана. Тоесть this будет получен от родителя, поэтому их лучше не делать методами объектов и apply работать не будет. А видео топчик!

[@RewCSharp]

Спасибо за урок!

[@ilnurryazhapov]

Здорово продолжай

[@raminhesenov1376]

Большое спасибо за видео!

[@АндрюР-ь2ъ]

Спасибо за твои уроки.

[@АлександрБаскаков-д3ж]

Все никак не могу понять одну вещь: откуда берутся дизлайки? Кто эти 15 человек? Что им могло не понравится? Наверное, эти вопросы навсегда останутся без ответа) Контент сверхмощный. Спасибо за это тебе, Владилен! Особенно радуют те детали, и мелкие фичи, на которые сам бы никогда не обратил внимания и которые не так уж легко найти в учебниках или других материалах для обучения. Дерзай дальше, Владилен!) Не останавливайся и не обращай внимания на эти 15 человек) ибо не ведают они, что творят)

[@lastfornit]

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

[@stanislavmalyshev5209]

Мотивация для создания нового контента +

[@MrAirrussia]

ёмоё вот что бывает, когда не изучаешь новые фишки. Я всё это сам делал через наследование. Зачёт

[@temeralin.t]

вау, классный и необычный пример в конце!! топ

[@vladimirww5152]

Классно! Прокси в JS

[@ЕвгенийЛьвов-о2в]

Спасибо, ты лучший!

[@maksymovych_maksym]

Спасибо труд! Однозначно лайкоцит!!

[@andreyperetyatko913]

Спасибо, что ты есть)) Очень круто обьясняешь)) Я прям все до буквы понял) Хотя педалю на С#

[@danyawyse1933]

10:06 Можно вместо return true перед строчкой delete target[prop] прописать return return delete target[prop]; и будет возвращать true

[@AsVit]

Конечно это очень полезный ролик, и конечно - очень понравился! :-) Спасибо большое!!!

[@paulparker3664]

спасибо, очень нравится

[@alexcool]

Благодарю за доходчивые видео, Владилен. Хочу обратить Ваше внимание на точность формулировок ибо от Вас, как от учителя зависит ясность мыслей учеников. 8:45 "Данный метод ПОЗВОЛЯЕТ нам удалять...". 1. Метод не может нам позволять или не позволять делать что-либо, ибо не одушевлен. Это Мы, с его помощью можем что то делать. Фраза "Метод позволяет..." делает программиста рабом метода (машины), тогда как фраза "С помощью метода мы можем ..." наделяет нас руководящий функцией, а метод остается всего лишь инструментом в умелых руках. 2. Этот метод не удаляет, а вызывается в ответ на попытку удалить проп. Это утверждение более истинное, ибо мы можем перепределить метод таким образом, что он не будет ничего удалять или будет удалять что то другое. Обратите внимание, как формулировка расширяет наши возможности и закладывает возможности для нестандартного мышления. Еще раз благодарю за видео. Надеюсь на понимание.

[@sekirogenshiro2210]

мудрено!

[@top-mma-news]

Я новичок в изучении жс, тема конечно для меня очень сложная, но то как ты объясняешь в принципе понятно, просто пока не понимаю как это все применять на практике и такое бы уж точно не повторил, надеюсь все придет с опытом. Спасибо!

[@VladilenMinin]

Следующее видео для тебя как раз

[@top-mma-news]

Владилен Минин посмотрел следующее видео, тяжеловато конечно, буду пересматривать и вникать, спасибо за материал!

[@ДанилДмитриев-я5м]

@@top-mma-news как успехи

[@petrvictorovich]

Прикоольно!

[@DmitryBudnitski]

Классные видосы! Спасибо!

[@АртёмКабанов-й4з]

Спасибо. Ничего не понял, НО! Очень интересно!

[@Shkur777]

Вот последняя конструкция очень заинтересовала

[@vanya_hrynkiv]

комментарий лайк, подписка, колокольчик

[@brick2h720]

По поводу подачи материала вопросов нет, но в целом даже и не знаю что сказать.. нужно мыслить в парадигме Владилена и иметь за плечами не один год опыта, что бы понимать зачем это все нужно, к чему эти детальные обертки..

[@VladilenMinin]

Свой канал я позиционирую не как для новичков. Этот плейлист - самый простой материал, что будет на канале

[@kirillgavrilov9681]

@@VladilenMinin , отлично! Спасибо тебе за такой контент и подачу материала

[@mukhammadrustambayev2051]

все понятно, Proxy типа декоратор.

[@VladilenMinin]

Да, можно и так сказать. Но людям из чистого JS не знаком концепт декоратора)

[@mukhammadrustambayev2051]

@@VladilenMinin от вас жду урок про vue-class-components, vue-property-decorator

[@VladilenMinin]

@@mukhammadrustambayev2051 Будет Я сейчас курс доделываю и потому немного притормозил с ютубом. Временно

[@mukhammadrustambayev2051]

спасибо :)

[@Keep_quiet_1]

Пасиб дядь... Помог

[@АндрейСафин-й7м]

Лучший!

[@artem031294]

Самый, на мой взгляд, очевидный пример использования - это написание обертки для различного функционала. Как пример: API мессенджеров, пиш.ем свою Proxy обертку с методами, а target-ом указываем классы мессенджеров (Vk, Te, WA). Причем в этих классах, методы обертки могут быть не реализованы

[@VladilenMinin]

Хороший частный случай. Абсолютно верно Если пойти дальше, то любые API запросы можно проксировать. Далее с помощью прокси делать интерсепторы и получать новый axios, который вроде на прокси и построен)

[@artem031294]

@@VladilenMinin на столько глубоко не копал, для меня пока axios - это замена $.ajax ))

[@artem031294]

@@VladilenMinin а ещё похоже на Mock объекты в PHPUNit

[@ИльяИваник-ф8ф]

в методе has можно было использовать Object.keys(target).includes(prop)? по последнему примеру в видео: разве через обычный геттер для класса, о которых ты рассказывал ранее, нельзя сделать то же самое?

[@АлМ-ы8ъ]

Владилен, давай контент по Redux-Saga. Будет просто пушка! )

[@VladilenMinin]

Есть немного на канале

[@АлМ-ы8ъ]

@@VladilenMininДа есть немного, я недавно смотрел твой миникурс (в одном видео) по редакс. Показалось по саге как то бегло, решил сам еще немного подтянуть. Мало нормальной инфы

[@ivanp7697]

збс внатуре четко!

[@johnstrayk5208]

Владилен, или может кто-другой, почему если из объекта person удаляешь поле name, метод has при вызове поле name все равно возвращает true? По идее в объекте на который ссылается прокси этого поля нет. И обратное из массива удаляем name и возвращаем name в персон и has возвращает false. Получается в prop попадает сам созданный массив, а не прокси сформированный на основе объекта person?

[@GGSoft2009]

Thanks

[@dmitryzarubin4835]

А чем отличаются get и set в Proxy от свойств в Object.Create?

[@ignatmv.8654]

Часть методов прокси обязательно должны возвращать инварианты (set, deleteProperty и далее по спецификации).

[@ssurrokk]

Спасибо

[@РузельАбдурахманов]

"name_age" - it `s Magic

[@VladilenMinin]

Прокси творят чудеса)

[@РузельАбдурахманов]

Сделал как на уроке, похвалился сотруднику ))) он фулсток по js, и он был приятно удивлён!

[@VladilenMinin]

@@РузельАбдурахманов здорово! Ты его удивишь, если посмотришь следующее видео)

[@РоманКоротков-з3ц]

Владилен, значения присваиваются и без сеттера. Кроме ошибки он получаетя не зачем не нужен, также можно с сеттером отдним работать без геттера.

[@КамильМиникеев-г5ъ]

А в чем разница вывода функции в proxy: return target.apply(thisArg, args) и return target(args) ? Вроде одинаково все работает, но 2 способ короче

[@accelerator5434]

У меня за окном взрывы, но мне без разницы я учу JS

[@НазарВрачинський-з3ж]

Не понятен смысл передачи в качестве аргумента thisArg при проксировании функции. Прочитал, что это контекст this. Но, если добавить в хэндлер вывод в консоль, что такое thisArg, получаю undefined. При этом, когда делаю return target.apply(thisArg, args) вместо thisArg можно указать все что угодно, пустой массив/объект, любую строку, число ... и при этом все работает.

[@igori6471]

Вот-вот, это такой непонятный момент, а он его не объясняет, вроде как будто по-умолчанию понятно должно быть...

[@АлександрМелянюк-ц9ю]

Спасибо!

[@VladilenMinin]

Приятного просмотра)

[@coolfilms1545]

Дякую!

[@navi4046]

Спасибо за твои уроки, но я так и не понял когда это можно применить

[@VladilenMinin]

Следующее видео с примерами

[@someqwerty3115]

❤‍🔥🔥🔥🔥

[@PornerIgor]

Норм так

[@Denis-hl2yz]

Интересно почему не оперируешь терминами АОП, парадигмами ООП, ты же их реализовуешь) Или у фронтендщиков еще так не принято или я ошибаюсь?

[@Chambo015]

set должен вернуть true при успешной установке значения

[@ghost8652]

Если я правильно понял, то посредством Proxy, возможно осуществлять инкапсуляцию и полиморфизм в классах?

[@mihhailk4749]

Ochen kruto.

[@ayubkhan_dev]

Извините у вас есть шпаркалка по JS?

[@cyclopentanpergidrophenantren]

интересно, а proxy воздействует на объект изменяя его или клонируя. Я так понимаю с помощью данного класса можно реализовать метод фабрика и реализовать блокирование множественного подключения к БД? Или же это закос на Reflection class api. Почему приходится прибегать к proxy, а не реализовать данную вещь как метод класса. А может это призрак полиморфизма? Я логику понять не могу

[@LoveleTi]

Получается тоже самое можно сделать через наследование ?

[@Medulla_oblongata01]

Спасибо за урок. Но если честно, ничуть не просто. Мне кажется, надо на примерах из реальных проектах показывать, зачем это вообще нужно?

[@romanmed9035]

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

[@АфанасийРылеев]

Извините за тупой вопрос, а разве просто через классы то же самое сделать нельзя?

[@inoplanetyanya]

Вы нашли для себя ответ на этот вопрос? Меня он тоже мучает.

[@RitzCarlton-k8x]

Этот синтаксис все еще актуален?? или уже некоторые не рабочие?

[@viktorpoliushko2015]

14:00 Очень умно называть функцию так же как и HOF, ни разу не запутывает

[@Svyatoslav-w2t]

Спасибо, ты крутой)

[@akhmedmagomedov324]

зачем нкжен deleteProperty усли свойства и без нее удаляются просто по команде delete op.prop?

[@Стас-с4ю5т]

Вопрос , а в чем разница между Proxy и аксессорами (надеюсь правильно написал ?

[@islambabaev7120]

У Proxy побольше методов

[@PeterShumski]

Зачем что-то перехватывать, чтобы изменить логику? Почему нельзя изначально реализовать необходимую логику?

[@JohnDoe-jd6vn]

Как я понял,это актуально для фреймворков или библиотек. Для собственного кода вряд-ли понадобится.

[@inoplanetyanya]

Вот у меня такой же вопрос встал. Вы нашли на него ответ?

[@PeterShumski]

@@inoplanetyanya Для разных архитектурных штук. Например, ru.wikipedia.org/wiki/%D0%97%D0%B0%D0%BC%D0%B5%D1%81%D1%82%D0%B8%D1%82%D0%B5%D0%BB%D1%8C_(%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD_%D0%BF%D1%80%D0%BE%D0%B5%D0%BA%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F)

[@JohnDoe-p1y]

Например: Объект имеет произвольное свойство, так же есть метод возвращающий это свойство обработанным и мы хотим пользоваться только обработанным результатом. Но теперь мы можем пользоваться и напрямую обращаясь к свойству и через метод что дает разные результаты. А использую прокси мы можем быть уверены что получим только валидный результат.

[@davtian1674]

set () { return Object.keys(target).indexOf(prop) !== -1 // true or false }

[@annashirinskaya7400]

Мне не понятно где и когда на практике нужно иcпользовать Proxy и какие у него преимущества перед обычными классами в JS (там тоже есть геттеры и сеттеры)

[@KostiaBazrov]

Монстер

[@Civilizer1976]

У-у-ф - это только половина из плейлиста... чем дальше в лес - тем страшней. Нужно идти до конца. Лучше всего конечно для понимания это всё не только конспектировать, но и как-то в схемы загонять. Типа стрелочки, разного цвета, свойств от параметров к функциям, особенно в замыканиях и проч. Какое приложение для этого всего подойдёт?

[@VladilenMinin]

Mindmap хорошее

[@Civilizer1976]

@@VladilenMinin О, да, судя по превью - то что нужно, благодарю!

[@Civilizer1976]

@@VladilenMinin Сначала показалось - то что надо, но потом понял что не для этого - для достижения какой-то цели, вроде того. Посмотрел многое другое и пришёл к результату, что нужен инструмент по построению графов, включающий в себя UML стандарт и блок-схемы(flowchart). Т.к. работаю в Linux, то особого выбора нету - остановился на DIA Diagram Editor. Сначала не понравился интерфейс, но поковырявшись пару часов - начал понимать его универсальность и в принципе, наверное можно в нём всё реализовывать.

[@Anton_Kac]

Владилен я не понимаю уроки по JS напиши мне как подтянуть JS до прохождения курса. Спасибо

[@javokhirrakhimov8241]

Может быть лучше использовать QuokkaJS вместо браузера раз все равно на VS Code?)