Why JavaScript Is Prototypal: Mastering Objects, Constructors, and Inheritance

JavaScript Is Prototypal (‑ish)

All object‑oriented languages handle objects at their core, but they split into two camps: class‑based languages that use classes as blueprints, and prototype‑based languages that clone existing objects. JavaScript follows the prototype model, yet retains some class‑like features.

A Language of Objects

In JavaScript an object is a collection of key‑value pairs . Keys are always strings; values can be any type, including functions, which we call methods . Objects can have zero or unlimited properties.

Object Literals

The simplest way to create an object is with an object literal.

var person = {
    name: 'Mark',
    age: 23
};

If a property name contains spaces or special characters, it must be quoted.

var person = {
    'name of the person': 'Mark',
    'age of the person': 23
};

Accessing Members

Members can be accessed with dot notation or bracket notation .

console.log(person.name);          // 'Mark'
console.log(person['age']);       // 23

Bracket notation is required when the key is not a valid identifier.

Constructor Functions

A constructor function creates a blueprint for multiple similar objects. Using new returns a fresh object whose this points to the new instance.

function Person(name, age) {
    this.name = name;
    this.age = age;
}
var mark = new Person('Mark', 23);
var joseph = new Person('Joseph', 22);
console.log(mark.name); // 'Mark'

Adding methods inside the constructor creates a new copy for each instance, which is inefficient.

Prototype Property

Every function has a prototype object. Methods placed on this prototype are shared by all instances.

function Person(name, age) {
    this.name = name;
    this.age = age;
}
Person.prototype.log = function () {
    console.log(this.name + ', ' + this.age);
};
var mark = new Person('Mark', 23);
mark.log(); // 'Mark, 23'

Later you can add more methods without touching the constructor:

Person.prototype.setName = function (name) { this.name = name; };
Person.prototype.getName = function () { return this.name; };
Person.prototype.setAge = function (age) { this.age = age; };
Person.prototype.getAge = function () { return this.age; };

Inheritance and the Prototype Chain

Instances inherit from their constructor’s prototype. The prototype itself may inherit from another prototype, forming a chain that ultimately ends at Object.prototype.

function Animal(name) { this.name = name; }
Animal.prototype.walk = function () { console.log(this.name + ' is walking'); };
function Cat() {}
Cat.prototype = new Animal('cat');
Cat.prototype.meow = function () { console.log('Meow!'); };
var kitty = new Cat();
kitty.walk(); // 'cat is walking'
kitty.meow(); // 'Meow!'

Adding a method to Animal.prototype after an instance is created makes the method instantly available to all existing instances because they delegate look‑ups up the chain.

__proto__ and Object.create

Modern engines expose a mutable __proto__ property that lets you set an object’s internal prototype directly.

var Animal = { name: 'animal', eat: function () { console.log('The ' + this.name + ' is eating'); } };
var Cat = {};
Cat.__proto__ = Animal;
var myCat = {};
myCat.__proto__ = Cat;
myCat.eat(); // 'The animal is eating'

ES5 introduced Object.create(proto), which creates a new object whose internal prototype is proto without invoking a constructor.

var Animal = { name: 'animal', eat: function () { console.log('The ' + this.name + ' is eating'); } };
var Cat = Object.create(Animal);
Cat.name = 'cat';
var myCat = Object.create(Cat);
myCat.eat(); // 'The cat is eating'

For environments lacking Object.create, a polyfill can be written using an intermediate constructor.

Simplified Prototypal Programming

Instead of juggling constructors, you can build objects directly from other objects, treating the source object as the prototype.

var Animal = { name: 'animal', eat: function () { console.log('The ' + this.name + ' is eating'); } };
var Cat = Object.create(Animal);
Cat.name = 'cat';
var myCat = Object.create(Cat);
myCat.eat(); // 'The cat is eating'

Wrap‑Up

JavaScript’s object system blends prototype‑based inheritance with class‑like syntax. Understanding object literals, constructor functions, the prototype property, inheritance, the prototype chain, __proto__, and Object.create equips you to write clear, reusable code for complex applications.