JavaScript Notes

JavaScript Prototypes – Prototype-Based Inheritance, Object.create & prototype Property

Understand JavaScript prototypes: prototype property, prototype chain, Object.create, adding methods to prototypes, and how ES6 classes map to prototypes. With interview Q&A.

Every JavaScript function has a prototype property — an object that instances created by that function automatically inherit from. This is JavaScript's native mechanism for sharing methods across objects without copying them.

Understanding prototypes is the foundation of everything in JavaScript OOP — classes, inheritance, the prototype chain, this behavior — it all builds on this one concept.

📊 Prototype Relationship Diagram

Example

💻 Example 1 — Adding Methods to a Prototype

Example

Output

Hello, I'm Riya!
Hello, I'm Aman!
wohotech.in
gmail.com
true

💻 Example 2 — Prototype vs Own Properties

js example

function Product(name, price) {
  this.name  = name;    // own property
  this.price = price;   // own property
}

Product.prototype.currency = "INR";          // shared property
Product.prototype.formatted = function() {   // shared method
  return `${this.currency} ${this.price} — ${this.name}`;
};

const laptop = new Product("Laptop", 75000);
const phone  = new Product("Phone",  25000);

console.log(laptop.formatted());
console.log(phone.formatted());

// Own properties
console.log(Object.keys(laptop));    // only own enumerable props
console.log(laptop.hasOwnProperty("name"));      // true — own
console.log(laptop.hasOwnProperty("currency"));  // false — inherited
console.log(laptop.hasOwnProperty("formatted")); // false — inherited

Output

INR 75000 — Laptop
INR 25000 — Phone
[ 'name', 'price' ]
true
false
false

💻 Example 3 — How ES6 Classes Map to Prototypes

js example

// ES6 Class version
class Animal {
  constructor(name) { this.name = name; }
  speak() { return `${this.name} makes a sound`; }
}

// Equivalent prototype version
function AnimalOld(name) { this.name = name; }
AnimalOld.prototype.speak = function() { return `${this.name} makes a sound`; };

// They produce the same prototype structure
const a1 = new Animal("Cat");
const a2 = new AnimalOld("Cat");

console.log(a1.speak());
console.log(a2.speak());

// Both methods live on the prototype
console.log(typeof Animal.prototype.speak);       // "function"
console.log(typeof AnimalOld.prototype.speak);    // "function"

// Class syntax IS prototype-based under the hood
console.log(typeof Animal);    // "function" — a class is a function!

Output

Cat makes a sound
Cat makes a sound
function
function
function

💻 Example 4 — Object.create() for Prototypal Inheritance

js example

// Define base object (serves as prototype)
const personProto = {
  greet()  { return `Hi, I'm ${this.name}, ${this.age} years old`; },
  isAdult(){ return this.age >= 18; }
};

// Create instances using Object.create
const riya = Object.create(personProto);
riya.name = "Riya";
riya.age  = 22;

const kid = Object.create(personProto);
kid.name = "Aryan";
kid.age  = 12;

console.log(riya.greet());
console.log(kid.greet());
console.log(riya.isAdult());
console.log(kid.isAdult());

// riya and kid SHARE the same prototype object
console.log(Object.getPrototypeOf(riya) === personProto); // true
console.log(Object.getPrototypeOf(kid) === personProto);  // true

Output

Hi, I'm Riya, 22 years old
Hi, I'm Aryan, 12 years old
true
false
true
true

💻 Example 5 — Extending Built-In Prototypes (Use with Caution)

Example

// Extending built-in prototypes — only in controlled environments! // Never do this in a library or shared code Array.prototype.sum = function() { return this.reduce((acc, n) => acc + n, 0); }; Array.prototype.average = function() { return this.sum() / this.length; }; const scores = [85, 90, 78, 95, 88]; console.log(scores.sum()); console.log(scores.average().toFixed(1));

Output

436
87.2

⚠️ Warning: Extending native prototypes (Array.prototype, String.prototype) in production code or libraries is dangerous — it can conflict with future ECMAScript additions or other libraries. Use it only in isolated personal/learning projects.

