JavaScript Prototype Basics: A Friendly Introduction for Beginners

JavaScript is a prototype-based language. To master JS, understanding how prototypes work is crucial. This guide breaks down the core prototype concepts in a structured and beginner-friendly way with clear examples.

[1] What is a Prototype?

Every object in JavaScript has an internal link to another object called its prototype. This prototype forms a prototype chain, which is the mechanism JS uses for inheritance.

However, here’s where it gets interesting:

• Even functions are objects, which means they too have a prototype.

• If a property or method isn’t found on an object, JS looks up the prototype chain until it either finds the property or hits null.

• You can modify the prototype at runtime, and all existing instances will reflect the change — this is powerful, but can be dangerous if used carelessly.

This hidden link isn’t something you declare manually — JS creates and manages it under the hood to enable inheritance-like behavior in a language that doesn't have classical classes (until ES6 syntactic sugar).

[2] Function Declaration and Hidden Behavior

When you declare a function:

Copyfunction Person(name) {
  this.name = name;
}

JS does two key things automatically:

1. Creates a function object: Person

2. Adds a .prototype property to Person:

CopyPerson.prototype = {
  constructor: Person
};

This prototype property is used when creating instances with the new keyword.

[3] Understanding the Function Object

A function in JS is an object:

CopyPerson = {
  name: "Person",
  length: 1,
  prototype: { constructor: Person },
  __proto__: Function.prototype
}

Key Properties:

• Person.prototype: Used by instances created via new Person().

• Person.__proto__: Points to Function.prototype, since functions are objects.

[4] Creating an Instance with new

Copylet p1 = new Person("Rishi");

JS does:

1. Creates a new empty object: {}

2. Links it: p1.__proto__ = Person.prototype

3. Executes the constructor function in the context of the new object:

CopyPerson.call(p1, "Rishi");

This binds this inside the Person function to p1, assigning the name property.

Now p1 is:

Copy{
  name: "Rishi",
  __proto__: Person.prototype
}

[5] Adding Methods to the Prototype

To share methods across instances:

CopyPerson.prototype.sayHi = function () {
  console.log("Hi, I'm " + this.name);
};

p1.sayHi(); // Hi, I'm Rishi

Why this works:

• p1.sayHi is not found directly on p1

• JS looks up the prototype chain

• Finds sayHi on Person.prototype

[6] Common Confusion: prototype vs __proto__

[7] Object.prototype and Function.prototype

1. Object.prototype

• The top of the prototype chain.

• All objects inherit from Object.prototype.

• Common methods: toString(), hasOwnProperty(), etc.

Copylet obj = {};
console.log(obj.__proto__ === Object.prototype); // true

2. Function.prototype

• All functions inherit from Function.prototype.

• Includes methods like call(), apply(), bind().

Copyfunction test() {}
console.log(test.__proto__ === Function.prototype); // true

[8] Prototype Chain Recap

Copyfunction Person(name) {
  this.name = name;
}
let p1 = new Person("Rishi");

• p1.__proto__ === Person.prototype

• Person.__proto__ === Function.prototype

• Person.prototype.__proto__ === Object.prototype

• Object.prototype.__proto__ === null (end of chain)

[9]Useful Console Checks

Copyconsole.log(typeof Person); // "function"
console.log(Person.prototype); // { constructor: f Person() }
console.log(Person.__proto__ === Function.prototype); // true
console.log(p1.__proto__ === Person.prototype); // true
console.log(Person.prototype.constructor === Person); // true

✅ Conclusion

• prototype is used for instance inheritance

• __proto__ is the internal link to the prototype

• Object.prototype is the root of all objects

• Function.prototype is the root of all functions

• Use Function.prototype to share function-level behavior

• Use Person.prototype to share instance-level behavior

Understanding the prototype chain makes you a stronger JS developer. 🔥