Продвинутый javascript 3 - Прототипное наследование

Пройди БЕСПЛАТНО профориентацию в IT - bit.ly/2NLILne
В этом видео мы наконец познаем саму тайну тайн javascript, а именно:
что же такое прототип?
что такое наследование?
что такое прототипное наследование?
и самое главное - как им пользоваться?
Смотри курс "Gulp.js" : • Gulp.js
Смотри курс "Backbone.js" : • Backbone.js
Школа онлайн-образования: loftschool.com/
Telegram: telegram.me/lo...
Slack: slack.loftblog.ru/
Сайт: loftblog.ru/
Instagram: / loftblog
Группа вконтакте: loftblog
Facebook: / loftblog
Twitter: / loft_blog
Больше уроков от lofblog: #loftblog
Все уроки по хештегу: #loftblogJS
Полезные уроки для веб-программиста: #вебпрограммист
#javascript
Поставь лайк - смотивируй автора писать еще :)

[@alekseib5887]

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

[@AbraKadabra000]

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

[@viktorsoroka4510]

это шаблон, который спасает от копипаста по сути когда имеем дело с коллекцией однообразных объектов

[@lmaq8352]

очень нужно)

[@leoniddashko9960]

Victor, хорошо подметили, это как раз реальный кейс. Скажется на производительности, если работаете с большой коллекцией объектов.

[@Selicium]

Приятно, когда на протяжении всего видео, все понятно. Единственно есть нюанс на всех курсах JS - звук, школьник на телефон лучше звук запишет )). В остальном все гуд!

[@Viktoroffs]

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

[@denli6010]

СПАСИБО!!!! С ПРОТОТИПАМИ МНЕ НА МНОГО БОЛЬШЕ ПРОЯСНИЛОСЬ ИМЕННО ПОСЛЕ ВАШЕГО УРОКА!

[@evgenykrivosheev3220]

Благодарю за уроки! Вы очень доступно излагаете материал.

[@AbraKadabra000]

цель урока - запутать поизящней.

[@kristinaazizova973]

интерестная тема, не зря подалась во фронтенщики)) спасибо LoftBlog. А у нашей "чики" это супер)))

[@ВладимирНетот]

На 21:06 на строке 51 и 52 почему вы в прототип передаете переменную wolfy, а не сам Wolf? Так нельзя? А еще, почему то что на 47 строке нельзя было сразу записать на 36 через this? Буду очень благодарен за ответы

[@viktorsoroka4510]

Хороший урок - хоть и ранее знал об особенностях оператора new, но делал это как-то инструкции, а момент с this.__proto__ = Foo.prototype окончательно поставил все на свои места.

[@XaMJIo123]

Так и не понял почему волки начали кукарекать. Единственная догадка - это что присваивая новый метод для Chiken.prototype залезли в обьект энимал, а вот как добавить метод в функцию-конструктор - так и осталось загадкой. Разве что создать новую функцию с методом и добавить еще 1 уровень наследования уже от обьекта сhickу. И что бы все новые курецы кукарекали - уже создавать их как экземпляры от новой функции

[@alexarkaimov9561]

Долгожданная штуковина)) заценим))

[@valeryshusharin8391]

Волки закукарекали! :-D

[@dx1MS]

а какого х.. они закукарекали? Мне кажется нужны пояснения.

[@valeryshusharin8391]

Артем Бусел Для тех, кто смотрит и не видит - 23:33

[@aliaksandrk3338]

Артем Бусел Chicken.prototype = animal; // --> Chicken.prototype = animal; Chicken.prototype.something = 5; // --> Chicken.prototype.animal.something = 5

[@alexbel3021]

