Inheritance in JavaScript: How can I call the object parent?

Question

I'm building a multi-source audio player in JavaScript and my goal is to code several providers classes (for Youtube, Soundcloud, etc.) that would extend a base class, so each provider would have the same methods and properties, but I would be able to customize them for each provider.

Here's a simplified example.

The base class looks like this :

function Player_Provider(slug) {
    this.slug = slug;
    console.log("Player_Provider init: " + this.slug);
};

Player_Provider.prototype.loadUrl = function(url) {
    console.log("provider "+this.slug+" - load URL: " + url);
};

I "extend" this class for providers; for example:

function Player_Provider_Youtube() {
  Player_Provider.call(this, 'youtube');
}

Player_Provider_Youtube.prototype = Object.create(Player_Provider.prototype); //inherit methods
Player_Provider_Youtube.prototype.constructor = Player_Provider_Youtube; //fix constructor

Player_Provider_Youtube.prototype.loadUrl = function(url) {
    Player_Provider.prototype.loadUrl(url);
}

And then I register it like this:

var providers = [];
providers.youtube = new Player_Provider_Youtube();
providers.youtube.loadUrl("https://www.youtube.com/watch?v=5SIQPfeUTtg");

Which outputs in the console:

Player_Provider init: youtube
provider undefined - load URL: https://www.youtube.com/watch?v=5SIQPfeUTtg

As you can see, the console outputs:

"provider undefined - load URL..."

when I would like it to output:

"provider youtube - load URL..."

The idea here is that in each function of the provider (which would every time override a function from the base class), I would call the "parent" function first, at least to output a console message like here; and eventually to run some code - in the idea of having the most clean code possible.

I'm more comfortable with PHP and it's the first time I'm trying to do that kind of stuff using JavaScript.

How would you do this and why is my variable undefined?

T.J. Crowder · Accepted Answer · 2017-04-20 15:22:40Z

3

In ES5 and earlier, it's a pain. You use call or apply, and as you've found, it's really verbose.

Player_Provider_Youtube.prototype.loadUrl = function(url) {
    Player_Provider.prototype.loadUrl.call(this, url);
    // ------------------------------^^^^^^^^^^^
}

I found that painful enough I wrote a library to deal with it (here), but it's obsolete now.

But, here in 2017, you don't do that anymore; instead, you use ES2015's class syntax and transpile (with something like Babel) so it runs on older JavaScript engines:

class Parent {
    method() {
        console.log("Parent method");
    }
}
class Child extends Parent {
    method() {
        console.log("Child method");
        super.method();
    }
}
new Child().method();

That handles all the nasty plumbing for you. It's still the same prototypical inheritance + constructor functions that it was before ES2015, it's just much simpler syntax for it. (And enables a couple of things we couldn't do with the old syntax.)

answered Apr 20, 2017 at 15:22

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

gordie Over a year ago

Waw, didn't knew that stuff. Thanks a lot ! I accepted Jason's answer but voted yours :) - Not having to transpile is easier for me, I guess.

gordie Over a year ago

@t-j-crowder : ok, but can you explain why obsolete ? You mean this first code works but should be avoided ?

T.J. Crowder Over a year ago

@gordie: My "but it's obsolete now" was referring to my library. But if you don't want to use ES2015 syntax and transpile, my library (Lineage) is quite useful for doing this stuff.

Jason · Accepted Answer · 2017-04-20 15:25:13Z

I was just doing a JSFiddle and T.J.Crowder beat me to it!

function Player_Provider(slug) {
    this.slug = slug;
    console.log("Player_Provider init: " + this.slug);
};

Player_Provider.prototype.loadUrl = function(url) {
    console.log("provider "+this.slug+" - load URL: " + url);
};

function Player_Provider_Youtube() {
  Player_Provider.call(this, 'youtube');
}

Player_Provider_Youtube.prototype = Object.create(Player_Provider.prototype); //inherit methods
Player_Provider_Youtube.prototype.constructor = Player_Provider_Youtube; //fix constructor

Player_Provider_Youtube.prototype.loadUrl = function(url) {
    Player_Provider.prototype.loadUrl.call(this, url);
}

var providers = [];
providers.youtube = new Player_Provider_Youtube();
providers.youtube.loadUrl("https://www.youtube.com/watch?v=5SIQPfeUTtg");

https://jsfiddle.net/4Lmkuwts/

Collectives™ on Stack Overflow

Inheritance in JavaScript: How can I call the object parent?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related