📋 Prototype Methods Quick Reference

Method	Purpose	Example
`Fn.prototype.method = fn`	Add shared method	`User.prototype.greet = ...`
`Object.create(proto)`	Create obj with specific prototype	`Object.create(protoObj)`
`Object.getPrototypeOf(obj)`	Get prototype of obj	`Object.getPrototypeOf(instance)`
`Object.setPrototypeOf(obj, proto)`	Change prototype (avoid — slow)	Rarely used
`obj.hasOwnProperty(key)`	Check if own property	`riya.hasOwnProperty("name")`
`proto.isPrototypeOf(obj)`	Is proto in obj's chain?	`Animal.prototype.isPrototypeOf(dog)`

⚠️ Common Mistakes

❌ Mistake 1 — Defining Methods Inside Constructor (Memory Waste)

js example

function User(name) {
  this.name = name;
  this.greet = function() { return `Hi, ${this.name}`; };  // ← new function per instance!
}

const u1 = new User("Riya");
const u2 = new User("Aman");
console.log(u1.greet === u2.greet);   // false — each has its OWN copy!

Output

false

❌ Mistake 2 — Replacing `prototype` Instead of Adding to It

js example

function Dog(name) { this.name = name; }
Dog.prototype = { bark: function() { return "woof"; } };
// This REPLACES the entire prototype — loses the `constructor` reference

const d = new Dog("Rex");
console.log(d.constructor === Dog);     // false — broken!
console.log(d.constructor === Object);  // true — unexpected!

Output

false
true

❌ Mistake 3 — Mutating a Shared Prototype Object Property

Example

function Team(name) { this.name = name; } Team.prototype.members = []; // ← shared reference — dangerous! const teamA = new Team("A"); const teamB = new Team("B"); teamA.members.push("Riya"); // mutates the SHARED array! console.log(teamB.members); // ["Riya"] — oops!

Output

[ 'Riya' ]

Fix: Define arrays/objects as own properties in the constructor: this.members = [];

🎯 Key Takeaways

Every function has a .prototype object; instances created with new inherit from it
Methods on .prototype are shared by all instances — stored once, not copied
ES6 class is clean syntax for the same prototype mechanism — typeof MyClass === "function"
Use hasOwnProperty() to distinguish own properties from inherited ones
Object.create(proto) lets you set up prototype chains without constructor functions
Never define methods inside the constructor — put them on .prototype to save memory
Avoid replacing the entire .prototype object — it breaks the constructor reference

❓ Interview Questions

Q1. What is a prototype in JavaScript? > Every JavaScript function has a .prototype property — an object that instances (created with new) automatically inherit from. It stores shared methods and properties that all instances can access without each having their own copy.

Q2. How are methods shared in JavaScript? > Methods defined on Constructor.prototype are shared by all instances through the prototype chain. Each instance has an internal [[Prototype]] link to Constructor.prototype, so when instance.method() is called, JavaScript finds it there.

Q3. What is the difference between own properties and prototype properties? > Own properties are set directly on the instance (usually in the constructor). Prototype properties are on the prototype object, shared by all instances. hasOwnProperty("key") returns true only for own properties.

Q4. Why put methods on the prototype and not inside the constructor? > Methods inside the constructor are recreated for each instance — wasting memory. Methods on the prototype are created once and shared. For 1000 instances, prototype sharing means 1 function object; constructor methods means 1000.

Q5. What does Object.create(proto) do? > Creates a new plain object whose [[Prototype]] is explicitly set to proto. It does not call a constructor function. Useful for manual prototype chain setup or creating objects with a specific prototype without classes.

Q6. If I add a method to Constructor.prototype after creating instances, can they use it? > Yes! Because instances hold a *reference* to the prototype, not a copy. Adding to the prototype after instance creation makes the new method immediately available on all existing instances.

Q7. What happens to the constructor property when you replace .prototype? > When you do MyFn.prototype = { ... }, you replace the default prototype object (which had constructor: MyFn) with a plain object. The constructor property is lost — new instances.constructor now points to Object instead of MyFn. Always add constructor: MyFn back if you must replace the prototype.

