Classes, Prototypes and more Object lessons

Yes, these can be confused with objects. It's Monday morning and I'm exhausted. It's a great time to learn and absorb new information... well, maybe not. But here we go. My coffee is standing here getting cold and I'm reaching to the depths of my memory to remember things I learned a week ago. I need sleep, but let's continue.

What are classes?

Well, they're basically objects, they define a type of object constructor which contains properties (key:value) and methods (function()). For example what we have below is a book class. Every object we create using this constructor falls into the book class. Confused yet? I've decided to just use the two interchangeably - or maybe we use constructor when we're actually constructing an object, and class when we look at how that object was constructed. Enough of the banter, here's an example of a Book class:

function Book(title,author,isbn,;language) {
    this.title = title;
    this.author = author;
    this.isbn = isbn;
    this.language = language;
}

Prototypes

Prototypes define the construction of the object constructor. In other words it determines the properties and methods the constructor/class is limited to. Prototypes are automatically assigned by Javascript. That's as far as my understanding goes. Let's see if the Mozilla guys have an alternative definition.

So they do. There's a great write-up here, probably worth a read, but here's a quote to define prototype:

Prototype-based programming is an OOP model that doesn't use classes, but rather it first accomplishes the behavior of any class and then reuses it (equivalent to inheritance in class-based languages) by decorating (or expanding upon) existing prototype objects. (Also called classless, prototype-oriented, or instance-based programming.)

That's confusing, but hey, we'll figure it out. Doesn't use classes. Got it. Wait, what? Object based but without classes... Do I need to adjust my classes definition?

Don't read this classes article by Mozilla, because that's even more confusing. I think I'm going to leave this classes/prototypes nonsense for later. Back to lessons.

Now you tell me... Simple sample of objects, classes and prototypes

Let's say we have the book object constructor. This defines the class "Book" and determines the properties and methods for all the Books we create.

function Book(title,author) {
    this.title = title;
    this.author = author;
}

Now, if we wanted to add a couple of Book object we can do the following:

var herriot_1 = new Book("All Creatures Great and Small", "James Herriot");
var herriot_2 = new Book("It Shouldn't Happen to a Vet", "James Herriot");

Okay, so we've create an object constructor, and a class which defines two properties title and author. What happens now is Javascript automatically creates a prototype for Book. This prototype defines Book as having two classes. Now we know that every Book object we create has those two properties. Here's what happens next: we can add properties to our object when we create it. The simplest way to illustrate this is using a method, because it will actually give us feedback.

herriot_1.intro = function() {
    console.log(this.title + " was authored by " + this.author + ".");
}
// and call/invoke the method
herriot_1.intro();

So, now that we've added a method to herriot_1 is the method available to herriot_2? Did we change the class? If we run herriot_2.intro() it appears we didn't undefined is not a function (evaluating 'herriot_2.intro()'). Hmm, so much for global classes. That's where prototypes come in. We can add global properties and methods using prototype. Like so:

// Instead of writing
herriot_1.intro = function() {
    console.log(this.title + " was authored by " + this.author + ".");
}
// We write
Book.prototype.intro  = function() {
    console.log(this.title + " was authored by " + this.author + ".");
}

This adds the method to the Book prototype and updates the class. Now that makes sense.