Урок 10. JavaScript. Proxy. Примеры. Часть 2
Vložit
- čas přidán 8. 09. 2024
- Получить профессию Frontend разработчика -
bit.ly/3y15SiJ
Подробнее узнать об обучении в Result School -
bit.ly/3ymhiic
Бесплатный курс HTML & CSS - bit.ly/3ypNAsU
Сделать 5 проектов на JavaScript - bit.ly/3u4ODvJ
Я в соц сетях:
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...
Урок 10. JavaScript. Proxy. Примеры. Часть 2
В ролике я покажу 3 практических примера с классом Proxy
Будет создана функция задающая значение по умолчанию
Функция создающая приватные поля в объекте
Расширение функционала массивов для оптимизации поиска
Исходники к видео:
github.com/vla...
Сложный JavaScript простым языком:
• Урок 1. JavaScript. Чт...
Ничего не понял, но очень интересно. Необходимо пересмотреть уроки по Proxy, и обратно пересмотреть.
Тоже самое, пхпх
Большое спасибо за труд. Как в меме (ни**я не понял, но очень интересно). Пересмотрю уроки, попрактикуюсь, разберусь. Не просто какие - то стандартные простейшие задания, а что - то посложнее. Такого действительно качественного и полезного контента мало в ru youtube
Взрыв мозга) с трудом представляю как бы это применить на работе) кроме как на собеседовании
я могу сказать что у автора самый приятный голос и дикция для рассказа такого контента
Мало кто знает, что для этого эффекта я занимался улучшением голоса с инструктором и почти каждый день говорю скороговорки. Год назад все было совсем иначе )
@@VladilenMinin подскажи как называется такой инструктор? Может в будущем тоже захочу таким заняться
@@doomymax577 "Специалист по речевым коммуникациям"
Если проще, преподаватель риторики
Могу дать контакт хорошего преподавателя, если ты из Питера)
@@VladilenMinin ну можно дать контакт только если он онлайн даёт уроки, я не из Питера просто
@@doomymax577 vk.com/id11983233
Понравилось, особенно с findById.
Спасибо!
Прокси - огонь! То, что нужно для перебора данных, что массивов, что объектов! Спасибо, Владилен, как всегда зачетный контент!
Индексированный массив - это супер-нужная вещь! Спасибо! Поискал в интернете - нигде такого не нашёл.
любой массив - индексированный.лол
здесь же массив пределан в объект, где ключи - айдишники элементов массива
@andTutin ты, видимо, не понимаешь значение слова index. Это упорядоченный словарь ключ-значение. В обычном массиве ты не можешь искать по любому из полей объекта, не перебрав весь массив этих объектов. А если есть индекс, то поиск моментальный. Ты, конечно, в данном примере мог бы айдишники заменить на номер элемента в массиве. Но что, если у тебя айдишник был бы вида 7fddf75adsf090? Какому бы элементу массива ты его присвоил и как бы нашёл? Можно, конечно, вообще не использовать массив, а сразу использовать объект. Но у объекта нет порядка следования элементов, нет методов pop, shift и т.п. Всё зависит от задачи.
@@-dubok- то что сделано в видео - обычный объект.
@@andTutin ты несёшь чушь. Почитай про то, что такое прокси. У них есть особые функции, которых нет у простых объектов.
Спасибо! Классные видео! В уроках и курсах Владилена всегда много практики, всегда что-то новое, современное. Это вообще круто! А то по другим курсам, урока в интернете, всегда куча теории и в конце: "А сейчас мы напишем игру змейка)", или слайдер, всё , это потолок! Спасибо ОГРОМНОЕ!
Я нереально рад, что подписчики ценят нестандартные, более сложные и интересные вещи
Сам когда учился, не понимал, почему все показывают одно и то же. Хочу нарушить порочный круг и придумывать сложные элементы)
Спасибо, Владилен! Этот курс отлично прокачивает мозг ))
Отличное видео.
Раскажите о Reflect, пожалуйста
Поддерживаю!
upd. Сорри - Автор канала ответил ниже - "О рефлекте в видео про ES6"
Ну , как лично я понял , это фактически тоже самое что Object , тоесть методы в Object и Reflect , очень похожы ,только пару методов в reflect отличаются от Object . Допустим , чтобы получить ключи обьекта , надо написать Object.keys(массив) а в случии с Reflect это Reflect.ownKeys(массив).
Пока сложновато, пересмотрю ещё несколько раз позже.
разобрался?(два месяца прошло. Не подкалываю, мне действительно интересно)
@@zonnebluster2015 Пока не разобрался. Мне просто на практике ни разу не пришлось столкнуться с тем, о чём говорится в видео. Поэтому, видимо, пока реальной необходимости не возникнет, так и не доберусь до этой темы.
@@vovergg угу. Аналогичная ситуация и у меня. Пока не столкнешься в практическом измерении, вся эта теория до одного места. Курс у автора канала хорош тем, что можно быстро пробежаться по видосам, поверхностно ознакомиться, и узнать, что такие штуки вообще существуют в природе js. Удачи в освоении!
@@vovergg а вы уже работаете, если да, то на какой позиции. Спасибо
@@user-ru4ey6yl2j Я пока не работаю программистом, просто пилю свои проекты для потфолио. Видимо, пока мой уровень не достиг того, где может понадобится данная тема.
Владилен, спасибо. Ранее ге было необходимости работать с Proxy, поэтому в эту тему не вникал. Вот решил подтянуть пробелы и твое видео, за час все разложило по полочкам. Очень понятно, доступно и не скучно. Спасибо за труд.
Весь урок у меня был взрыв мозга, к концу все сошлось и стало понятно )) спасибо за урок!
В принципе понятно все, в конце только начал немного теряться когда дошло до подключения switch
Спасибо за видео
Первый пример - понятно! Второй пример - сложно, но разобраться можно. Третий пример - ... ау... где я!????
Потом еще раз посмотрю на свежую голову)
Владилен, спасибо!
Если бы я знал о Proxy раньше, это сделало бы мой код куда оптимальнее.
8:50 кажется у меня сейчас чайник треснет 🤕
Видимо после каждого урока надо практику.
Тоже самое голова болит 😅
все когда-то бывает впервые)
Думал Promise сложная тема, оказывается нет:)
Владилен, большое спасибо за твои труды!!!
Посмотрел все видео с желто-синим фоном. Автор великое спасибо. Итог для себя по JS. Синтаксический сахар - нет не слышал. Прокси - это, по моему мнению, костыль в отсутствии человеческого ООП и нормальных модификаторов доступа к методам и свойствам класса. Понравилось появление extends, static. Есть реализация new Map, new Set похожую на Python. Итог для себя такой: на данный момент проще обработать все на серверных языках и отдать чистую информацию для JS, а не городить Proxy
понятные и доступные примеры!
9:00 данная проверка выполняется за счёт НЕ ownKeys(), а за счёт has(). Проверить можно вызывая concole.log в данных методах тригеря их посредством get()
Здраствуйте!) Это значить что можно опустить ? Тогда какую функцию выполняет этот код?
Спасибо, ты крут чувак!!!
Большое спасибо за труд! Очень интересно!
Спасибо за урок!
Спасибо за урок! Познавательно!
Отличный канал!!Спасибо!
Спасибо
Чтобы это понять, нужно применить, и не раз желательно.
Полезно! Спасибо!!!
Супер! Спасибо!
Круто! Давай теперь про генераторы.
Могу и про них записать, но как то я дальше теории никогда с ними не работал)
Крайне редко встречаются на практике. Особенно после введения async await
В третьем примере замена arr[prop].call(arr, item) на arr.push(item) сделает код более прозрачным, сохраняя ту же функциональность.
очень полезно, спасибо
Спасибо. Красиво объяснил все.
вот еще вопрос по последнему примеру, почему пуш, гет, и прочие функции нужно реализовывать внутри еще одного прокси? почему нельзя этого сделать просто рядом с констрактом?
Задался вопросом в чем конкретное такое отличие прокси от геттеров и сеттеров, ведь они срабатывают так же при чтении и записи, хотелось бы в красках о тонкостях.
Отличается тем, что в прокси реализовано много "ловушек" которые позволяют, не только устанавливать и получать значение, а отслеживать удаление, проверку на наличие, итерации и.т.п так же, прокси позволяют использовать ловушки для классов и функций.
@catsapp animation как бы можно, но тогда надо переписывать сам объект. То есть изначально в объект закладывать этот функционал. Причем в каждый объект! Но поскольку есть задача не менять исходные объекты, а лишь добавить "слежение" за ними - прокси идеально для этого подходят. Так работает реактивность во Vue 3 - програмист создает только то что ему надо, а Vue оборачивает это в прокси чтобы следить за изменениями.
@@Svetoz спасибо за такой коммент. Только начал вникать во vue, закреплю тему прокси посильнее раз такие дела)
Отличный урок!
В начале, всё было более-менее понятным, но под конец что-то всего навалилось и запутался, там где со switch. Пересматриваю третий раз... А так спасибо за ваш труд.
Спасибо за видео. Очень интересно и понятно рассказываешь. Уже подписался. )) Буду следить за каналом. Хочу освоить JS
Добро пожаловать)
проксирование классов очень похоже на наследование классов, по сути мы при наследовании тоже можем все методы оверрайдить и смысл будет тот же. Например кейс с оптимизацией из видео легко имплементировать через IndexedArray extends Array. Или я что-то упускаю?
Очень наглядные примеры, я всё поняла, большое спасибо за урок
Отлично, спасибо)
Спасибо, посмотрим.
это все хорошо, но у Proxy нет поддержки в IE, кому -то это может принципиально, так же для него нет полифилла. Го коммент вверх, чтобы люди были в курсе. Due to the limitations of ES5, Proxies cannot be transpiled or polyfilled. Also it's not supporting in IE.
nu net i net, komu ne pofig na tvoi ie, komu principialno - te prosto ne budut ispolzovat proksu, gospodi, azh na english napisal, ne perejivai tak))) tembolee 4to v etom godu winda perestala officialno podderjivat etot kusok parashi))
Какие идеи есть у вас для применения Proxy?
может попробовать получить (перехватить) какие то данные с сервера и вывести, а так для меня пока что темная тема ))
@@mushnikov35 Да, такое можно реализовать
Концепт называется interceptor и в том числе его можно сделать на прокси)
Если не ошибаюсь axios так и сделал
Например парсиг данных(различные загрузки), где есть необязательные свойства. Очень в тему будет defaultValue.
Для добавления данных в redux и последующей работы с ними
спасибо огромное
было круто, спасибо
Не сталкивался раньше с осью координат fmkewf
Спасибо!
спасибо!
Не понимал прокси, со 2 раза понял, теперь интересен Reflect
Конечно все очень круто, но последний пример Optimization это жесть... надо бы сразу такое предвидеть и использовать new Map, либо конвертировать в new Map
А почему вы не используете API JS для свойств объектов чтобы скрыть их от перебора ?objectDefineProperry enumerable
@Владилен Минин, как перекрыть push понятно. А как можно перекрыть присвоение. Т.е. допустим у нас есть элемент массива users[0]. Если я сделаю users[0] = {...} то по этой ссылке будет уже другой объект, И если у нас была где либо "связь" то она оборвется. А я хочу, например, что б при таком присвоении исправлялся сам объект. Т.к. id оставалось прежним, а поля name, age.... изменялись... Т.е., по сути заменить на users[0]['name'] = item['name']
Использовать set
@@VladilenMinin точно.... тормознул я.... :) спасибо
хз, мб в движке js есть встроенная оптимизация для метода filter, но на массиве в 100.000 объектов работает моментально..
Круто, спасибо, как всегда на высоте!
Короче год назад писал корзину на JS. Было стыдно за свой код потому что плохо знал этот язык. Ща просмотрел эти видео и мне стыдно вдвойне))))
Мы все с чего то начинали)
В последнем примере долго не мог понять почему же не работает users[0], а ещё default в VS code обозначается как недостижимый код.
Думал может ошибка в точках с запятой, ведь кроме них я писал всё 1 в 1, вроде нет.
Сравнил в ориг. кодом и сделал всё точь в точь, но код по прежнему не работает. Ладно, сравнил коды онлайн и вижу что вместо default у меня написано dafault.
Вот такая вот история. Морали не будет.
Думаю применение proxy фактически безгранично, нужно только научится реализовывать на практике(нихуя не понятно, но очень интересно)
12:11 а при вызове самого объекта через консоль _uid можно скрыть?
Полезное. Очень полезное видео.
На 12.18 так в чем же приватность, если обратившись к объекту видны все его поля и свойства? Как скрыть _uid например при вызове объекта data?
разобрался?) или нужно ответить?
@@melitopol_Russia ответь пожалуйста)))
получается что это функции для доступа к объектам. но ведь тоже самое можно сделать и в функции из которой происходит обращение
15:33 в чем проблема использовать computed property names?
Зная id можно просто выводить userData[id-1]
честно говоря не понял вот это место: (prop in receiver). как prop могло попасть в receiver? если бы вместо receiver был вызов ownKeys - я бы понял, а так нет. видимо С++ мешает)
Если уж действительно будет большой массив по которому долго бегать. может тогда в индексе хранить id, а не весь объект
B последнем примере (Proxy для Array) непонятен один момент. .Bо внутреннем вызове Proxy в методе get() для случая prop = 'findById' каким образом во внутрь передается значение id ?
(return id => index[id]) ???
Kаким образом при вызове метода findById(11) он определяет, что id =11. Ведь во внутрь передается только значение prop. (prop = 'findById' ) ???
Пример Optimization, многие люди не поняли, потому что вы его зачем-то сильно усложнили запихав new Proxy внутрь другого new Proxy. Я понимаю, что надо было сделать замыкание на переменной indexedArray, но почему было просто не обернуть вложенный new Proxy в функцию?
const createIndex = target => {
const indexedArray = {}
target.forEach(item => indexedArray[ item.id ] = item)
return new Proxy(target, {
get: (target, prop) => {...}
set: (target, prop, value) => {...}
})
}
const indexedAarray = createIndex([...])
Пример ради проксирования конструктора
Крут
а можно ли при помощи прокси следить за каким нибудь браузерным обьектом? ну например привязатся к location и каждый раз когда pathname меняется, выдавать какой нибудь консоль лог например? или прокси работает только когда этот обьект дергает именно мой код?
Сложновато но интересно!!!
По сути в примере был реализован функционал записи массива в хэш таблицу. При первом обращении мы присваиваим элементу массива его уникальное имя в хэш таблице, при повторном обращении используем поиск по этому имени. Я правильно понял?
Да
@@VladilenMinin Владилен, большое спасибо за ответ.
Так а как достучаться к этому приватному полю?
1) this._uid будет работать в методах объекта или геттер тоже не даст?
2) в чем смысл void 0 вместо undefined? Меньше печатать? так у всех автодополнение.
Сложновато (: Когда это в реальных задачах необходимо?
А зачем нужен объект прокси то вообще? Хэндлеры же можно и в основном классе определить. Можете прямо рабочий кейс расписать?
Концепция прокси в JS очень напоминает расширяющие методы в C#.
в чем то напомнил Наследования из ООП
привет, что должен уметь делать джуниор фронтенд или мидл (это только уметь делать анимации, или нечто большее?) пожалуйста дайте кто-то ответ
Документация к этому видео: learn.javascript.ru/proxy
Наверное нужно было ещё добавить что это чисто учебный пример, и не делайте так на реальной работе)
Мозг сломан))) Точнее, Владилен все хорошо объясняет, но для обучающегося трудно представить, когда же применять такие штуки в жизни... А без понимания трудно запомнить. Но концепция понятна - менять стандартное поведение любого объекта, а в ЖС все объекты
не понимаю зачем здесь "arr[prop].call(arr, item)" Call, и так ведь массив передается аргументом в get(arr, prop)
Наверное это(именно) видео всё-таки не для обучения, а для более широкого ознакомления с возможностями. Конечно функционал полезный и данный случай может пригодиться в жизни, но если учиться по таким видео - жизни не хватит. Сначала - до 20 - й минуты всё конспектировал в коде и пытался парралельно прочитать всё что относится к данному случаю(причём это заняло пару вечеров ) , но потом плюнул и просто повторял весь код за автором. И только в конце понял что к чему и зачем. Мягко сказать сложновато. Всё чаще посещают мысли - "а оно тебе надо?", но нужно идти до конца. Более того, желательно и практические задания из плейлистов автора проделать. Может это сейчас кажется так сложно.
друг, как там успехи?
Может быть у меня немного глупый вопрос, но зачем тогда использовать Декораторы, если есть Proxy ? Просто как по мне, то Proxy намного понятнее и удобнее использовать
Как это написать с типизацией TypeScript??
1. почему Reflect.ownKeys(obj), а нe Object.keys(obj)?
2. я повторял ваш код и при тестировании у меня получается, что проверка get: (obj, prop, receiver) => (prop in receiver) ? ... - работает через "has: (...)", а не через "ownKeys: ...", как вы сказали на 9:08
3. можно ли receiver как-то получать в других методах, кроме get?
P.S. c 19:35 перестал что-либо понимать, хотя до этого просмотрел все уроки, разобрал их и вроде что-то даже понял.
Что значит: arr['push'].call(arr, item);?
почему .push метод попал в геттер?
object.property - перехватывается в Proxy.get(), но в теории ранее вы нигде не сказали, что object.method(data) - тоже перехватывается через Proxy.get()
Сколько учил JS , все темы давались легко и с первого раза, но Прокси пока очень напрягает.Насколько понял оно служит для обработки некой логики перед результатом взаимодействия с обьектом/функцией/классом ? или ещё что?
В целом да
@@VladilenMinin Доброго времени суток, Владилен. Ответьте пожалуйста, как работает деструктуризация (тайминг 17.27) когда вы аргументы в ловушке construct, которые собираются в массив, дополнительно заключаете в массив [args], а в итоге массив получается в первозданном виде???
@@user-co5lf6jk4b Здравствуйте. Вы уже разобрались? А то я тоже что-то не могу понять, зачем это было сделано.
Не запускался код несколько раз проверял, потом открыл исходник-вставил-не работает
Подскажите, пожалуйста, что за расширение для VSC, у Вас установлено, которое раскрашивает скобки в разные цвета? Спасибо.
Color bracket colorizer
подскажите плз, весь этот плейлист нужно для джуна знать? или со временем и опытом научусь применять это.
ну че там, узнал?)
Появился небольшой вопрос, почему в начале видео, Прокси withDefaultValue после get двоеточие, это же вроде должна быть функция а не св-во?
потому что метод оформлен в виде стрелочной функции. Можно написать в привычном виде get() {}
Почему prop тоже самое что и push на 21:42?
Кто нибудь объясните. Зачем делать это, если есть обычный геттер/сеттер?
@Владилен Минин xoroshee video, tolko ia v konce ne ponial smisla etogo podxoda s masivom obiektov.
Mojete li vi prosto skazat?! smisl poslednego proxy bilo razrabotat tak nazivaemi masiv obiektov v kotorom budet naxodit i hash tablica chtob ne begat po vsem elementam ne dostavat id i t dalee!!!!???
Почему строчка arr[prop].call(arr, item) добавляет элемент в конец массива users? Хотелось бы прояснения, как это работает.
потому что у всех массивов по дефолту есть метод push, т.е. это и есть тот самый проп 'push', который мы вызываем самостоятельно в ловушке методом call. Можно не использовать метод и написать просто arr[prop](item), а так это то же самое, что и вот этот код: const arr = [0, 1, 2, 3]; arr.push.call(arr, 4).
@@lastchancehider спасибо бро за то что растусовал всё, плиз объясни ещё, может знаешь, зачем возвращать стрелочную ф-цию в кейсе push?
@@user-xc2zz5dq7r потому что Вы вызываете именно эту ф-цию когда пишете users.push({ id: 55, name: 'Test' }).
сделайте так:
const test = users.push;
test({ id: 55, name: 'Test' })
Идет обращение к полю push, а это поле возвращает ф-цию, которую Вы сразу же и вызываете
Значит ли это, что Proxy это High Ordered Component ?
почему push был реализован в get?
Push ведь устанавливает новое значение, а не берёт готовое
То есть его нужно было реализовать в Set или я не прав?
Push просто как свойство объекта, потому гет. Но возвращаю функцию с логикой
Генераторы и функции обвертки, можно?
Думаю да, сделаю