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 trialDaniel Nitu
13,272 PointsExplaining '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
20,629 PointsYou 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");
haniyahya
3,275 PointsI 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
231,269 PointsIf 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
13,272 PointsThank you for your answer!
Daniel Nitu
13,272 PointsDaniel Nitu
13,272 PointsThanks for your detailed explanation.
alan twix
608 Pointsalan twix
608 PointsBeautifully explained.