JavaScript Objects, Prototypes, and Inheritance Explained

ECMAScript defines JavaScript as an object‑oriented language that runs in a host environment. The article begins by clarifying that JavaScript is fundamentally an object‑oriented language, even though it mixes class‑based and prototype‑based concepts.

Two major OOP camps are described: class‑based languages that use constructors (classes) to instantiate objects, and prototype‑based languages that clone existing objects. JavaScript belongs to the prototype camp but retains some class‑like features for compatibility.

Object literals are introduced as the simplest way to create objects. For example:

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

Properties can be accessed with dot notation ( person.name ) or bracket notation ( person['age'] ). The article notes that accessing a non‑existent member returns undefined .

When many similar objects are needed, constructor functions become useful. A constructor is just a regular function called with new :

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

Methods added inside the constructor are duplicated for every instance. To avoid this, the article shows moving methods to the prototype:

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

Inheritance is demonstrated by creating a base Animal constructor and then deriving Cat and Bird constructors that inherit from Animal via their prototypes:

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

The prototype chain is explained: each object has an internal [[Prototype]] (exposed as __proto__ in many browsers) that points to its prototype object, which may itself have a prototype, ultimately ending at Object.prototype . The chain is used for property lookup and for inheritance.

For a more “pure” prototypal style, the article introduces Object.create (ES5) and the __proto__ shortcut to directly link objects without constructors:

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.'

Because older environments may lack Object.create , a polyfill is provided that creates an intermediate constructor whose prototype is set to the desired prototype and returns a new instance.

if (!Object.create) {
    Object.create = function(proto) {
        function Intermediate() {}
        Intermediate.prototype = proto;
        return new Intermediate();
    };
}

Finally, the article summarizes that understanding JavaScript’s object model, prototype inheritance, and the various ways to create and extend objects is essential for building complex, maintainable front‑end applications.