Q8. How does a JavaScript class relate to prototypes? > class is syntactic sugar over constructor functions + prototype assignment. The class body methods are automatically placed on ClassName.prototype. typeof MyClass === "function" and MyClass.prototype contains all the instance methods. Classes also add strict rules (no calling without new, no hoisting) on top.

Exam Focus

Revise definitions, diagrams, examples, and short-answer points for JavaScript Prototypes – Prototype-Based Inheritance, Object.create & prototype Property.

Interview Use

Prepare one clear explanation, one practical example, and one common mistake for this JavaScript Master Course topic.

Search Terms

javascript-complete-guide, javascript master course, javascript, complete, guide, oop, prototypes, javascript prototypes – prototype-based inheritance, object.create & prototype property

Continue learning this concept

Oop In JavascriptAbstraction in JavaScript OOP – Hide Complexity, Expose SimplicityLearn abstraction in JavaScript OOP with class examples, private fields, real-world analogies, common mistakes, and interview Q&A. beginner-friendly tutorial.Oop In JavascriptJavaScript Classes Tutorial – ES6 Class Syntax, Inheritance & MoreMaster JavaScript ES6 classes with constructors, methods, static members, inheritance, private fields, and real-world examples. beginner-friendly JS OOP tutorial.Oop In JavascriptJavaScript Constructor Functions – new Keyword, Prototype & OOP PatternsUnderstand JavaScript constructor functions with the new keyword, prototype methods, object creation, comparison with ES6 classes, and interview-ready Q&A.Oop In JavascriptEncapsulation in JavaScript – Private Fields, Getters, Setters & Data ProtectionLearn encapsulation in JavaScript with private class fields, getters, setters, closures, and real-world examples. Protect your data with ES2022 OOP techniques.Oop In JavascriptJavaScript Inheritance – extends, super, and Prototype-Based InheritanceMaster JavaScript inheritance with ES6 extends, super keyword, method overriding, prototype chain, multi-level inheritance, and interview-ready Q&A examples.Oop In JavascriptObject-Oriented Programming in JavaScript – OOP Concepts Complete GuideComplete guide to OOP in JavaScript: classes, objects, the 4 pillars (encapsulation, inheritance, abstraction, polymorphism), prototype chain, and interview Q&A.

PreviousJavaScript Prototype Chain – How Property Lookup Works in JavaScript NextJavaScript Advanced Practice Problems — 15+ Interview-Level Challenges 2026

📊 Prototype Relationship Diagram

💻 Example 1 — Adding Methods to a Prototype

💻 Example 2 — Prototype vs Own Properties

💻 Example 3 — How ES6 Classes Map to Prototypes

💻 Example 4 — Object.create() for Prototypal Inheritance

💻 Example 5 — Extending Built-In Prototypes (Use with Caution)

📋 Prototype Methods Quick Reference

⚠️ Common Mistakes

❌ Mistake 1 — Defining Methods Inside Constructor (Memory Waste)

❌ Mistake 2 — Replacing prototype Instead of Adding to It

❌ Mistake 3 — Mutating a Shared Prototype Object Property

🎯 Key Takeaways

❓ Interview Questions

Continue learning this concept

📊 Prototype Relationship Diagram

💻 Example 1 — Adding Methods to a Prototype

💻 Example 2 — Prototype vs Own Properties

💻 Example 3 — How ES6 Classes Map to Prototypes

💻 Example 4 — Object.create() for Prototypal Inheritance

💻 Example 5 — Extending Built-In Prototypes (Use with Caution)

📋 Prototype Methods Quick Reference

⚠️ Common Mistakes

❌ Mistake 1 — Defining Methods Inside Constructor (Memory Waste)

❌ Mistake 2 — Replacing prototype Instead of Adding to It

❌ Mistake 3 — Mutating a Shared Prototype Object Property

🎯 Key Takeaways

❓ Interview Questions

Continue learning this concept

❌ Mistake 2 — Replacing `prototype` Instead of Adding to It

❌ Mistake 2 — Replacing `prototype` Instead of Adding to It