I've read countless JavaScript blogs and books on Constructors and Prototypes but they don't explain it as crystal clear as you do. You should seriously write a book man. Would love to see you break down and pick apart an angular or node.js tutorial. Thanks for making these videos. I know making them takes ALOT of work and time to develop.
+P8860 Thank you :) it is nice to hear that I cleared everything up. Maybe I'll make a book some day and sell it for $1 just to see how many sell. Angular and Node are coming right after JQuery.
+Abdel Ouery , i totally agree with you, he's better than my real teachers here ,every year i graduate is because of his tutorials ,so thank you again sir +Derek
Adding the time stamps is a wonderful idea. When I am not just trying to learn from you tube videos, but trying to do a real program, I can never remember a useful video. This will make finding your examples so much easier. Thanks for going the extra mile.
I'm only 35 minutes but you've already solidified a few concepts that have been somewhat unclear to me for the last few months. My sincere gratitude! Thanks!
The most concise and clear tutorial in JS OOP I've ever watched. One request is a link to a project where I can practice on. Maybe a CRUD project like Customer Management or something else?
This is freakin' legendary! The best part I like about your style is how you are so quick in going over concepts, which all the other tutors take ages to go through at the ultimate cost of the student completely giving up on the tutorial! Great job sir!
Thanks Derek for this and for the tutorial 'Learn JavaScript in one video'. I have chewed on the book 'JavaScript The Definitive Guide'. So I had some knowledge regarding JavaScript but these two videos are given an awesome overview, connects everything and every bit of JavaScript comes to life. Amazingly good stuff!
Hello Derek Banas: Pls Help me out man! I've got a Web Project to build and as a front-end developer I am confused whether I should learn HTML, javascript and CSS OR CMS (Drupal). My friend suggested me to learn Drupal as it is used for developing web pages as well. So should I go for HTML, javascript and CSS OR CMS (Drupal).
You need to know HTML, CSS, and JavaScript either way unless you are just going to use a template. In that situation you don't need to learn any. You may also like to consider Wordpress in that situation because it is extremely easy to use in comparison to Drupal.
This is a superior video to those I've watched recently. I'm coming from C#/C++ with very little javascript, and I was looking for a good primer. You are: #1 Easy to understand. Good communicator. Clear audio. #2 Concise and quick with your accompanying code. #3 Smart about the educational route you go down. I think this is too dense for a beginning programmer to learn from in one go, and my only advice to them would be... watch it four times. It is hard to find information of this quality and density presented by someone without an Indian accent... (I'm only half joking)
@@derekbanas You did such a good job explaining this, I was able to simplify it even more in explaining it to my non-programmer wife for the software they're developing at her company, and holy **** did it feel good and that was the first time i've ever been able to see class objects and extended class purposes in a RL scenario which I could understand and came up with. Cannot thank you enough!
Hey Derek, I have couple of questions? How do you create enum in JavaScript? And how would you use it in your Pizza example? Instead of creating a ExtraCheese function, is there a way to create a function named Extra() that has either cheese or veg or meat variables, And based on what user pass, the price is changed. Sorry..if question is not clear..
It would be very cool if you start doing tutorials with projects. Like learning JavaScript by doing a dynamic site, learning HTML by doing a static site, etc. Great tutorials by the way.
+Jesus-Pierre-Miguel Salgado III Thank you :) I think I kind of did that in the past and those videos still hold up. I made sliders, tons of website layouts, shopping carts, etc. They are kind of hard to find in my sea of 700 videos, but I'll point you towards them if you'd like to see something specific.
+Jesus-Pierre-Miguel Salgado III This will give you a bunch www.newthinktank.com/?s=website+layout I have over 100 Wordpress videos in which I make real things with JavaScript and PHP here www.newthinktank.com/videos/web-programming/wordpress-how-to/ I made a shopping cart here www.newthinktank.com/2011/12/wordpress-shopping-cart-tutorial/
I am not able to handle more than 2 languages at one point of time, how is is possible to give such an awesome explanation on almost all programming languages out there. Am awestruck! You are a superman!
+Sandeep Devaraj Thank you for the compliment :) I guess I have just been switching back and forth for so long it is natural. I definitely prefer some languages over others though
Derek, this is a great video, been looking for something like this for ages. I am struggling with going to oop from procedural and every course either merely teaches the basics about objects and classes or it's way too advanced, nothing in between. Many many thanks! Will be checking out your whole channel later.
@Derek Banas - I'm also interested in the answer to @SaharS question. And thank you for such a straight forward and in-depth explanation of OO JS, this was very helpful.
I think he made that (the extend function), only because he wanted to evade duplicated code in every type of animal he thinks. And i think, doing: Child.prototype = Object.create(Parent.prototype); Would make more sense... And lastly, about *Child.prototype = new Parent()* If you do that, you inherit *ALL the Parent Object*, not only the _Parent Prototype Object_.... That means, all the things defined inside that _Parent Object_ would be public too. For example; if you have: function Parent() { this.somethingAboutParents = "Yells all night"; } Using your aproach, Child.prototype = new Parent(); For each Child you create, you will have access to that property new Child().somethingAboutParents // --> 'Yells all night' Using *Object.create(Parent.prototype)* instead, you only inherit the *Parent Prototype Object*, not *all* the *Parent Object* including his _Parent Prototype Object_.
Is my understanding that, prototypes are basically a shorthand version of adding properties/function objects to an object, correct? Also, is my understanding that, object creation basically consists of three parts: 1. defining (creating) the object, 2. adding properties (members), 3. adding methods (functionality) to the object and it's properties, correct? I like your tutorials. I'm a total noob. Thank you. =).
Thanks for another amazing video Derek. It's hard to believe that someone would have such vast knowledge of all this stuff you post here on your channel. Keep it up!!!
+Derek Banas No No I am not pulling your leg I am just trying to say that to become a pro there's lot of geekiness requried and I know that as programmer...............
Why do I feel every time I watch any of your videos covering any programming language, that it was you who invented that language? It is mind blowing your breadth of knowledge.
Hi Derek, first thanks for the tutorial! I got some questions regarding getters and setters. First you showed how to make properties private by defining them as variables. In the section about getters and setters you always define the properties as public properties (this._radius), which means you can still access them globally by circ._radius for example? So the point to use getters and setters to protect those values doesn't make sense here, or am I getting something wrong? Is there any way to use Circle.prototype (ECMA 5.1) to define getters and setters to access private properties? Maybe defining it inside the class? Kind regards, Fabian
Hi Derek. A program has to be created to handle incoming TCP/IP Packets. Which language will have more advantages/be less complicated : C , C++ or Java ? Thank you .
Hi Derek, I have been following your tutorials for more than 3 years. Just want to thank you as I have learned at lot from your tutorials. Please do the tutorial on React Js/Reach Native as well. Thanks
I believe this may clear some confusion. At around 32:44 Derek says that when the prototype is changed (from the base Object (which is default )) , that the prototype.constructor will point to the Object object... In reality it points to the function the prototype Object was set with: function Animal(){ this.kind="Animal" this.breathing="yes" }//default prototype =object Object function Cat(){ this.type="Cat" this.sound="meeow" } Cat.prototype=new Animal(); //set new prototype ...mess up .constructor /// needs Cat.prototype.constructor=Cat ......to be accurate var kitty1=new Cat(); console.log(kitty1.constructor) ///// Logs: function Animal(){ this.kind="Animal" this.breathing="yes" }------incorrect
At 48.58 var derekHero = Hero("Derek"), shouldn't there be a new here? This is a special case too since it is a Singleton. So what is the actual difference between having "new" and not having "new" before constructor function invocation in non-Singleton context?
in the first 3 minutes i learned more than I did taking about 2 weeks of online courses and speaking to javascript developers. People really need to learn how to communicate better.
Hey Mr. Banas, Great & Thorough Videos. Do you have any videos focusing on the algorithmic method of solving problems to become a better programmer? Solving problems with arrays, classes, recursion & how-to think through complex problems and breaking down to solvable programming blocks of code to go through?
Do you use hotkey to move pointer up and down? Or other hotkey that is not default in sublime? In linux,I set alt+F for left delete ,but it will open the selection bar rather than what I have set,but in windows7 it work fine,how to solve it?thanks
Hey Derek, could you make an asp.net tutorial series? I've been looking for one for my computer science project but there are no good ones out there (in youTube, at least), so I'd really love to see one of these' since you make so easy-to-understand tutorials. Love your work. Thanks!
At 49:20 this is a global object. You don't create new object, you add props to global obj! And in fact yours singleton is refer to global object. What you need is to invoke Hero with keyword new.
Hi Derek, At 49:30 you are using the Hero function without the new keyword isn't that going to create 'name' in the global scope? as 'this' will be pointing to the window object.
I rewrote the code at 39:08: function Extend(Child, Parent){ //function Temp(){}; //Temp.prototype = Parent.prototype; Child.prototype = new Parent(); Child.prototype.constructor = Child; } does the same thing, so why is mine wrong or will crash at some point?
yeah I asbsolutely agree w. Abdel, you Derek are an endless fountain of wisdom/insight on ALL of the major web technologies and programming languages. Bravo!
+Derek Banas "I'm not that smart" I don't know aboiut that. You are certainly smarter than a ny other youtube video explainer of some web technology! What college did u go to or was all of your knowledge ontained thru a lotta self-teaching/training?
+Steve Burrus Thank you :) I went to school for electrical engineering and illustration. I wanted to work for a special effects company. I taught myself the basics of programming when I was very young. I learned the advanced stuff on the job.
That's encouraging to read. I just graduated with a BSEE. I am doing an MSEE now, but I want to transition into computer programming. It seems like way more fun, and I like the idea of working from home and waking up and going to sleep on my schedule.
Hey when I try to Define GETTERS and SETTERS for the Coordinates (24:25) I get an Error "Cannot read property 'call' of undefined". Don't know why, I did exactly like you and before everything worked fine.
i couldnt agree more with you man.huge step for Javascript this time.!!the whole prototype thing was the reason i contemplated trying my hands on Javascript.but now that there is class. OOP on javascript is gonna get on a whole different level
Hi Derek, Thanks for the great video. @38.12 why cant we have this Child.prototype = Parent.prototype; Why did we do this var Tmp = function() {} Tmp.prototype = Parent.prototype; Child.prototype = new Tmp();
Derek I want to know your motivation in context of learning multiple programming languages and to such a great extent. How do keep yourself motivated until because this learning never ends?
Hello Derek, This code looks wrong to me, Rat.prototype = Rodent.prototype; in oojavascript.html, because you are setting constructor for both Rat and Rodent.
Thanks for this tutorial, very helpful. One suggestion is consider doing tutorials in a dark mode. Personally I tend to get eyestrain with the classical black on white. Anyhow thanks again.
Sorry but i need you help try to respond this please ! Tenho muitas duvidas sobre como melhorar o desempenho do programa e a velocidade porque o new Classe() cria uma nova instancia dentro disto causa mais lag a cada uso desse new? me Ajude não fiz aula com Professor de JAVA mesmo e estou com esta duvida a tempos faço video de plugin de minecraft (um pouco mais fácil) e preciso saber essas coisas para poder repassar nos meu tutoriais?
+Eduard A palavra-chave classe não está implementada atualmente com todos os navegadores , então eu não me preocuparia com isso neste momento. Eu cobri -lo apenas para que eu pudesse cobrir capacidades futuras.
Hi Derek, I have a question. These concepts have finally started to make sense to me in the Javascript OOP world. Great tutorial :) However, would these concepts help me in developing front end with React js? or should i focus on functional programming of javascript? Thanks in advance!!
Hi Richard, I personally try to implement object oriented design in most of my code, but if the code is readable and flexible I see no problem with any design
@20:46 line 28....what if the user doesnt input commas when entering the data for parts...will that have some effect when it's used on the write method? E.g. if the data is put in like this setAddress("123 main Pittsburg pa")
+Derek Banas I'm actually new to all this coding and only languages I know are HTML and CSS. Please tell me which language I should learn first in order to start with websites and web-app developement like Ruby on Rails or Python or something else ? Please reply I'm confused.
+Sarthak Jha If you are most interested in web development JavaScript and PHP are the way to go. Take your time and have fun. I'll be making a bunch more JS tutorials over the next few weeks and my channel has many more.
Hello Derek, object oriented javascript in Quiz game development. How do you structure back-end quiz game, I have only gotten as far as developing a Quiz game, on the client side, with Javascript and Arrays, for questions and answers. Any comments please reply. thank's
I want to tell you thank you for the video. My question I have a Sublime Text 3 but I don't get most of the autocomplete features as your? How can I make my editor more like your? I have downloaded a lot of Js plugins but they're not helpful at all. Thank you again.
Derek you're teaching without waste of time, as always -Bravo. 1 question, if i know all of this ( in this video) , means - " I know some of advanced JS topics" or all of this is just a beginning?
Actually, using an _object mechanism provided by javascript_ is different than OOP. And inside OOP world, this could be considered basic. Next step (and a good one to learn fast) would be learning *software design patterns*, as Derek suggested implicitly. :)
at 34:25 you said Wolf instance of Animal, which confused me. Later I understood arcticWolf is actually an instance of Animal, not Wolf. So, can I say a constructor function can not be an instance of another constructor function?
I really apreciate your tutorials have taught me what programming is, you are very intelligent person to share their knowledge enriches it even more. Hope and move on anyone´s purpose. God bless you my friend.
hey Derek awesome stuff! what's next on the list of topics (that you're inevitably going to make more awesome videos about)? I personally need to learn php / mvc (frameworks?), any pointers in your 700 videos :)
+Sam Deacon Thank you for the compliment :) Up next are JQuery, NodeJS, AngularJS and cross platform mobile games. I'll try to fit in a Laravel tutorial to teach PHP MVC. I have a bunch of PHP tutorials that I recently made.
At 25:30 when we are defining a prototype property of a Point object, is it completely necessary to define both a getter & a setter, or could we potentially just implement one or the other, or more than just those two?
Is there a way to define more 'intuitive' getters & setters? E.g. instead of circ.getRadius and circ.setRadius = 4, why not define sth like circ.getRadius() and circ.setRadius(4) -- but then those are just regular functions on the object. Aren't the former more confusing though? If you are doing circ.setRadius = 4, why not just do circ.radius = 4? (where radius is a prop of circ obj.)
The whole Java-bean-ish setter/getter thing is a waste of time (premature optimization). Just access the property/field directly. If this later becomes a problem, only then replace the properties with get/set handlers in the containing object's factory function. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get
Many thanks for this great overview of the many possibilities. It leaves a bit overwhelmed giving a old school pascal background but knowing OO Design (not programming). I agree it would make sense to elaborate the programming choices and solution path visually with the why 's of the to be solved real live scenario 's providing the starting context. I realize that for example a pizza shop it would mean a video itself. Again, thx. for this great video to get a clue about the 'insane' number of possibilities .
+Derek Banas ...in the meantime I have had a first look at the patterns book (flanagan) etc. I am really jumping in this exploring it from middle-out. I am currently thinking about the best way to approach a traffic light simulation as a simple state machine (red, green, orange, stop, run, onservice). DesignIdea is 3 objects (timer, trafficlight, display) . My thinking problem is that I see the object-abstraction as objects sending messages to each other and reacting on it based upon object state changes (in a networked object model). Instead of sending messages to each other and reacting on that, I guess they need to invoke each other methods instead. That implies the sending object needs to know the internal behavior of the receiving object instead of sending just a message (event). That 's where I get lost between design and programming.🤔
Thanks a lot Derek... :-) I was having an number of questions regarding OO javascript but now most of them are solved. You explained it quite effortlessly. Thank you once again :-)
I have no idea why, but the first bit of code: var customer = { name: "Tom" function speak() { return "My name is " + this.name; }; }; document.write(speak()); Is throwing errors all over the place. I've tried playing around with it in jshint, but it keeps throwing errors on the function declaration on speak. Like it REALLY doesn't want the function to be created there. Does anyone know a workaround for this?
This is 10 months ago though here it is. You missed the coma, and the function should be written like this. var customer = { name: "Tom", speak: function() { return "My name is " + this.name; } } document.write(customer.speak());
I have no idea if you have actually done this ( not taking the videos posted onto your website in account ), but you should create videos that build onto these main videos, in a way of using the newly obtained knowledge to create something, a seperate, simple project. This would completely solidify everything learned in this video. It is possible to go out and brew up personal projects, but it'd be a fun thing to watch/follow, and you'd be attracting a greater audience ;) Thank you for the video as it is, I've learned quite some things from it!
+H. Pavlovic Thank you for the input :) Yes I'm working towards making videos in which I make a bunch of large JS programs. I'll mainly focus on games because people seem very excited about making them.
First of thanks a lot from India! I don't understand why a Temp is being used at 37:30? Also, at 36:32, where as far as I understand, you are demonstrating multi level inheritance, where Rodent inherits from Animal and Rat inherits from Rodent, why do you do Rodent.prototype = new Animal() whereas Rat.prototype = Rodent.prototype;. Why is there a lack of similarity?
SaharS asked something like that in this video. Look for the answer i gave him here, maybe it helps :) And i explayed a little more in prototypes answering to Kutsan Kaplan here too. Hope it helps :)
Little to nothing, actually. The first makes Algol/Simula (Pascal, C ... Java/C#) programmers more comfortable, the second is more like Lisp/Scheme, and emphasizes that a function is just another expression/value type. Either way, there is a symbol called "Mammal" that is visible (though possibly not yet defined) throughout whatever scope it is nested within. (I'm assuming a modern browser that shows the name in the debugger even if the "expression" style was used to set up the function)
I've read countless JavaScript blogs and books on Constructors and Prototypes but they don't explain it as crystal clear as you do. You should seriously write a book man. Would love to see you break down and pick apart an angular or node.js tutorial. Thanks for making these videos. I know making them takes ALOT of work and time to develop.
+P8860 Thank you :) it is nice to hear that I cleared everything up. Maybe I'll make a book some day and sell it for $1 just to see how many sell. Angular and Node are coming right after JQuery.
Your channel is like a big book of secrets, contains every thing a programmer needs to know about a programming language, Thank you fo that :)
+Abdel Ouery Thank you for the compliment :) You're very welcome
+Abdel Ouery , i totally agree with you, he's better than my real teachers here ,every year i graduate is because of his tutorials ,so thank you again sir +Derek
+Derek Banas can you make bash in one video
+Abdel Ouery except theyre not secrets. theyre in books too. :D
Adding the time stamps is a wonderful idea. When I am not just trying to learn from you tube videos, but trying to do a real program, I can never remember a useful video. This will make finding your examples so much easier. Thanks for going the extra mile.
I'm very happy that they help :)
I'm only 35 minutes but you've already solidified a few concepts that have been somewhat unclear to me for the last few months. My sincere gratitude! Thanks!
+Derrik Nasca You're very welcome :) I'm happy that I could help.
The most concise and clear tutorial in JS OOP I've ever watched. One request is a link to a project where I can practice on. Maybe a CRUD project like Customer Management or something else?
Thank you very much :) I'll see what I can do about the request
This video explains OOPs concepts in JS perfectly and to the point, instead of going in circles when reading any book! Thanks much!
Thank you :) I'm glad it helped
This is freakin' legendary! The best part I like about your style is how you are so quick in going over concepts, which all the other tutors take ages to go through at the ultimate cost of the student completely giving up on the tutorial! Great job sir!
Thank you for the compliment :) I'm very happy that the videos help
Thanks Derek for this and for the tutorial 'Learn JavaScript in one video'. I have chewed on the book 'JavaScript The Definitive Guide'. So I had some knowledge regarding JavaScript but these two videos are given an awesome overview, connects everything and every bit of JavaScript comes to life. Amazingly good stuff!
+robkremers Thank you :) You're very welcome
Hello Derek Banas:
Pls Help me out man!
I've got a Web Project to build and as a front-end developer I am confused whether I should learn HTML, javascript and CSS OR CMS (Drupal).
My friend suggested me to learn Drupal as it is used for developing web pages as well.
So should I go for HTML, javascript and CSS OR CMS (Drupal).
You need to know HTML, CSS, and JavaScript either way unless you are just going to use a template. In that situation you don't need to learn any. You may also like to consider Wordpress in that situation because it is extremely easy to use in comparison to Drupal.
Oh ! thanks Derek for taking time to Reply
oh thanks Man ! thanks for your reply
This is a superior video to those I've watched recently. I'm coming from C#/C++ with very little javascript, and I was looking for a good primer. You are:
#1 Easy to understand. Good communicator. Clear audio.
#2 Concise and quick with your accompanying code.
#3 Smart about the educational route you go down.
I think this is too dense for a beginning programmer to learn from in one go, and my only advice to them would be... watch it four times. It is hard to find information of this quality and density presented by someone without an Indian accent... (I'm only half joking)
Thank you for the very nice compliments :) I greatly appreciate them.
30:37 multilevel polymorphism like living>animal>mammal>human>citizen>employee
freaking wonderful! i've been trying to wrap my head around OOP for years and it's finally making more sense now.
Thank you 😁 Happy to be of help
@@derekbanas You did such a good job explaining this, I was able to simplify it even more in explaining it to my non-programmer wife for the software they're developing at her company, and holy **** did it feel good and that was the first time i've ever been able to see class objects and extended class purposes in a RL scenario which I could understand and came up with. Cannot thank you enough!
I like your presentation. It makes it easier to understand whereas other tutorials can be quite messy.
+Jumbled Code Thank you :) My number 1 goal is to make everything understandable.
The 'PERFECT' technologist and 'MASTER' instructor!!
Thank you for the nice compliment :)
Derek, anything on JS modules (exports, imports..)? and their best practices?
Right now we're flying at an altitude of 36,000 feet....
hahah he really does have the perfect voice for it
EPIC!
hahahaha
Hilarious! Exits to your left and right
This video is so useful for people who already know the concept of OOP, and want just to learn JS's way to do it. Thank you so much. Cheers!
Thank you very much :)
Hey Derek, I have couple of questions? How do you create enum in JavaScript? And how would you use it in your Pizza example? Instead of creating a ExtraCheese function, is there a way to create a function named Extra() that has either cheese or veg or meat variables, And based on what user pass, the price is changed.
Sorry..if question is not clear..
+Sagar Thapa Check this out stijndewitt.wordpress.com/2014/01/26/enums-in-javascript/
Thanks man been a Software developer for 20 years and still learning thanks again
+adamfakes you're very welcome 😊
For get and set , I think you should name both getAddress and setAddress just to address. It makes more sense.
It would be very cool if you start doing tutorials with projects. Like learning JavaScript by doing a dynamic site, learning HTML by doing a static site, etc. Great tutorials by the way.
+Jesus-Pierre-Miguel Salgado III Thank you :) I think I kind of did that in the past and those videos still hold up. I made sliders, tons of website layouts, shopping carts, etc. They are kind of hard to find in my sea of 700 videos, but I'll point you towards them if you'd like to see something specific.
Derek Banas If you could point me to those videos, that would be great.
+Jesus-Pierre-Miguel Salgado III This will give you a bunch www.newthinktank.com/?s=website+layout
I have over 100 Wordpress videos in which I make real things with JavaScript and PHP here www.newthinktank.com/videos/web-programming/wordpress-how-to/
I made a shopping cart here www.newthinktank.com/2011/12/wordpress-shopping-cart-tutorial/
Derek Banas Thank you.
I am not able to handle more than 2 languages at one point of time, how is is possible to give such an awesome explanation on almost all programming languages out there. Am awestruck! You are a superman!
+Sandeep Devaraj Thank you for the compliment :) I guess I have just been switching back and forth for so long it is natural. I definitely prefer some languages over others though
I think this is the only series of tutorials that do provide the code! It's priceless!!! I owe you a lot. All the best and keep going!
Thank you for the compliment :) I have another were I make JS apps and games ruclips.net/video/IyDVvGmzTlo/видео.html
Derek, this is a great video, been looking for something like this for ages. I am struggling with going to oop from procedural and every course either merely teaches the basics about objects and classes or it's way too advanced, nothing in between. Many many thanks! Will be checking out your whole channel later.
Thank you :) I'm very happy that the video helped
You are a bible to programmers Derek. Thank you so much! You are clear, quick and to the point. I learn the most from your videos as a programmer.
Thank you for the compliment :) I'm very happy that the videos are helping
at 38:08 - the extend function -
why not simply do
Child.prototype = new Parent();
Child.prototype.constructor = Child;
Exactly. Using his function can't get the toString() to work.
@Derek Banas - I'm also interested in the answer to @SaharS question. And thank you for such a straight forward and in-depth explanation of OO JS, this was very helpful.
+1, that confuses me too. everything works without Temp
I think he made that (the extend function), only because he wanted to evade duplicated code in every type of animal he thinks.
And i think, doing:
Child.prototype = Object.create(Parent.prototype);
Would make more sense...
And lastly, about *Child.prototype = new Parent()*
If you do that, you inherit *ALL the Parent Object*, not only the _Parent Prototype Object_.... That means, all the things defined inside that _Parent Object_ would be public too.
For example; if you have:
function Parent() {
this.somethingAboutParents = "Yells all night";
}
Using your aproach, Child.prototype = new Parent();
For each Child you create, you will have access to that property
new Child().somethingAboutParents // --> 'Yells all night'
Using *Object.create(Parent.prototype)* instead, you only inherit the *Parent Prototype Object*, not *all* the *Parent Object* including his _Parent Prototype Object_.
I missed ur Java stuff.. used to watch everyday for preCollage java.. Thanks again for making another beautiful tutorial
+Much Online Thank you :) I'll be making more Java videos soon.
Is my understanding that, prototypes are basically a shorthand version of adding properties/function objects to an object, correct? Also, is my understanding that, object creation basically consists of three parts: 1. defining (creating) the object, 2. adding properties (members), 3. adding methods (functionality) to the object and it's properties, correct? I like your tutorials. I'm a total noob. Thank you. =).
Pretty awesome tutorial. Loved the examples. Would say the best OO JavaScript tutorial out there. Thanks again
Thank you very much :)
BY FAR the best books for javascript are the 'You don't know JS' series. definitely check them out
Thanks for the video Derek. Do you think this video is sufficient for doing OOP or should I also read the book you put in the description?
+Noe Ramirez Everything in the book and a bit more is covered in this video.
Thanks for another amazing video Derek. It's hard to believe that someone would have such vast knowledge of all this stuff you post here on your channel. Keep it up!!!
+Joy Karbah Thank you for the nice compliment :) I'm glad I can help.
Great job done Derek . Really precise tutorial with all what you need to know about the language . Looking forward for Angular 2 on the same lines .
Thank you very much :) I'll see what I can do about Angular
Hello Derek,
I did not under the syntax "get getAddress() {... }" in your cheat sheet? What is 'get' here?
+Ethashamuddin Mohammed u must have to chnge prof pic in order to get your answer =)
+Ali Almis "You do not deserve an answer b/c you have a profile pic I don't approve of". The future is here, folks.
JSLint does not validate get getRadius(), it does work though. Probably we can just use "home-made" getters and setters to avoid this non-validation.
I can't believe you can make these marathon videos! Thank you.
Thank you :) I'm happy you like them
Honestly speaking sometimes I wonder how much talent that you have.... Hats off to you!!!!!!!!!!!!!
+Deep mandal Thank you :) I promise you that I'm not that smart.
+Derek Banas No No I am not pulling your leg I am just trying to say that to become a pro there's lot of geekiness requried and I know that as programmer...............
Why do I feel every time I watch any of your videos covering any programming language, that it was you who invented that language? It is mind blowing your breadth of knowledge.
You're very kind. I promise I'm not very smart in real life
Derek Banas I get asked many times about online learning. And your channel is the first I recommend.
Hi Derek, first thanks for the tutorial! I got some questions regarding getters and setters. First you showed how to make properties private by defining them as variables. In the section about getters and setters you always define the properties as public properties (this._radius), which means you can still access them globally by circ._radius for example? So the point to use getters and setters to protect those values doesn't make sense here, or am I getting something wrong?
Is there any way to use Circle.prototype (ECMA 5.1) to define getters and setters to access private properties? Maybe defining it inside the class?
Kind regards,
Fabian
Thank you for taking the time to make all of these tutorials. So much knowledge available thanks to you!
+Johnny G You're very welcome :)
Hi Derek. A program has to be created to handle incoming TCP/IP Packets. Which language will have more advantages/be less complicated : C , C++ or Java ? Thank you .
I really do not expect this tutorial, and this morning it is there. You are wonderful! Thank you so much! I have much to do and go to work!
+Antik Lee (高偉麗) Thank you for the compliment :) I'm happy that I could help.
Hi Derek, I have been following your tutorials for more than 3 years. Just want to thank you as I have learned at lot from your tutorials. Please do the tutorial on React Js/Reach Native as well. Thanks
+jimish shah Thank you :) React is coming soon.
I believe this may clear some confusion. At around 32:44 Derek says that when the prototype is changed (from the base Object (which is default )) , that the prototype.constructor will point to the Object object... In reality it points to the function the prototype Object was set with:
function Animal(){
this.kind="Animal"
this.breathing="yes"
}//default prototype =object Object
function Cat(){
this.type="Cat"
this.sound="meeow"
}
Cat.prototype=new Animal(); //set new prototype ...mess up .constructor
/// needs Cat.prototype.constructor=Cat ......to be accurate
var kitty1=new Cat();
console.log(kitty1.constructor)
///// Logs:
function Animal(){
this.kind="Animal"
this.breathing="yes"
}------incorrect
I didn't understand OO JS before this video. Thanks!
+Bogdan Mitrovic Your welcome :) I'm happy that I cleared it up.
At 48.58 var derekHero = Hero("Derek"), shouldn't there be a new here?
This is a special case too since it is a Singleton.
So what is the actual difference between having "new" and not having "new" before constructor function invocation in non-Singleton context?
New favorite channel. This is straight up aces.
+Naythan Williams Thank you very much :)
in the first 3 minutes i learned more than I did taking about 2 weeks of online courses and speaking to javascript developers. People really need to learn how to communicate better.
I'm happy it was helpful :) I do my best to cover a lot as quickly as possible
Hey Mr. Banas,
Great & Thorough Videos.
Do you have any videos focusing on the algorithmic method of solving problems to become a better programmer? Solving problems with arrays, classes, recursion & how-to think through complex problems and breaking down to solvable programming blocks of code to go through?
+William Quan Thank you :) I have tutorials on object oriented design that should help with that.
You've outdone yourself once again Derek! Thank you so much!
+George Park Thank you :) You're very welcome
I hope this video will lead to thousands of lines of awesome code by its viewers. Thanks Derek
+anubhav aeron I do as well :) You're very welcome
Do you use hotkey to move pointer up and down? Or other hotkey that is not default in sublime?
In linux,I set alt+F for left delete ,but it will open the selection bar rather than what I have set,but in windows7 it work fine,how to solve it?thanks
+毅丞Eason王 I'm not using any special hotkeys in the video. I edit out all of the pauses which may look like I'm doing something that I am not.
Hey Derek, could you make an asp.net tutorial series? I've been looking for one for my computer science project but there are no good ones out there (in youTube, at least), so I'd really love to see one of these' since you make so easy-to-understand tutorials.
Love your work. Thanks!
+טום טוביאס Thank you :) Yes ASP is on the list.
At 49:20 this is a global object. You don't create new object, you add props to global obj! And in fact yours singleton is refer to global object. What you need is to invoke Hero with keyword new.
The best JavaScript OOP tutorial on RUclips!
Thank you very much :)
Hi Derek,
At 49:30 you are using the Hero function without the new keyword isn't that going to create 'name' in the global scope? as 'this' will be pointing to the window object.
+Eric Noguchi Whoops little slip up there. Sorry I didn't catch that. It was a long video :)
I rewrote the code at 39:08:
function Extend(Child, Parent){
//function Temp(){};
//Temp.prototype = Parent.prototype;
Child.prototype = new Parent();
Child.prototype.constructor = Child;
}
does the same thing, so why is mine wrong or will crash at some point?
debug in your console
yeah I asbsolutely agree w. Abdel, you Derek are an endless fountain of wisdom/insight on ALL of the major web technologies and programming languages. Bravo!
+Steve Burrus Thank you for the very nice compliment :) I can promise you though that I'm not that smart.
+Derek Banas "I'm not that smart" I don't know aboiut that. You are certainly smarter than a ny other youtube video explainer of some web technology! What college did u go to or was all of your knowledge ontained thru a lotta self-teaching/training?
+Steve Burrus Thank you :) I went to school for electrical engineering and illustration. I wanted to work for a special effects company. I taught myself the basics of programming when I was very young. I learned the advanced stuff on the job.
That's encouraging to read.
I just graduated with a BSEE. I am doing an MSEE now, but I want to transition into computer programming. It seems like way more fun, and I like the idea of working from home and waking up and going to sleep on my schedule.
awesome talk
Coming from java OOP and learning javascript, ECMAScript 6 looks amazing
Yes it is a vast improvement
Hey when I try to Define GETTERS and SETTERS for the Coordinates (24:25) I get an Error
"Cannot read property 'call' of undefined".
Don't know why, I did exactly like you and before everything worked fine.
well if i use the other method you showed before and not " _defineGetter_/_defineSetter_ " it Works.
Excellent presentation. Thanks Derek!
Thank you :)
finally we are getting some Java into Javascript with Class coming in.
+gidmanone It is great that JS is constantly improving :)
i couldnt agree more with you man.huge step for Javascript this time.!!the whole prototype thing was the reason i contemplated trying my hands on Javascript.but now that there is class.
OOP on javascript is gonna get on a whole different level
You're welcome.
01:50 JavaScript Objects
02:36 Objects in Objects
04:12 Constructor Functions
05:58 instanceof
06:28 Passing Objects to Functions
08:09 Prototypes
09:34 Adding Properties to Objects
10:44 List Properties in Objects
11:38 hasOwnProperty
12:42 Add Properties to Built in Objects
14:31 Private Properties
18:01 Getters / Setters
21:20 defineGetter / defineSetter
24:38 defineProperty
27:07 Constructor Function Getters / Setters
29:40 Inheritance
37:13 Intermediate Function Inheritance
39:14 Call Parent Functions
41:51 ECMAScript 6
47:31 Singleton Pattern
49:32 Factory Pattern
52:53 Decorator Pattern
54:52 Observer Pattern
From.v.f.vvvv.vv...v.cnv.d.fvcvbv.vvvvv.c
Hi Derek,
Thanks for the great video.
@38.12 why cant we have this
Child.prototype = Parent.prototype;
Why did we do this
var Tmp = function() {}
Tmp.prototype = Parent.prototype;
Child.prototype = new Tmp();
This is the best JS OOP tutorial on the internet.
Thank you for sharing the code, and also leaving explaining comments:)
+Kerim Grozny Thank you for the compliment :) Your welcome
Derek I want to know your motivation in context of learning multiple programming languages and to such a great extent. How do keep yourself motivated until because this learning never ends?
Hello Derek,
This code looks wrong to me, Rat.prototype = Rodent.prototype; in oojavascript.html, because you are setting constructor for both Rat and Rodent.
Wow, dude! I can’t thank you enough for your channel!!! Please keep up the awesome work.
Thanks for this tutorial, very helpful.
One suggestion is consider doing tutorials in a dark mode. Personally I tend to get eyestrain with the classical black on white.
Anyhow thanks again.
+Tom Ormiston Your welcome :) I'll have to experiment with the different themes. Thanks for the input
Sorry but i need you help try to respond this please !
Tenho muitas duvidas sobre como melhorar o desempenho do programa e a velocidade porque o new Classe() cria uma nova instancia dentro disto causa mais lag a cada uso desse new? me Ajude não fiz aula com Professor de JAVA mesmo e estou com esta duvida a tempos faço video de plugin de minecraft (um pouco mais fácil) e preciso saber essas coisas para poder repassar nos meu tutoriais?
+Eduard A palavra-chave classe não está implementada atualmente com todos os navegadores , então eu não me preocuparia com isso neste momento. Eu cobri -lo apenas para que eu pudesse cobrir capacidades futuras.
Vlw:D
Love your "Learn... In One Video" videos!! So useful! Have you thought about doing one for Pascal?
Thank you thank you thank you!! Haven't watched it yet but I know it's going to be awesome! Been waiting for this one!! You are da man!!
+Mike Ulrich Thank you for the compliment :) I hope it helps.
Hi Derek, I have a question. These concepts have finally started to make sense to me in the Javascript OOP world. Great tutorial :)
However, would these concepts help me in developing front end with React js? or should i focus on functional programming of javascript? Thanks in advance!!
Hi Richard, I personally try to implement object oriented design in most of my code, but if the code is readable and flexible I see no problem with any design
Okay Thanks! You are awesome
@20:46 line 28....what if the user doesnt input commas when entering the data for parts...will that have some effect when it's used on the write method? E.g. if the data is put in like this setAddress("123 main Pittsburg pa")
+Derek Banas I'm actually new to all this coding and only languages I know are HTML and CSS. Please tell me which language I should learn first in order to start with websites and web-app developement like Ruby on Rails or Python or something else ? Please reply I'm confused.
+Sarthak Jha If you are most interested in web development JavaScript and PHP are the way to go. Take your time and have fun. I'll be making a bunch more JS tutorials over the next few weeks and my channel has many more.
Hello Derek,
object oriented javascript in Quiz game development. How do you structure back-end quiz game, I have only gotten as far as developing a Quiz game, on the client side, with Javascript and Arrays, for questions and answers.
Any comments please reply. thank's
Wow!!! this is the best useful javascript tutorial i have ever seen! thank you so much :)
Thank you :) I'm happy it helped
I want to tell you thank you for the video. My question I have a Sublime Text 3 but I don't get most of the autocomplete features as your? How can I make my editor more like your? I have downloaded a lot of Js plugins but they're not helpful at all. Thank you again.
+zeza zola Your welcome :) The plugin I have installed is JavaScript Completions.
Thank you very much
Derek you're teaching without waste of time, as always -Bravo. 1 question, if i know all of this ( in this video) , means - " I know some of advanced JS topics" or all of this is just a beginning?
Thank you :) This is basically everything about OO JS aside from object oriented design, design patterns, etc.
assuming that oop is kinda "advanced", sh*t ... i'm learning pretty fast.)))
Actually, using an _object mechanism provided by javascript_ is different than OOP.
And inside OOP world, this could be considered basic. Next step (and a good one to learn fast) would be learning *software design patterns*, as Derek suggested implicitly. :)
yeaaah, i've seen them thanks...)
at 34:25 you said Wolf instance of Animal, which confused me. Later I understood arcticWolf is actually an instance of Animal, not Wolf. So, can I say a constructor function can not be an instance of another constructor function?
I really apreciate your tutorials have taught me what programming is, you are very intelligent person to share their knowledge enriches it even more. Hope and move on anyone´s purpose. God bless you my friend.
+Josh Fernandez Thank you for the nice compliments :) I greatly appreciate them.
The class code from 43:19 to 44:46 did not work for me.
Also, that part of the tutorial wasn't included in the source code on your page.
hey Derek awesome stuff! what's next on the list of topics (that you're inevitably going to make more awesome videos about)?
I personally need to learn php / mvc (frameworks?), any pointers in your 700 videos :)
+Sam Deacon Thank you for the compliment :) Up next are JQuery, NodeJS, AngularJS and cross platform mobile games. I'll try to fit in a Laravel tutorial to teach PHP MVC. I have a bunch of PHP tutorials that I recently made.
At 25:30 when we are defining a prototype property of a Point object, is it completely necessary to define both a getter & a setter, or could we potentially just implement one or the other, or more than just those two?
I really like the pacing of this video. Thank you.
Thank you :)
Is there a way to define more 'intuitive' getters & setters? E.g. instead of circ.getRadius and circ.setRadius = 4, why not define sth like circ.getRadius() and circ.setRadius(4) -- but then those are just regular functions on the object. Aren't the former more confusing though? If you are doing circ.setRadius = 4, why not just do circ.radius = 4? (where radius is a prop of circ obj.)
The whole Java-bean-ish setter/getter thing is a waste of time (premature optimization). Just access the property/field directly. If this later becomes a problem, only then replace the properties with get/set handlers in the containing object's factory function.
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get
OK, also shown around 25:45.
which setter/getter methodology is preferred: the first one, second one, or last one? (that ends at 29:30)?
Simply superb stuff. Enjoyed a lot to refresh all js concents. 😊😊😀
Thank you very much :)
Many thanks for this great overview of the many possibilities. It leaves a bit overwhelmed giving a old school pascal background but knowing OO Design (not programming). I agree it would make sense to elaborate the programming choices and solution path visually with the why 's of the to be solved real live scenario 's providing the starting context. I realize that for example a pizza shop it would mean a video itself. Again, thx. for this great video to get a clue about the 'insane' number of possibilities .
+phkonings You're very welcome :) I agree that I could do many tutorials on this topic and I may just do that.
+Derek Banas ...in the meantime I have had a first look at the patterns book (flanagan) etc. I am really jumping in this exploring it from middle-out. I am currently thinking about the best way to approach a traffic light simulation as a simple state machine (red, green, orange, stop, run, onservice). DesignIdea is 3 objects (timer, trafficlight, display) . My thinking problem is that I see the object-abstraction as objects sending messages to each other and reacting on it based upon object state changes (in a networked object model). Instead of sending messages to each other and reacting on that, I guess they need to invoke each other methods instead. That implies the sending object needs to know the internal behavior of the receiving object instead of sending just a message (event). That 's where I get lost between design and programming.🤔
Thanks a lot Derek... :-)
I was having an number of questions regarding OO javascript but now most of them are solved.
You explained it quite effortlessly.
Thank you once again :-)
That's awesome! I'm glad it helped :)
I like the ECMAScript 6 because the style seems like to Java code. Then, I can reduce the time learning OO JavaScript.
+Lester Yes it will much improve JS whe it is supported by all the browsers. Can't wait for that to happen.
Awesome tutorial!
Derek, in the future, can you do a ionic framework tutorial?
+Alexey Kurbatsky Thank you :) I'll try to fit that in with my Angular tutorial.
I like JS more and more. It seems they are making it more pythonic as days go by. very useful
Yes I agree JS is constantly improving
why not just using simple methods defined inside the c'tor (as you showed in the beginning) for creating getters and setters?
I have no idea why, but the first bit of code:
var customer = {
name: "Tom"
function speak() {
return "My name is " + this.name;
};
};
document.write(speak());
Is throwing errors all over the place. I've tried playing around with it in jshint, but it keeps throwing errors on the function declaration on speak. Like it REALLY doesn't want the function to be created there. Does anyone know a workaround for this?
This is 10 months ago though here it is.
You missed the coma, and the function should be written like this.
var customer = {
name: "Tom",
speak: function() {
return "My name is " + this.name;
}
}
document.write(customer.speak());
I have no idea if you have actually done this ( not taking the videos posted onto your website in account ), but you should create videos that build onto these main videos, in a way of using the newly obtained knowledge to create something, a seperate, simple project.
This would completely solidify everything learned in this video. It is possible to go out and brew up personal projects, but it'd be a fun thing to watch/follow, and you'd be attracting a greater audience ;)
Thank you for the video as it is, I've learned quite some things from it!
+H. Pavlovic Thank you for the input :) Yes I'm working towards making videos in which I make a bunch of large JS programs. I'll mainly focus on games because people seem very excited about making them.
Derek Banas OOP really shines when working something out in a form of a game
First of thanks a lot from India! I don't understand why a Temp is being used at 37:30? Also, at 36:32, where as far as I understand, you are demonstrating multi level inheritance, where Rodent inherits from Animal and Rat inherits from Rodent, why do you do Rodent.prototype = new Animal() whereas Rat.prototype = Rodent.prototype;. Why is there a lack of similarity?
SaharS asked something like that in this video. Look for the answer i gave him here, maybe it helps :)
And i explayed a little more in prototypes answering to Kutsan Kaplan here too. Hope it helps :)
Hi, great video. May I ask, is there a difference between: function Mammal(name) { and var Mammal = function (name) ?
Little to nothing, actually. The first makes Algol/Simula (Pascal, C ... Java/C#) programmers more comfortable, the second is more like Lisp/Scheme, and emphasizes that a function is just another expression/value type. Either way, there is a symbol called "Mammal" that is visible (though possibly not yet defined) throughout whatever scope it is nested within. (I'm assuming a modern browser that shows the name in the debugger even if the "expression" style was used to set up the function)
Whats the point of using a getter or setter when you can just create a method within the object that does both?
What's the plan for next few weeks Derek?
+Patrick Kniest JQuery, NodeJS, Angular.