JavaScript Object-Oriented Programming: Constructors

JavaScript Object-Oriented Programming: Constructors

By /

In JavaScript, constructors are special functions designed to create new objects. They serve as blueprints, allowing programmers to define the structure and behavior of an object once, then generate many instances from that same blueprint. This concept is fundamental in object-oriented programming, where managing many similar objects efficiently is a core need. Constructors give us a way to write clean, organized code that models real-world entities, from magical wizards to fierce fighters.

The power of constructors lies in their ability to automate object creation. Using the new keyword, JavaScript transforms a constructor function call into a fresh object, automatically assigning properties and preparing it for use. This makes it easier to create multiple objects that share common traits while still allowing unique differences. In this article, we’ll explore how to write constructors, add properties and methods, and use prototypes to share behavior across instances. We’ll build fun, lively examples to bring these concepts to life.

Writing a Basic Constructor Function

Constructors in JavaScript are just normal functions, but by convention, their names start with a capital letter to distinguish them from regular functions. When you call a constructor with new, JavaScript creates an empty object, sets this inside the constructor to that object, and returns it automatically.

Let’s start with a simple Wizard constructor. This constructor assigns two properties, name and spell, to every new wizard created.

function Wizard(name, spell) {
  this.name = name;
  this.spell = spell;
}

const merlin = new Wizard("Merlin", "Fireball");
console.log(merlin.name);  // Output: Merlin
console.log(merlin.spell); // Output: Fireball

Here, we define Wizard as a function that sets this.name and this.spell to the values passed as arguments. Using new Wizard("Merlin", "Fireball") creates a new object representing Merlin, with the fireball spell. The console logs confirm the object holds the correct data.

Adding Methods Inside Constructor Functions

Constructors can also define methods by assigning functions to properties on this. These methods become part of each individual object created by the constructor.

Let’s expand our Wizard by adding a method castSpell that prints a message including the wizard’s name and spell:

function Wizard(name, spell) {

  this.name = name;
  this.spell = spell;

  this.castSpell = function() {
    console.log(this.name + " casts " + this.spell + "!");
  };

}

const gandalf = new Wizard("Gandalf", "Lightning Bolt");
gandalf.castSpell(); // Output: Gandalf casts Lightning Bolt!

With this code, each wizard object has its own copy of the castSpell function. Calling gandalf.castSpell() logs the message showing Gandalf casting his spell. The method uses this to refer to the current object’s properties.

Using Prototypes with Constructors

While adding methods inside constructors works, it creates a new copy of each method for every object. To save memory and allow all objects of the same type to share methods, JavaScript uses prototypes.

The prototype is an object associated with every constructor. Methods added to the constructor’s prototype are accessible by all instances without duplicating the method code.

Here’s how to move castSpell to the prototype:

function Wizard(name, spell) {
  this.name = name;
  this.spell = spell;
}

Wizard.prototype.castSpell = function() {
  console.log(this.name + " casts " + this.spell + " from the prototype!");
};

const dumbledore = new Wizard("Dumbledore", "Elder Wand");
dumbledore.castSpell(); // Output: Dumbledore casts Elder Wand from the prototype!

By defining castSpell on Wizard.prototype, all wizard objects share one function. When dumbledore.castSpell() is called, JavaScript looks up the method on the prototype, finding and executing it.

Passing Arguments to Constructors

Constructors become powerful when you pass different arguments to create unique objects with varying properties.

Let’s create multiple wizards with different names and spells:

function Wizard(name, spell) {
  this.name = name;
  this.spell = spell;
}

Wizard.prototype.castSpell = function() {
  console.log(this.name + " casts " + this.spell + " from the prototype!");
};

const merlin = new Wizard("Merlin", "Fireball");
const morgana = new Wizard("Morgana", "Ice Shard");
const saruman = new Wizard("Saruman", "Earthquake");

merlin.castSpell();  // Output: Merlin casts Fireball from the prototype!
morgana.castSpell(); // Output: Morgana casts Ice Shard from the prototype!
saruman.castSpell(); // Output: Saruman casts Earthquake from the prototype!

Each wizard has a unique identity and magical power, demonstrated by passing distinct arguments to the constructor.

Constructor Functions with Default Property Values

Sometimes you want constructors to provide default values when arguments aren’t given. JavaScript’s simple conditional checks can help here.

Let’s update our Wizard to default the spell property to "Magic Missile" if no spell is provided:

function Wizard(name, spell) {
  this.name = name;
  this.spell = spell || "Magic Missile";
}

Wizard.prototype.castSpell = function() {
  console.log(this.name + " casts " + this.spell + " (default spell if none given)!");
};

const unknown = new Wizard("Unknown");
unknown.castSpell();  // Output: Unknown casts Magic Missile (default spell if none given)!

Here, if spell is undefined or falsy, the constructor assigns "Magic Missile". The method then prints this default spell when casting.

Using Constructor Functions to Create Complex Objects

Constructors can also create objects with nested structures such as arrays or objects as properties. This lets you model richer entities.

Let’s add an inventory property to our Wizard constructor that holds magical items. We’ll also add a method to list the items.

function Wizard(name, spell) {
  this.name = name;
  this.spell = spell || "Magic Missile";
  this.inventory = [];
}

Wizard.prototype.castSpell = function() {
  console.log(this.name + " casts " + this.spell + "!");
};

Wizard.prototype.listInventory = function() {

  if (this.inventory.length === 0) {
    console.log(this.name + " has an empty inventory.");
  } else {
    console.log(this.name + "'s Inventory: " + this.inventory.join(", "));
  }

};

const merlin = new Wizard("Merlin", "Fireball");
merlin.inventory.push("Magic Wand");
merlin.inventory.push("Potion of Healing");

merlin.castSpell();
merlin.listInventory();

Merlin now has an inventory array storing his items. The listInventory method displays all items or notes if empty. This example shows how constructors handle complex data.

Creating a Fun Example: A Mortal Kombat Fighter Constructor

To make things more exciting, let’s create a Fighter constructor inspired by Mortal Kombat characters. Each fighter will have name, style, and health properties. We’ll add punch and kick methods, some on the constructor itself, others on the prototype.

function Fighter(name, style) {

  this.name = name;
  this.style = style;
  this.health = 100;

  this.punch = function() {
    console.log(this.name + " throws a powerful punch!");
  };

}

Fighter.prototype.kick = function() {
  console.log(this.name + " executes a spinning kick!");
};

const scorpion = new Fighter("Scorpion", "Ninjutsu");
const raiden = new Fighter("Raiden", "Thunder");

scorpion.punch();
scorpion.kick();

raiden.kick();
raiden.punch();

Here, punch is defined inside the constructor, so each fighter gets their own copy. kick is shared via prototype. Calling these methods shows dynamic combat moves named after our fighters, making the example engaging and lively.

Conclusion

Constructors in JavaScript are powerful tools for creating multiple objects with shared structure and behavior. We explored defining constructors, adding properties and methods, using prototypes for method sharing, passing arguments, and setting default values. We also saw how to model complex objects with nested data. Finally, our Mortal Kombat fighter example showed how constructors bring interactive characters to life with unique and shared actions.

Mastering constructors helps you organize and scale your JavaScript code, making it easier to manage many related objects with clear, reusable blueprints.

References

If you want to learn more about JavaScript constructors and prototypes, these resources are excellent starting points:

Related Posts

Scroll to Top