D4mations.com

Modular Javascript #6 – Classical Inheritance & OOP with JS



In this video, we will start covering object oriented programming in Javascript. There are several ways to do it – the first is called “classical inheritance”.

Here’s the link to the “inherit” function I use here:
https://github.com/nodejs/node-v0.x-archive/blob/master/lib/util.js#L634-L644

Using a constructor, a prototoype, and the “new” keyword, we can create multiple copies or “instances” of a module, each with unique properties, but shared functionality.

We can also implement inheritance in Javascript. If we create a new module, we can inherit the functionality of a parent module with a simple inheritance helper function.

Original source

d4mer

, , , , , ,

44 responses to “Modular Javascript #6 – Classical Inheritance & OOP with JS”

  14. Effing amazing playlist! I've had so many lightbulb moments watching these. Big question though…how much of this changes with ES6? Enough to make some of it obsolete or did ES6 just provide another way of doing it?

  15. Hello Learncode Academy my name is George and i want to make a programme with javascript that use nodejs and some other libs beacause the programme is gona be very large i want to seperate the code in modules or plugins, i watch your videos and i am comfuse what is the write way : to use classical inheritance – OOP or pupsub

    what i want is to have a CORE mudule – the modules and the libs like jquery bootstrap what is the best for that web app??

    Thank you.

  16. with making constructors and instances can you like in your object literal pattern of javascript create "Private" attributes and methods? Also i've been reading classical inheritance in javascript is frowned upon now? is this true, i keep hearing use prototypal inheritance but i feel like its a blend of classical too so whats the big diff? other than writing methods on the prototype lol, you can tell i am pretty confused. i come from ruby btw and learning js now

    When should I use prototypal inheritance versus object literal pattern? in your opinion? great videos btw!

  17. Thanks for your help. But I have a question:
    if we placed var Musician = function() {… after inherits()
    The page give a message: belly.getInstrument is not a function(…)?
    What going on for this?

  24. Can you teach us how to organize a big/small javascript project. With some documentation things like i saw in that nodejs file:

    /**
    * Inherit the prototype methods from one constructor into another.
    *
    * The Function.prototype.inherits from lang.js rewritten as a standalone
    * function (not on Function.prototype). NOTE: If this file is to be loaded
    * during bootstrapping this function needs to be rewritten using some native
    * functions as prototype setup using normal JavaScript does not work as
    * expected during bootstrapping (see mirror.js in r114903).
    *
    * @param {function} ctor Constructor function which needs to inherit the
    * prototype.
    * @param {function} superCtor Constructor function to inherit prototype from.
    */

  27. hey i do prototypal inheritance differently is this ok? and whats the difference btwn what you did?

    “` var Musician = function(sounds) {
    this.sounds = sounds;
    };

    Musician.prototype.solo = function(length) {
    var solo = "";
    for (var i=0; i<length; i++) {
    solo += this.sounds[i % this.sounds.length] + " ";
    }
    console.log(solo);
    };

    var Guitarist = function() {
    Musician.call(this, ['Twang', 'Thrumb', 'Bling']);
    this.strings = 6;
    };
    Guitarist.prototype = Object.create(Musician.prototype);
    Guitarist.prototype.constructor = Guitarist;

    Guitarist.prototype.tune = function() {
    console.log('Be with you in a moment');
    console.log('Twoning sproing splang');
    };

    var Bassist = function() {
    Musician.call(this, ['Boink', 'Bow', 'Boom']);
    this.strings = 4;
    };
    Bassist.prototype = Object.create(Musician.prototype);
    Bassist.prototype.constructor = Bassist;

    var nigel = new Guitarist();
    nigel.tune();
    nigel.solo(8);

    var derek = new Bassist();
    derek.solo(4);

    “`

  33. EDIT: looks like extends copies over methods and attaches them directly to the object, so no, they don't quite do the same thing. one thing i didn't understand about inherits is how it created Musician as a new instance of Person. i'd expected to see something like ctor.super_ = new superCtor; but it was missing the 'new' keyword.

    does inherits do the same thing as underscore.js _.extends?

  35. Thank you so much for creating such content rich videos.
    Can you expand upon how best practices from module programming such as a clean API extends to the realm of OOP? I guess im confused if I can combine both of these together and if so how would I implement an API in a class?

  36. If Person takes two arguments, 'name' and 'age' for example, how would Musician inherit both of those? Because when Musician.super_.call() is called you're passing through 'this' and the argument 'name', but you don't seem to identify which property gets asigned. Or is that automatically determined by the name of the argument that is passed into Musician?

  43. Great video! But I have a question:
    Why do we create method of prototype by assining a function to Person.prototype.sayName instead of assigning it inside the constructor scope? (it would look like:
    var Person = function(name){
    this.name = name;
    this.sayName = function(){..}
    }

  44. I read about this recently on MDN (Person, Employee, Customer, Mime example), but your video goes the extra mile by including the "inherits" function with data/accessor descriptors. Very informative and useful material. Thanks.

Leave a Reply