Modular Javascript #6 - Classical Inheritance & OOP with JS

bicycles reviews | bicycles videos | bicycles online

Author: LearnCode.academy

31525View

14m 5sLenght

363Rating

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.

Comments

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!

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?

es6 has the class syntax like you see in other languages

10:28 what is that IDE magic?

Thanks for great tutorial, this really helped.

ReferenceError: inherits is not defined

What is super_ exactly? It kind of seems like prototype, but that doesn't really make sense. Why would there be two classes from which the ctor object inherits from?

For those familiar with Java or C#, saying Person.call(this, name) is the equivalent of saying super(name).

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

Keep going! This kind of video's is what the world needs.

BOBBY!!!

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

```

loving your videos and series! keep the good work, this is some good material, helping me heaps. cheers

Thanks for the clear video. As a backend developer I am horrified by this though xD Must be the hackiest way of OOP I have ever seen (and I write a lot of PHP... o.o').

So i think many things have changed with ES6 now with classes right??

It's very helpful series for JS beginner like me, i like your presentation, it's very easy to understand, clearly and effective.
Thanks a lot.

doesn't ES6 have a built-in 'inherits'? superclass or something or other.

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?

What makes the inherits function special instead of simply using Musician.prototype = Object.create(Person.prototype)?

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?