JS MASTER CLASS /// UNDERSTAND PROTOTYPES /// MASTER THE CHAIN /// OBJECT ORIENTED /// JS MASTER CLASS /// UNDERSTAND PROTOTYPES /// MASTER THE CHAIN /// OBJECT ORIENTED /// JS MASTER CLASS /// UNDERSTAND PROTOTYPES /// MASTER THE CHAIN /// OBJECT ORIENTED ///

JavaScript Prototypes

Unlock the core inheritance model of JavaScript. Learn how objects share methods, how the prototype chain works, and how `this` plays a crucial role.

prototypes.js
1 / 17
123456
🧬

Tutor:JavaScript is inherently a prototype-based language. Unlike languages with classical inheritance like Java or C++, JS uses objects that link to other objects to inherit features.


Skill Matrix

UNLOCK NODES BY MASTERING JS OBJECTS.

Concept: Prototypes

Almost all objects in JavaScript have a hidden link (prototype) to another object to inherit methods.

System Check

Which property natively holds the prototype link inside a constructor function to be passed down?

Community Holo-Net

Showcase Your Chains

ACTIVE

Built a complex prototypal inheritance system? Share your code and ideas.

Support Us

JavaScript Prototypes & Inheritance

Author

Pascual Vila

Frontend Instructor // Code Syllabus

In JavaScript, objects have a special hidden property `[[Prototype]]` (historically accessed via `__proto__`), that is either `null` or references another object. That object is called "a prototype".

The Prototype Chain

When you read a property from a JavaScript object, and it's missing, JavaScript automatically takes it from the prototype. If it can't find it there, it looks at the prototype's prototype, and so on, until it hits `null`. This is known as "prototypal inheritance".

The F.prototype Property

Constructors (functions used with `new`) have a special property named `prototype`. When an object is created via a constructor, the new object's `__proto__` is set to the value of the constructor's `prototype` property. This allows all instances to share methods.

Object.create() vs Classes

While modern JavaScript provides the `class` syntax, under the hood it is still just syntax sugar over prototypes. `Object.create(proto)` allows you to directly specify an object's prototype without dealing with constructor functions, leading to "pure" prototypal inheritance (sometimes called OLOO - Objects Linking to Other Objects).

View Full Transcript+

This section contains the full detailed transcript of the interactive journey. It explains how JavaScript avoids duplicating methods for every object instance by storing them once in a prototype object, and connecting instances via the hidden internal [[Prototype]] link. It also explains the difference between the 'prototype' property on functions and the '__proto__' accessors on instances.

Prototypes Glossary

[[Prototype]]

The internal hidden slot that points to another object (or null) from which an object inherits properties.

snippet.js

__proto__

A historical getter/setter to access the internal [[Prototype]] of an object. Highly discouraged in modern production code.

snippet.js

F.prototype

A property on constructor functions. When `new F()` is called, it assigns this object to the new instance's [[Prototype]].

snippet.js

Prototype Chain

The sequence of objects linked via [[Prototype]] that JavaScript traverses when resolving a property access.

snippet.js

Object.create()

Creates a new object, using an existing object as the prototype of the newly created object.

snippet.js

hasOwnProperty()

A method that returns a boolean indicating whether the object has the specified property as its own property (not inherited).

snippet.js