Confusion about how to create classes in JavaScript

Question

In the past when creating "classes" in JavaScript, I have done it like this:

function Dog(name){
    this.name=name;
    this.sound = function(){
        return "Wuf";
    };
}

However, I just saw someone do it like this instead:

var Dog = (function () {
    function Dog(name) {
        this.name = name;
    }
    Dog.prototype.sound = function () {
        return "Wuf";
    };
    return Dog;
})();

Can you do it both ways, or is the way I've done it wrong? In that case, why? And what exactly is the difference between the two in terms of what we end up with? In both cases we can create an object by saying:

var fido = new Dog("Fido");
fido.sound();

I hope someone will enlighten me.

Answer 1

There are two important differences between your way and theirs.

1. Wrapping in a self invoking function ((function() { ... })();)
2. Using the .prototype property over this. for methods.

Wrapping things in a self invoking function, then assigning the result (as defined in the return statement to a variable is called the module pattern. It's a common pattern to ensure scope is more controlled.

Using Dog.prototype.sound = function() {} is preferable to this.sound = function(). The difference is that Dog.prototype.sound is defined once for all objects with the Dog constructor, and the this.sound = function() {} is defined again for each Dog object created.

The rule of thumb is: Things that are individual to an object (usually its properties) are to be defined on this, while things that are shared to all objects of the same type (usually functions) are to be defined on the prototype.

Answer 2

With your code, you're creating a new function sound for every new Dog instance that's being created. Javascript's prototype avoids this by creating only a single function which all object instances share; basically classical inheritance.

In the second code you're showing that's just additionally wrapped in an IIFE, which doesn't do much in this case.