+Артем Бусел, потому что метод Kurareku добавляется к Chicken.prototype. А что есть Chicken.prototype? Правильно, animal. Однако и Wolf.prototype также равно animal. Следовательно, все объекты, созданные с помощью конструктора Wolf, наследуют от своего прототипа (animal) новое свойство Kurareku. Дабы избежать казуса, можно создать промежуточные функции: var wolfy, chicky, Animal = function () { this.type = "animal"; }, AnimalWolf = function () { this.name = "wolf"; }, AnimalChicken = function () { this.name = "chicken"; }, Wolf = function () { return this; }, Chicken = function () { return this; }; AnimalWolf.prototype = AnimalChicken.prototype = new Animal; Wolf.prototype = new AnimalWolf; Chicken.prototype = new AnimalChicken; wolfy = new Wolf; chicky = new Chicken; Chicken.prototype.bird = true; document.writeln( wolfy.bird ); //undefined document.writeln( chicky.bird ); //true

[@BearVodkaAndValenki]

+Alex Bel спасибо, что разъяснил, а то до меня тоже сначала не дошло почему "волки закукарекали".)))

[@СергейКомбаров-д1ж]

больше JS!!! Спасибо, все четко)

[@mackaybravo6770]

спасибо! Долго ждал

[@artemtravlo3135]

У меня почему то после того как установил прототип - то не показывает "ключ-значение" прототипа в обьекте. Но в свойстве _proto_ - есть этот унаследованный обьект со свойствами(( wolf {name: "Волк"} name: "Волк "__proto__: Object canRun: true __proto__: Object

[@Peter-vz4tb]

У меня тоже

[@АндрейУсков-х1т]

та же фишка. Хотя, если в консоли прописать wolfy.canRun , то на экране вижу значение

[@СтаниславЖуковский-и7е]

с момента выхода видео прошло 2 года, браузеры просто изменили отображение на более правильное, но не уверен, тоже самое у меня

[@Viktoroffs]

у меня так же

[@volodymyrzaiets8388]

очень много не правильно называл вещи. в самом начале ты присвоил переменной boo = new Foo(); и сказал что boo отнаследовало... какое тут было наследование если ты просто присвоил обьект созданый функцие конструктором... Наследование это когда один класс наследует свойства и методы от другого класса (родительского)

[@AbraKadabra000]

наследование это когда объект наследует св-ва прототипа, при условии что в самом объекте нет одноимённых св-ств

[@Nopefish]

Одноименные свойства не много меняют. Если удалить такое свойство из объекта, объект берет его из прототипа.

[@novichok3417]

Строка boo = new Foo() означает, что переменная boo вызвала функцию конструктор которая создала новый объект и поместила его в переменную boo и этот новый объект унаследовал свойства конструктора Foo.

[@mackaybravo6770]

написал много своего, вроде понятно когда писал код, но легко запутаться. Но думаю если попрактиковаться, то все будет ок

[@ДмитрийВалуев-ф8ф]

А как конструктор наследует свойства объекта? Получается помимо this.__proro__ = foo.prototype, он получает еще одно свойство __proto__

[@barrettM8]

JS не перестаёт меня удивлять ) Почему, если добавить объект через прототип к конструктору, затем добавить еще один метод к этому же конструктору (опять же через прототип) всё нормально работает. Но если к этому же конструктору добавить новый объект, то все предыдущие, унаследованые методы и свойства затираются ))

[@meditarium_vibes]

+b4rret конечно, ты же переписывает объект по его адресу в памяти, а вот если ты сделаешь так: Some.prototype[prop] = obj[prop] зафигачив циклом в этот объект данные из другого, то ты просто добавишь(перезапишешь) свойства в объект по уже существующему адресу и всё будет ок :)

[@F0RIS]

Какой-то неудобный синтаксис наследования в js)

[@TheKirk1989]

