Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Object-Oriented JavaScript (2015) Prototypal Inheritance Updating the Song Object

Daniel Nitu
Daniel Nitu
13,272 Points

Explaining 'this' in Media.call();

I'll write here what the this element does in the call() function, as I understand. Andrew does a really poor job of explaining.

From what I can tell, the code below

function Song(title, artist, duration) {
    Media.call(this, title, duration);
    this.artist = artist;
}

...is equivalent to:

function Song(title, artist, duration) {
    this.title = title;
    this.duration = duration
    this.artist = artist;
}

So basically, when the browser sees Media.call(this, title, duration), it translates it into this.title and this.duration, but in the context of the Media function.

Please let me know if this is the correct explanation or if I got it wrong.

3 Answers

Erik Nuber
Erik Nuber
20,629 Points

You have the idea correct.

function Media(title, duration) {
   this.title = title;
   this.duration = duration;
   this.isPlaying = false;
}

Media here is a constructor function. It allows any number of items to be created and assigns each of those items it's own set of variables title, duration and isPlaying.

function Song(title, artist, duration) {
    Media.call(this, title, duration);
    this.artist = artist;
}

Song is also a constructor function. However because we already have a Media constructor, we can use it similar to how a prototype would work. By using ConstructorName.call we are saying we want to use another function.

.call would be like any other method but, it is designed specifically to allow two functions to work together.

So in this case like you already understood, we don't need a Song constructor repeating the same thing Media does, we can just call it and end up with a Song that has

this.title = title
this.artist = artist
this.duration = duration
this.isPlaying = false

This is similar to how a prototype would work. At anytime, if we want to add something into the Song constructor we could create a prototype that allows you to add something in indirectly.

Song.prototype.yearReleased = function(year) {
     console.log("The song " + this.title + " by " + this.artist + " came out in " + year);
}

and when the prototype is called we can simply call it the same way we would something in the constructor function.

yourSongVariable.yearReleased("1989");

Daniel Nitu
Daniel Nitu
13,272 Points

Thanks for your detailed explanation.

alan twix
alan twix
608 Points

Beautifully explained.

I sill don't understand how 'Media.call(this, firstName, lastName)' has 3 arguments, and the constructor function 'function Media(title, duration) {...}' expects 2 arguments

So I expect it to take 'this' as a 'firstName' and 'firstName' as a 'lastName', and actually drop the lastName we passed in 'Media.call(this, firstName, lastName)' ?!

Or is there a special case for .call method where it ignores the first argument or something?

Thanks

Steven Parker
Steven Parker
231,269 Points

If you recall (or rewind the video), the Song function started out like your second version, and Media was called to replace those lines you added back in. So yes, its equivalent (plus it also sets isPlaying to false).

Daniel Nitu
Daniel Nitu
13,272 Points

Thank you for your answer!