Prototype: Real-World Examples in JavaScript

Prototype: Real-World Examples

1. Array Methods

All arrays inherit from Array.prototype:

const arr = [1, 2, 3];
arr.map(fn); // from Array.prototype
arr.filter(fn); // from Array.prototype

2. Custom Classes

class ApiClient {
  constructor(baseUrl) { this.baseUrl = baseUrl; }
  async get(path) { return fetch(this.baseUrl + path).then(r => r.json()); }
}
const api = new ApiClient("https://api.example.com");
api.get("/users"); // inherited from ApiClient.prototype

3. Object.create for Prototypal Inheritance

const eventEmitter = {
  events: {},
  on(event, cb) { (this.events[event] ||= []).push(cb); },
  emit(event, data) { (this.events[event] || []).forEach(cb => cb(data)); },
};
const myEmitter = Object.create(eventEmitter);
myEmitter.on("click", () => console.log("clicked"));
myEmitter.emit("click", {});

4. Mixins (Composition)

const Serializable = {
  toJSON() { return JSON.stringify(this); },
  fromJSON(json) { return Object.assign(Object.create(this), JSON.parse(json)); },
};
Object.assign(User.prototype, Serializable);

The Takeaway

Real-world: array methods (all inherit from Array.prototype), custom classes (methods on the prototype), Object.create (prototypal inheritance for event emitters), and mixins (composition by assigning methods to a prototype). Prototypes are the foundation of JS object-oriented programming.