Урок 9. JavaScript. Proxy. Объекты, функции, классы. Часть 1
Vložit
- čas přidán 9. 07. 2019
- Получить профессию Frontend разработчика -
bit.ly/3xXexT7
Подробнее узнать об обучении в Result School -
bit.ly/3u4DGKG
Бесплатный курс HTML & CSS - bit.ly/3OLh5us
Сделать 5 проектов на JavaScript - bit.ly/3y15Ebn
Я в соц сетях:
Telegram: t.me/js_by_vladilen
VK: vladilen.minin
Instagram: / vladilen.minin
Мои паблики по JavaScript:
Telegram: t.me/result_school_it
VK: result.school
Instagram: / result.scho. .
JavaScript cообщества:
Discord: / discord
Telegram: t.me/js_by_vladilen_chat
Roadmap по каналу:
vladilen.notion.site/Roadmap-...
Урок 9. JavaScript. Proxy. Объекты, функции, классы. Часть 1
В этой части я расскажу про теорию использования Proxy в javascript
Вы узнаете как прокси работает с объектами, классами и функциями
Ссылка на документацию:
developer.mozilla.org/en-US/d...
Сложный JavaScript простым языком:
• Урок 1. JavaScript. Чт...
Спасибо Владилен,у вас очень понятная модель изложения информации.
Большое спасибо за старание и понятную подачу информации.
Крутые видео, Владилен! Без твоих стараний мне было бы гораздо сложнее изучать JS, спасибо! Жду новых видео
Владилен, вы - невероятный. Огромное Вам спасибо! Лучший учитель в русскоязычном сегменте!
Полезный материал, однозначно лайк. Успехов тебе Владилен
Отменное видео! Спасибо, Владилен!
Спасибо, интересное видео. Уже заинтригован следующими видео с примерами Proxy.
Посмотрел прошлое видео и забыл поставить лайк, и начал смотреть это и что чувство такое как будто забыл что то важное, как вспомнил вернулся, поставил лайк и теперь смотрю дальше!!!
Первый раз посмотрел - нечего не понял, спустя неделю посмотрел ещё раз, нечего не понял, прошло некоторое время, посмотрел, и снова нечего. Сегодня решил снова посмотреть, но что то подсказывало что на этот раз пойму, и я все понял, на этот раз все было понятно.
Владилен ты лучший, продолжай делать такие крутые ролики
что то я сомневаюсь что в 4 раз ты все понял
Спасибо за видео! Очень интересно слушать Вас.
Спасибо за труд!
Лучший!!!
Продолжай в том же духе.!!
Спасибо труд!
Однозначно лайкоцит!!
Спасибо! Ничего не понял)
Жиза
lol'
Потому что он ничего не объяснил
@@alym.aleksey Ничего не объяснил? Как ты себе представляешь "настоящее объяснение"?
Ставлю палец вверх еще не посмотрев!
Спасибо за твои уроки.
емко и понятно. спасибо, автор!
Отличное видео! Надо подумать куда его применять все же.
Спасибо за видео. В конце фишка особенно понравилась.
Благодарю Вас Владилен!) Вы очень толково все объясняете. Жду новых видео)
Классные видосы! Спасибо!
Владилен, спасибо ! Я новичок и мне не всегда с первого раза всё понятно, но Вам удаётся сложные вещи так преподнести, что они кажутся не такими уж и страшными) Это талант!
Тема интересная, но за 2 года хоть раз пригодилось это?)
Большое спасибо за видео!
Прикоольно!
вау, классный и необычный пример в конце!! топ
спасибо, очень нравится
Спасибо за урок!
Здорово продолжай
Конечно это очень полезный ролик, и конечно - очень понравился! :-) Спасибо большое!!!
Спасибо, ты лучший!
Я поднялся на ступеньку выше благодаря этому видео, спасибо
Владилен, давай контент по докеру. Будет просто пушка!
Владилен ты супер, брат.привет тeбe c Еревана!!!
Я не пробовала разобраться в этом всём сама, но видно, что материал сложный и без вашего объяснения было бы тяжко. Спасибо вам за уроки
Очень большая просьба - лучше начинай подобные уроки с примеров применения. Чтобы было сразу понятно, зачем вообще это нужно, для чего это учить, что оно дает. Потому что иначе смотреть тяжеловато и скучновато. Понятно, что будут те, кто в любом случае досмотрит, но если хочешь максимально всех охватить, то лучше всё-таки начинать как и любые публичные выступления - с актуальности обсуждаемой далее темы или технологии. Энивей за урок спасибо)
Я очень думал, как сделать это с прокси и понял, что конкретно в этом случае лучше тот порядок, что я дал
Тема не самая простая и начальные примеры могли бы только запутать
Но я обращу внимание на это, благодарю
@@VladilenMinin все супер! Но я тоже за то, чтобы в уроке был маленький практический пример. Спасибо!
Лучший!
Классно! Прокси в JS
мудрено!
Поддержка иммутабельности дело конечно святое, но когда в обьекта овер 3 вложености и это все нужно постоянно копировать.. Решил добавить в проект библиотеку immer и как оказалось ее функционал построен на прокси, вот и пришло время посмотреть этот урок :)
Все просто и понятно обьяснил, спасибо!
Жесть он крууут! Смотри брат что он творит!
Пасиб дядь... Помог
Вооу, последний пример про age_name_job просто отрыв бошки, невероятно круто!
Огромное спасибо за ваш труд, все очень интересно и познавательно... но что я заметил во всех(почти) обучающих видео. Все учат писать код, каким то фишкам, паттернам, синтаксису и т.д. Но мало кто учит программировать, а именно объяснять как это все применяется в боевой задаче, ну или хотя бы видеть какой-нибудь полезный результат от своей программы. Очень сложно все это осознать если ты не понимаешь где это можно применить. Ну и добавлю от себя что самое лучшее это взять для себя какую-нибудь задачу и попытаться ее реализовать(гугля, читая доку и т.д.)
Спасибо
збс внатуре четко!
Спасибо!
Приятного просмотра)
Мотивация для создания нового контента +
Вот последняя конструкция очень заинтересовала
Спасибо. Ничего не понял, НО! Очень интересно!
Наверное ты первый кто смог рассказать о Proxy просто и понятно)) Спасибо)
Я старался, благодарю)
Спасибо, что ты есть)) Очень круто обьясняешь)) Я прям все до буквы понял) Хотя педалю на С#
Thanks
ёмоё вот что бывает, когда не изучаешь новые фишки. Я всё это сам делал через наследование. Зачёт
10:06
Можно вместо return true перед строчкой delete target[prop] прописать return
return delete target[prop];
и будет возвращать true
Красавчик и спасибо, ушёл от Фрилансера по жизни!
Спасибо, ты крутой)
Дякую!
комментарий лайк, подписка, колокольчик
Все никак не могу понять одну вещь: откуда берутся дизлайки? Кто эти 15 человек? Что им могло не понравится? Наверное, эти вопросы навсегда останутся без ответа) Контент сверхмощный. Спасибо за это тебе, Владилен! Особенно радуют те детали, и мелкие фичи, на которые сам бы никогда не обратил внимания и которые не так уж легко найти в учебниках или других материалах для обучения. Дерзай дальше, Владилен!) Не останавливайся и не обращай внимания на эти 15 человек) ибо не ведают они, что творят)
не переживайте. я читал, что дизлайки также помогают продвигать видео, как и лайки. типа, контент вызывает отклик и эмоции у юзера, а уж положительный или отрицательный - это вторично для ютуба. главное, чтоб смотрели.
Если я не ошибаюсь - при создании стрелочных функций, нельзя перебить контекст родителя в котором она была создана. Тоесть this будет получен от родителя, поэтому их лучше не делать методами объектов и apply работать не будет.
А видео топчик!
в методе has можно было использовать Object.keys(target).includes(prop)?
по последнему примеру в видео: разве через обычный геттер для класса, о которых ты рассказывал ранее, нельзя сделать то же самое?
Часть методов прокси обязательно должны возвращать инварианты (set, deleteProperty и далее по спецификации).
Норм так
❤🔥🔥🔥🔥
Если я правильно понял, то посредством Proxy, возможно осуществлять инкапсуляцию и полиморфизм в классах?
А чем отличаются get и set в Proxy от свойств в Object.Create?
Ochen kruto.
все понятно, Proxy типа декоратор.
Да, можно и так сказать. Но людям из чистого JS не знаком концепт декоратора)
@@VladilenMinin от вас жду урок про vue-class-components, vue-property-decorator
@@mukhammadrustambayev2051 Будет
Я сейчас курс доделываю и потому немного притормозил с ютубом. Временно
спасибо :)
Я новичок в изучении жс, тема конечно для меня очень сложная, но то как ты объясняешь в принципе понятно, просто пока не понимаю как это все применять на практике и такое бы уж точно не повторил, надеюсь все придет с опытом. Спасибо!
Следующее видео для тебя как раз
Владилен Минин посмотрел следующее видео, тяжеловато конечно, буду пересматривать и вникать, спасибо за материал!
У меня за окном взрывы, но мне без разницы я учу JS
Может быть лучше использовать QuokkaJS вместо браузера раз все равно на VS Code?)
Получается тоже самое можно сделать через наследование ?
Владилен, давай контент по Redux-Saga. Будет просто пушка! )
Есть немного на канале
@@VladilenMininДа есть немного, я недавно смотрел твой миникурс (в одном видео) по редакс. Показалось по саге как то бегло, решил сам еще немного подтянуть. Мало нормальной инфы
Владилен, или может кто-другой, почему если из объекта person удаляешь поле name, метод has при вызове поле name все равно возвращает true? По идее в объекте на который ссылается прокси этого поля нет. И обратное из массива удаляем name и возвращаем name в персон и has возвращает false. Получается в prop попадает сам созданный массив, а не прокси сформированный на основе объекта person?
Когда я проксирую класс (MyClass), у меня в методах этого класса теряется this (становится this = Proxy). Если методы класса объявить, как стрелочные функции, то this сохраняется (this = MyClass), но перестают работать геттеры и сеттеры Proxy. Как быть?
интересно, а proxy воздействует на объект изменяя его или клонируя. Я так понимаю с помощью данного класса можно реализовать метод фабрика и реализовать блокирование множественного подключения к БД? Или же это закос на Reflection class api. Почему приходится прибегать к proxy, а не реализовать данную вещь как метод класса. А может это призрак полиморфизма? Я логику понять не могу
Извините у вас есть шпаркалка по JS?
Интересно почему не оперируешь терминами АОП, парадигмами ООП, ты же их реализовуешь) Или у фронтендщиков еще так не принято или я ошибаюсь?
А в чем разница вывода функции в proxy:
return target.apply(thisArg, args) и
return target(args) ?
Вроде одинаково все работает, но 2 способ короче
Самый, на мой взгляд, очевидный пример использования - это написание обертки для различного функционала. Как пример: API мессенджеров, пиш.ем свою Proxy обертку с методами, а target-ом указываем классы мессенджеров (Vk, Te, WA). Причем в этих классах, методы обертки могут быть не реализованы
Хороший частный случай. Абсолютно верно
Если пойти дальше, то любые API запросы можно проксировать. Далее с помощью прокси делать интерсепторы и получать новый axios, который вроде на прокси и построен)
@@VladilenMinin на столько глубоко не копал, для меня пока axios - это замена $.ajax ))
@@VladilenMinin а ещё похоже на Mock объекты в PHPUNit
"name_age" - it `s Magic
Прокси творят чудеса)
Сделал как на уроке, похвалился сотруднику ))) он фулсток по js, и он был приятно удивлён!
@@user-hp5hw8su8q здорово! Ты его удивишь, если посмотришь следующее видео)
По поводу подачи материала вопросов нет, но в целом даже и не знаю что сказать.. нужно мыслить в парадигме Владилена и иметь за плечами не один год опыта, что бы понимать зачем это все нужно, к чему эти детальные обертки..
Свой канал я позиционирую не как для новичков. Этот плейлист - самый простой материал, что будет на канале
@@VladilenMinin , отлично! Спасибо тебе за такой контент и подачу материала
Владилен я не понимаю уроки по JS напиши мне как подтянуть JS до прохождения курса. Спасибо
Спасибо за твои уроки, но я так и не понял когда это можно применить
Следующее видео с примерами
Вопрос , а в чем разница между Proxy и аксессорами (надеюсь правильно написал ?
У Proxy побольше методов
12:18, зачем здесь "thisArg", что он делает и как, не пойму. Заранее спасибо за ответ.
Это контекст
Владилен, значения присваиваются и без сеттера. Кроме ошибки он получаетя не зачем не нужен, также можно с сеттером отдним работать без геттера.
Спасибо за урок. Но если честно, ничуть не просто. Мне кажется, надо на примерах из реальных проектах показывать, зачем это вообще нужно?
Использовал прокис на практике?
Да, для оптимизации рендеринга графиков
Монстер
У вас уже есть идеи как применить Proxy?)
Примеры я приведу в следующем ролике
Пока не знаю, может пригодится.
Спасибо!
@DJ MIAMI Думаю тебе стоит начать с более простых вещей в таком случае
Я думал щас будет пример как сделать свой HashMap аналог Java, формула расчёта hash уже есть в сети, осталось только реализовать механизм поиска коллизий. Спасибо это очень полезные уроки, бывает случаи когда приходится работать со старым кодом, который нужно перенести на новый движок. Так вот с помощью этих примеров можно обернусь все что угодно в красивые, и приятные для использования методы, которые будут брать на себя всю рутину по общению со старым кодом.
Первым в голову пришло: использовать для отладки....
если я все правильно понимаю, то mobx работает на Proxy. раньше это было типа: "работает? ну и хорошо)". так хоть понимаю что это
set () {
return Object.keys(target).indexOf(prop) !== -1 // true or false
}
Не понятен смысл передачи в качестве аргумента thisArg при проксировании функции.
Прочитал, что это контекст this.
Но, если добавить в хэндлер вывод в консоль, что такое thisArg, получаю undefined.
При этом, когда делаю return target.apply(thisArg, args) вместо thisArg можно указать все что угодно, пустой массив/объект, любую строку, число
... и при этом все работает.
Вот-вот, это такой непонятный момент, а он его не объясняет, вроде как будто по-умолчанию понятно должно быть...
когда будет практика js
Этот синтаксис все еще актуален?? или уже некоторые не рабочие?
set должен вернуть true при успешной установке значения
перегрузка)
зачем нкжен deleteProperty усли свойства и без нее удаляются просто по команде delete op.prop?
Извините за тупой вопрос, а разве просто через классы то же самое сделать нельзя?
Вы нашли для себя ответ на этот вопрос? Меня он тоже мучает.
+
какой у тебя стаж?
на канале есть ответы
Больше 7