difference between these 2 ways of creating a class in javascript

Question

what are the difference between these two ways of creating a class:

var apple = {
    type: "macintosh",
    color: "red",
    getInfo: function () {
        return this.color + ' ' + this.type + ' apple';
    }
}

function Apple (type) {
    this.type = type;
    this.color = "red";
    this.getInfo = function() {
        return this.color + ' ' + this.type + ' apple';
    };
}

and how do you instantiate and use the members?

Answer 1

While JavaScript is an object-oriented language, it does not use classes. You don't create a "class" in JavaScript. You create a "prototype". JavaScript is considered a Prototype-based language.

The first example is known as "object-literal notation" for creating an object (a subset of which is popularly known as JSON). An analogy to this in class-based languages is a "static" class, in the sense that you don't need to create a new instance of an object in this case; It "just exists", once you define it. You wouldn't instantiate it, you'd access members of apple immediately since apple is already an object. It is also similar to creating an anonymous class in Java. You'd use it like this:

alert(apple.getInfo());

With the second example, you're creating a prototype (not a class), which can be used to instantiate objects of type Apple. You could use it like this:

var redDelicious = new Apple("Red Delicious");
alert(redDelicious.getInfo());

JavaScript allows you to modify and add to an object's prototype, so after you declared your Apple prototype, you could still continue to add or change things about it like this:

Apple.prototype.size = "7cm";

When you do this, all objects derived from the Apple prototype will gain a size field. This is the basis for how the PrototypeJS framework works to modify native JavaScript objects to add & fix functionality.

Keep in mind that it is considered bad practice to modify the prototype of native JavaScript objects, so you should avoid doing it whenever possible.

Answer 2

Here are some differences:

• The first way is incomplete, there is a semicolon missing after the last closing bracket.

• The first way creates an object, while the second only declares a constructor that can be used to create objects.

• The first way can only create a single object, while the second way can be used by the new keyword to create multiple objects.

• The first way can't take any parameters to affect how the object is initialised, while the second can.

The first way creates a single object and assigns to the applevariable, which you can use to access the members:

alert(apple.type);

The second way is used with the new keyword to create instances:

var green = new Apple('Signe Tillisch');
alert(green.type);