I recently finished the Object Oriented Programming section under Algorithms And Data Structures Cert and its mainly about using prototypes, inheritance and setting up an IIFE but it didnt touch on classes. In a recent freeCodeCamp video with Beau about modules from 3 months ago, he outlines the IIFE method as being old and says “theres a new way to do it”. Do classes replace the need to write prototype code such as this?
function Animal() { }
Animal.prototype.eat = function() {
console.log(“nom nom nom”);
};
function Bird() { }
Bird.prototype = Object.create(Animal.prototype);
Bird.prototype.constructor = Bird;
Bird.prototype.fly = function() {
console.log(“I’m flying!”);
};
I’m really lost now as to how this sort of code ties in with using classes in ES6, does anyone know of a medium article or something similar that goes over how all these concepts work together?
Thanks in advance to anyone who has any suggestions
Yes, they do. Use of ES6 classes is, mostly, a cosmetic lift on what we already have. Behind the scenes, the methods defined in the class are being assigned to the constructor’s prototype. So you’re not seeing it happen, but it’s happening all the same.
Oddly, there was another question a little while ago about how to view the methods attached to the class (rather than the methods attached to an object). I got something to do just that, but it does demonstrate that the methods defined in your class are being attached to the class prototype.
Here’s a link to the repl where I was testing that.
The relevant bit of code that shows the prototype bits is:
// All our other initialization has happened. But the class has been defined,
// so we can get at its prototype. Note that I defined .getAllMethods() in my
// class, per ES6, and that it is attached to the prototype automagically.
let myClassMethods = this.constructor.prototype.getAllMethods();
console.log("And the class methods IN THE CONSTRUCTOR: ", myClassMethods)
1 Like
Thanks for your reply, it clearly a few things up
In the link, whats the reason for having the getAllMethods() function in the main class instead of just directly defining them within the constructor? Wouldnt they already be in the prototype of any child classes if they were just defined in the constructor without needing the myClassMethods object?
SO… within that same repl, I’ve created another class, Businessman (I know, politically incorrect. Sue me.) – and within the constructor for that, I attached the function. If you wander back to the repl, you’ll see – Fred is an instance of Businessman.
But methods attached within the constructor (using this.getBusiness = function(){...} ) are attached to the instance, not to the constructor.
So the only way to insert methods into the parent prototype(Person) to be passed down the prototype chain using ES6 classes is to assign the methods object in the constructor like you did here?
let myClassMethods = this.constructor.prototype.getAllMethods();?
I feel like ive seen methods being added to the prototype in classes in a different way before, but it sounds like I’m probably wrong 
Thanks for your help though, its making a bit more sense now.
Nope. You can still attach them by the Person.prototype.foo = function(){..} after the fact if you want. You have both options. Just know that, if you do, future developers encountering your code may be sharpening their pitchforks.
There are a few reasons you may want to be able to mix and match, both to attach methods within the class and add them by prototype – for example, suppose you’ve created mixin methods. It would make sense, in that case, do define the class-specific methods within the class definition, but ones that you use generically can be assigned by something.prototype.foo
ES6 classes don’t take away anything from what you’ve learned. That all still works. It is creating a prototype exactly as you are used to. It simply gives you the option.
1 Like
That particular repl got really really meaty.
Not only do we have the class method conversation going on (with Person), but we looked at how to attach instance methods using classes (in the Businessman class, using the this. keyword in the constructor), and I toyed with using .bind() within a constructor to bind the class methods to the current instance (in the Island class).
The reason I called that one Island is because of the mechanism used to bind the class methods to the instance – they are being cloned into the instance itself. We can see that when I call beachBum.getAllMethods() – it shows all the constructor methods as being directly attached to the instance.
I really enjoyed both of these conversations, and I really REALLY learned a lot in trying to find answers for both. Thank you for the opportunity, @korora747 and @aykutkardas – the challenge and the experimenting were very rewarding.
1 Like