ЗНАТОКИ, к вам вопрос ! ! ! Все рассматривают стандартное присвоение свойств name, age, number новым объектам с помощью функций конструкторов.... , меня интересует, как правильно написать код, чтобы в каждом новом созданном мною, помимо простых (к примеру) свойств name age и.т.д в объекте отображалось рандомное число от 1 до 10: короче, посмотрите на мой код и подскажите, что я не так делаю... function lol(name, random){ this.name = name this.random = 1+Math.floor(10*Math.random()); // Вижу, что здесь что-то ну прям категорически не правильно, но не знаю как написать правильно } var A = new lol("Виталик") // И как мне присвоить значение объекту, если это рандомное значение? var B = new lol("Adam") var C = new lol("Алёша") function alt( obj ){ for( var s in obj ){ document.write( s + ">>>" + obj[s] + "" ) } } alt(A) alt(B) alt(C) alert(" Благодарю заранее, не судите строго ;)" )

[@TheKirk1989]

Хах, оказывается код был правельным, всем спасибо!

[@volodymyrzaiets8388]

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

[@chernobaev]

Вообще то, тут про это и рассказывается, а в следующем уроке будет про extend и object.create()

[@СергейГуменюк-б1ь]

Урок хороший, мне понравился, но ты что под конец уже засыпать начал? что-то бормочешь и очень тихо и невнятно говоришь, и еще понравилось наблюдать за часами справа сверху)

[@ivansofronov4773]

все волки закукарекали ваще прикольно не запктано!

[@ИльшатГайфуллин]

Что-то как то запутано...

[@highfivebear]

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

[@Павел-ы9ф2п]

Это объясняется в предыдущем уроке. Да, методы функции-конструктору можно присваивать по-разному: - Внутри функции-конструктора - Через prototype Основные отличия: - Метод, описанный через prototype, не имеет доступа к приватным переменным внутри конструктора (однако это можно обойти с помощью обертки-геттера) - Метод, описанный через prototype, гораздо производительнее

[@KievMan777]

да, после изучения фреймворка KinetikJS /Konva.js , влез в структуру, и понял для чего так часто обращения через prototype чего только стоит короткое объявление и потом куча кода в prototype Kinetic.Canvas = function(config) { this.init(config); }; Kinetic.Canvas.prototype = {... lalala ...

[@stylenova1]

Заметил не совпадения на сегодняшний день, с чем это связно ? Если в Foo закомментить name, то он не наследует как на видео, увидеть name, можно только через boo3.__proto__ , при вызове просто boo3 вот как сейчас joxi.ru/82Q5OVoTwdgeq2

[@stylenova1]

Получается то что сказано на 17 мин, на 20 строке, же не работает.

[@ArtemkaRocks]

пожалуйста, не пугайте меня вашими вставками заставок .... спс.

[@bekliev]

Artem Petrenko, loftblog было бы отлично, если музыку (мелодию) заставки подкорректировали. Кажется так, будто вообще ритма нет, как-будто одну и ту же звуковую дорожку продублировали, только дубль запустили на пол секунды позже основной дорожки. Вообще плохо звучит. Когда первый раз услышал, подумал, что у меня динамики испортились.

[@arsenykonohov4426]

а вот вам для усвоения материала скриншот, который ставит на места некоторые слова прозвучавшие с экрана. yadi.sk/i/8_2hgpHrjjAgD Версия 2.0 для тех кто в танке))) типа как я) yadi.sk/i/2YNhr98wjjAjA

[@client-y4f]

+Arseny Konohov Спасибо, ахах)

[@ВячеславКоростин-у2ч]

маловато что понятно ...

[@Понамарев-м5т]

Наследуются классы а не объекты!

[@Nopefish]

Не совсем корректное объяснение. Волки кукарекать стали, это видно в консоли хрома, при этом автор никакого внимания на это не обратил. Плохо.

[@ivansofronov4773]

не запутано*

[@sashabondar6074]

Бессмысленный урок, который всех только запутывает. Лофт все больше и больше расстраивает.

[@vitalysvyatyuk4299]

Тягомотина, скукотища, не теряйте время. Смотрите на англ. языке - там всё за 3 минуты объясняется.

[@MODIK]

можешь ссылку дать,что посмотреть?