Get the Cheat Sheet Here : http://goo.gl/CQVZsW
Best Object Oriented JavaScript Book : http://amzn.to/1L0Mvs8
Support me on Patreon : https://www.patreon.com/derekbanas
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
Original source
44 responses to “Object Oriented JavaScript”
"Use cheat sheets, don't try to memorise all this stuff – that's the reason why I made you cheat sheets"
I've never related to a YouTuber more until this very moment.
Excellent Video and learned a lot, Derek π
Can you tell me which source file(api) include to get javascript working?
EXCELLENT turorial!
Hi @Derek Banas, thanks for making this video. I want to know why we are using temp which comes in Intermediate Function Inheritrance section.
good job
The best JavaScript OOP tutorial on YouTube!
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?
Why did you make tutorial like this for the people who already know about OOP and not for the people who don't?
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 can't believe you can make these marathon videos! Thank you.
Excellent presentation. Thanks Derek!
ok. what the hack did u do with the singleton pattern there?
Hello, which is the version of Sublime Text and the JavaScript package that you are using in the video? Could you share the link available for download?
Why is the contructor of Canine set to it's own like this: Canine.prototype.constructor = Canine?
What is the use of this?
awesome!
I love some of the new features of ES6 but i'm still not happy with the use of the class keyword and inheritance. What is wrong with prototypal inheritance and constructor functions it makes so much more sense!
I liked it
How do you get the script editer(where u put script)
Which pattern is being used most? Or they are equal in usage?
Class, Extends, super()…tears of joy <3
what do you call the window.propt etc etc?
This guy ever takes breathe.
you speek to fast for a beginner and i don't understand anything , but you are good and that's a fact π
First time i came to know that
function abc(a,b,c,d,e){
}
abc.length will show the number of arguments.
#LIKE #LOVEJS
I dont exactly understand what exactly this code added by making things faster as is claimed:
// More often then not it makes more sense to just inherit the
// prototype to speed up the lookup process
function Rodent(){
this.name = "Rodent";
}
function Rat(){
this.name = "Rat";
}
Rodent.prototype = new Animal();
Rat.prototype = Rodent.prototype;
Rodent.prototype.constructor = Rodent;
Rat.prototype.constructor = Rat;
var caneRat = new Rat();
// caneRat inherits toString from Animal
document.write(caneRat.toString() + "<br />");
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?
which setter/getter methodology is preferred: the first one, second one, or last one? (that ends at 29:30)?
did you ever watch CodeSchool's "JavaScript Best Practices. I got completely lost right after Lesson Two, Section 4, maybe even before. Could you do a video that explains everything in that Course in more depth and on a simpler lever, as they went through the material very quickly.
at 23:41 I made my code like this and it works. what is wrong with it even though it works:
function address(){
this.adress = address;
this.city = city;
this.state = state;
this.getAddress = function(){
return this.street + ", " + this.city + ", " + this.state;
},
this.setAddress = function(theAddress){
var parts = theAddress.toString().split(", ");
this.street = parts[0] || "";
this.city = parts[1] || "";
this.state = parts[2] || "";
}
}
address.setAddress = "123 Main Street, SF, CA";
console.log(address.getAddress);
it seems that JS is almost the same as ruby, minus the need for { } and the () in function calls.
what else is a major diff so far?
Derek, anything on JS modules (exports, imports..)? and their best practices?
Hi Derek, very usefull tutorial.
at 7:50, why person1 and person2 aren't equal?
they look exactly the same
thank you!
With all the document.write(x + <br>) in these "tuts", found it helpful to wrap this all in a write function,
function write(s) {
document.write(s + "<br>");
}
Also makes it easier to keep up with Derek π
what is the editor you are using for java script?
ARE YOU A GOD?
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.)
I don't understand why prototype is even a thing. What is the reasoning behind having it.
This video explains OOPs concepts in JS perfectly and to the point, instead of going in circles when reading any book! Thanks much!
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!
Hey Derek, thanks again, your tutorials are among the best in internet i've found so far.
I have a question about private members. What i understood from your video is that, for a member to be private inside a "class/function", i have to use the "var" word before it… i have this code:
function Person(){
var name = "";
this.getName = function(){
return this.name;
};
this.setName = function(nom){
this.name=nom;
};
};
var john = new Person();
john.name = "John";
document.write(john.name);
And wheh i run it, the name shows up in the screen, shouldnt it be "undefined" since it's a private member? What am i doing wrong?
Thanks so much!
Hello Derek Banas,
This "oops concept" video tutorial are rally good and each example of session whiten a short time its explained so good examples. I was exactly suppose to looking for same video. And I find this video. The person who have little bit knowledge about "Javascript " and he want to know more advance about "Javascript" Opps concept its really good for them ..!
I also recommend ate to my friend this video. thank You Derek Banas..!