Урок 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. Чт...

[@lumeaceaiuluisrl6343]

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

[@r45her]

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

[@andriihelever1793]

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

[@TheLNMA]

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

[@vandrounik_pa_domu]

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

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

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

[@jjjj-wo6np]

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

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

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

[@andTutin]

Жиза

[@dmitrap1982]

lol'

[@alym.aleksey]

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

[@TheRelow]

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

[@DmytroVeleshchuk]

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

[@zmeygorynych5684]

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

[@vitalii.pohoretskyi]

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

[@ЭлизаАрт]

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

[@M0nren]

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

[@JohnDoe-p1y]

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

[@ilnurryazhapov]

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

[@ilyalevtsov9266]

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

[@alexandrelagin5490]

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

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

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

[@SanchoXDE1337]

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

[@User-kn3gv]

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

[@VitalikAwesome]

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

[@samgasper99]

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

[@mineralnone3684]

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

[@accelerator5434]

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

[@RewCSharp]

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

[@Kreator321RG]

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

[@VladilenMinin]

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

[@raminhesenov1376]

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

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

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

[@vladimirww5152]

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

[@overseer7591]

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

[@IgorNovakus]

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

[@paulparker3664]

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

[@temeralin.t]

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

[@petrvictorovich]

Прикоольно!

[@BraentR]

Спасибо

[@VladilenMinin]

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

[@s.konstantin]

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

[@VladilenMinin]

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

[@alexs7931]

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

[@VorobyevAlexander]

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

[@olegsubik]

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

[@Shkur777]

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

[@top-mma-news]

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

[@VladilenMinin]

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

[@top-mma-news]

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

[@andreyperetyatko913]

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

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

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

[@lastfornit]

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

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

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

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

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

[@ivanp7697]

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

[@vanya_hrynkiv]

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

[@Medulla_oblongata01]

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

[@PornerIgor]

Норм так

[@GGSoft2009]

Thanks

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

