Object Oriented JavaScript




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”

  1. "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.

  2. 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?

  3. 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.

  4. 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!

  5. 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 />");

  6. 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?

  7. 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.

  8. 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);

  9. 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 πŸ˜‰

  10. 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.)

  11. 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!

  12. 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..!

Leave a Reply