Skip to content

Prototypes

This lesson explains Prototypes in JavaScript with beginner-friendly examples, practical use cases, and clear best practices.

JavaScript Prototypes Overview

JavaScript prototypes are the foundation of inheritance in JavaScript. Every JavaScript object has an internal prototype link that allows it to access properties and methods from another object. This prototype-based inheritance model is different from traditional class-based inheritance used in many other programming languages.

Prototypes are used behind the scenes by objects, arrays, functions, constructor functions, and ES6 classes. Understanding prototypes helps developers understand inheritance, method sharing, memory efficiency, object creation, and how JavaScript classes work internally.

Prototype Concept Description Common Usage
Prototype Object from which another object inherits properties. Shared methods and inheritance.
Prototype Chain Chain of objects searched when accessing a property. Method lookup.
Constructor Prototype Object shared by instances created with a constructor. Reusable instance methods.
__proto__ Legacy accessor for an object's prototype. Learning and debugging only.
Object.create() Creates an object with a specified prototype. Prototype-based inheritance.
ES6 Classes Cleaner syntax over prototype-based inheritance. Modern object-oriented code.

JavaScript Prototype Example

function User(name) {
  this.name = name;
}

User.prototype.greet = function() {
  return "Hello " + this.name;
};

const user = new User("John");

console.log(user.name);
console.log(user.greet());
console.log(Object.getPrototypeOf(user));

In this example, the greet() method is added to User.prototype. Every object created with new User() can use the shared greet() method without storing a separate copy on each instance.

Top 10 JavaScript Prototype Examples

The following examples show common prototype patterns used to understand inheritance, constructor functions, shared methods, object creation, and how ES6 classes work internally.

# Example Syntax
1 Constructor Function function User(name) { this.name = name; }
2 Add Prototype Method User.prototype.greet = function() { return this.name; };
3 Create Instance const user = new User("John");
4 Get Prototype Object.getPrototypeOf(user)
5 Set Prototype Object.setPrototypeOf(child, parent);
6 Create with Prototype const admin = Object.create(userPrototype);
7 Check Own Property user.hasOwnProperty("name")
8 Check Prototype Property "greet" in user
9 Prototype Chain Lookup user.toString()
10 Class Uses Prototype class User { greet() { return "Hi"; } }

Best Practices

  • Use prototypes to share methods across many object instances.
  • Use ES6 classes for cleaner syntax in modern JavaScript projects.
  • Use Object.getPrototypeOf() instead of directly relying on __proto__.
  • Avoid modifying built-in prototypes such as Array.prototype or Object.prototype.
  • Use Object.create() when you intentionally need prototype-based inheritance.
  • Keep prototype methods focused on behavior shared by all instances.
  • Use hasOwnProperty() or Object.hasOwn() to distinguish own properties from inherited ones.
  • Prefer composition over complex prototype chains when code becomes hard to understand.

Common Mistakes

  • Confusing an object's own properties with inherited prototype properties.
  • Modifying built-in prototypes and causing unexpected behavior.
  • Using __proto__ in production code instead of standard methods.
  • Forgetting that ES6 classes still use prototypes internally.
  • Adding instance-specific data to a prototype instead of the instance.
  • Creating long prototype chains that are difficult to debug.
  • Using inheritance when a simple object or function would be clearer.

Key Takeaways

  • JavaScript uses prototypes for inheritance.
  • Objects can access properties and methods from their prototype chain.
  • Constructor functions use prototype to share methods across instances.
  • Object.create() creates objects with a specific prototype.
  • ES6 classes are cleaner syntax over prototype-based inheritance.
  • Understanding prototypes helps explain objects, classes, arrays, functions, and inheritance.

Pro Tip

Think of prototypes as shared method storage. Instance data belongs on the object itself, while reusable behavior belongs on the prototype so all instances can share the same method efficiently.

You now understand JavaScript prototypes, including prototype chains, constructor prototypes, shared methods, Object.create(), Object.getPrototypeOf(), built-in prototypes, ES6 classes, best practices, and common mistakes. Continue to the next lesson to learn JavaScript Error Handling.