"name_age" - it `s Magic

[@VladilenMinin]

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

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

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

[@VladilenMinin]

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

[@АлМ-ы8ъ]

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

[@VladilenMinin]

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

[@АлМ-ы8ъ]

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

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

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

[@igori6471]

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

[@navi4046]

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

[@VladilenMinin]

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

[@ayubkhan_dev]

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

[@Denis-hl2yz]

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

[@Chambo015]

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

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

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

[@islambabaev7120]

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

[@RitzCarlton-k8x]

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

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

Спасибо!

[@VladilenMinin]

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

[@ghost8652]

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

[@javokhirrakhimov8241]

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

[@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]

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

[@coolfilms1545]

Дякую!

[@someqwerty3115]

❤‍🔥🔥🔥🔥

[@akhmedmagomedov324]

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

[@LoveleTi]

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

[@Nuzghoul]

15:38 "я как угодно преобразовываю данную функцию". Скорее не функцию, а результат ее выполнения.

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

Когда я проксирую класс (MyClass), у меня в методах этого класса теряется this (становится this = Proxy). Если методы класса объявить, как стрелочные функции, то this сохраняется (this = MyClass), но перестают работать геттеры и сеттеры Proxy. Как быть?

[@Civilizer1976]

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

[@VladilenMinin]

Mindmap хорошее

[@Civilizer1976]

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

[@Civilizer1976]

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

[@wither-it-channel]

Ну я могу ещё раз написать))) Читайте руководство learnjs тема «Proxy». Так не поймёте

[@viktorpoliushko2015]

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

[@eeeMan2]

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

[@big_aim2006]

Как это можно понять!?

[@VladilenMinin]

Практикуясь

[@snakeguy2181]

12:18, зачем здесь "thisArg", что он делает и как, не пойму. Заранее спасибо за ответ.

[@volodymyrdoskochinskiy5032]

Это контекст

[@lpseeen5030]

когда будет практика js

[@annashirinskaya7400]

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

[@maksime833]

на 15:39 ловлю ошибку： fp('Fsqgfa') Calling fn... Log: Fsqgfa app.js:42 Uncaught TypeError: Cannot read properties of undefined (reading 'toUpperCase') Хотя код написан идентично :(

[@Leon-rv2zm]

Странно, у меня все работает. У тебя тоже , кстати, выводится в консоль Calling fn... Log: Fsqgfa значит работает ищи проблему в 42 строчке в файле app.js в твоем сообщении к ошибке буквально сказано, что js не может вызвать метод toUpperCase т.к. твой target.apply(thisArg, args) === undefined

[@maksime833]

@@Leon-rv2zm спасибо, попробую позже проверить

[@sekirogenshiro2210]

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

[@VladilenMinin]

Да, для оптимизации рендеринга графиков

[@Svyatoslav-w2t]

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

[@ani63741]

как "перегрузка" в php)

[@ВИКА-г3о9р]

8:00, смысла не понял в этом коде, тк и без has можно проверять 'name' in op.

[@malcorehardcore]

Смысл не в том, чтобы проверить, есть ли name в op, а в том, что показать как работает has на самом деле и в том, что мы можем переопределить поведение has

[@alexvoronc]

Что ты нажал на 22:29 kzbin.info/www/bejne/pKGTaYqaiJ6Cjsk чтобы форматнуть код?

[@sapfirko1]

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

[@Алексей-т2х8й]

+

[@KostiaBazrov]

А чё с поддержкой браузеров делать 7

[@romanmed9035]

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

[@dmytrodidenko7728]

Что-то это все напоминает исковерканный ООП...

[@frntnd]

Привет спасибо огромное за твои труды, маленькая просьба, сделать хром темным, ночью выжигает левый глаз :) спасибо

[@VladilenMinin]

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

[@mastervision8302]

It's so good

[@arsa946]

Че-то я не понял зачем нужны Proxy! За 5 лет программирования сайтов не встречались может задачи такие.

[@ЧеченскийУголок]

та же фигня.....а начиналось все красиво, обосрался он на этой теме

[@jenyaspace]

Не понятно где можно на практике применять Прокси

[@VladilenMinin]

Для тебя следующее видео

[@geng5650]

Если что то вот промокод на 5%Oo3Ne1pouQ

[@visitingkatrin5620]

так сложно😒

[@AkkayHT228]

Я думал это что-то связанное с прокси-сервером. Блин, нафига так называть то?

[@Скыбыдыщь]

Уроки по js и так понятно, что это не прокст-сервер. Если не разбираешься сам ,то лучше не пиши

[@VladilenMinin]

@@AkkayHT228 Еще один коммент с оскорблением и летишь в бан. Будь уважителен к людям и к контенту

[@VladilenMinin]

Называется так, потому что отражает суть работы. В программировании очень много пересечений по названиям

[@NextgenSocialReptile]

Junior front-end developer пока не планировал

[@dimabonds9850]

ничерта не понтяно

[@bumm1077]

Вместо того, чтобы сделать иммутабельность, в JS придумывают прокси

[@sapfirko1]

Объясните тупому, почему переменная создается через const, а не let ?

[@lizavetameta]

const - единственное в программе (объекты чаще всего если единственные то const)

[@sapfirko1]

@@lizavetameta не теряет ли const свой смысл, если его использовать везде? Ведь надо понимать, было ли важно, чтобы что то было не переназначено

[@lizavetameta]

@@sapfirko1 я давно читала документацию по этому поводу, но точно могу сказать, что 1)var и let - для многократного использования, отличаются только их scopes. 2)const ысегда уникальное и никогда не перезначается (некоторые злоупотребляют этим), но в видео все вроде крайне разумно

[@apa6368]

Не понятно зачем он вообще

[@siskinapiski]

Смотрю на х2 что бы быстро ознакомиться с основами js переодически удивляясь скорости автора

[@BrutChannel]

Абсолютно бесполезная тема

[@bohdankravchuk4396]

Люди которые прям вообще начинающие не смотрите этот курс. Автор показывает не прям азы поэтому это сложно понят людям которые впервые это проходят. То ли учитель из Минина никакой то ли курс предназначен для восстановления в памяти JS // ну или это для тех кто уже на 50% в теме. Лично я по этим видео ничего не научился только время потратил

[@АнтонМешков-ф8х]

Спасибо

[@romanmed9035]

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

[@artemijeka]

Спасибо