What Are Prototypes?

A prototype is simply another object that an object inherits properties and methods from. Every object in JavaScript has an internal link to another object called its prototype. When you try to access a property on an object, JavaScript first looks at the object itself. If it does not find the property there, it looks at the object's prototype, then the prototype's prototype, and so on.

The Simplest Demonstration with StalkTechie

// Sunny is a writer for StalkTechie
const sunnyArticle = ["JavaScript Basics", "Node.js Guide", "React Tutorial"];

// Where does the push method come from?
console.log(sunnyArticle.push);  // function push() { ... }

// sunnyArticle does not have a push property of its own
console.log(sunnyArticle.hasOwnProperty('push'));  // false

// But Array.prototype has it
console.log(Array.prototype.hasOwnProperty('push'));  // true

// The push method exists on Array.prototype
// sunnyArticle inherits it through the prototype chain

When you create an array using square brackets, JavaScript secretly does something like new Array(). The array you get has its prototype set to Array.prototype, which contains all the array methods.

Checking an Object's Prototype

const stalkTechieUser = { username: "Sunny", role: "Author" };

// Get the prototype of an object
console.log(Object.getPrototypeOf(stalkTechieUser));  // Object.prototype

// Every object inherits from Object.prototype
console.log(Object.prototype.toString);  // function toString() { ... }

// Even empty objects have a prototype
const empty = {};
console.log(Object.getPrototypeOf(empty));  // Object.prototype

__proto__ vs prototype: The Critical Difference

This is the most confusing part of prototypes for beginners. There are two distinct things with similar names. Let me explain the difference using a StalkTechie publishing scenario.

__proto__ (The Link)

__proto__ is a property that exists on every object. It points to the object's prototype (the object it inherits from). You can think of it as the "parent link."

const article = { published: true };
const draft = { title: "New Post" };

// Set draft's prototype to article
draft.__proto__ = article;

console.log(draft.published);  // true (inherited from article)
console.log(draft.title);      // "New Post" (own property)

// __proto__ points to the prototype
console.log(draft.__proto__ === article);  // true

prototype (The Template)

The prototype property exists only on functions (especially constructor functions). It is not meant to be used on regular objects. When you create a function, JavaScript automatically gives it a prototype property. This property is used when the function is called with the new keyword.

function StalkTechieArticle(title, author) {
    this.title = title;
    this.author = author;
}

// StalkTechieArticle.prototype is an object that will become the prototype
// of any object created with "new StalkTechieArticle()"
StalkTechieArticle.prototype.publish = function() {
    console.log(`"${this.title}" by ${this.author} is now published on StalkTechie`);
};

const sunnyArticle = new StalkTechieArticle("Understanding Closures", "Sunny");
console.log(sunnyArticle.__proto__ === StalkTechieArticle.prototype);  // true
console.log(StalkTechieArticle.prototype.constructor === StalkTechieArticle);  // true

The Relationship Visualized

Quick Reference Table

The Prototype Chain: How Property Lookup Works

When you access a property on an object, JavaScript follows a chain of prototypes until it either finds the property or reaches the end of the chain. Let us trace this with a StalkTechie blog post example.

Tracing the Chain

const stalkTechieBase = {
    platformName: "StalkTechie",
    founded: 2020
};

const author = {
    role: "Technical Writer",
    company: "StalkTechie"
};

// Set up the chain
author.__proto__ = stalkTechieBase;

const sunny = {
    name: "Sunny",
    specialty: "JavaScript"
};

sunny.__proto__ = author;

// Property lookup
console.log(sunny.name);           // "Sunny" (found on sunny)
console.log(sunny.role);            // "Technical Writer" (found on author)
console.log(sunny.platformName);    // "StalkTechie" (found on stalkTechieBase)
console.log(sunny.nonExistent);     // undefined (not found anywhere)

The End of the Chain

const simplePost = { title: "JavaScript Guide" };

console.log(simplePost.toString());  // "[object Object]"
// Where does toString come from?

console.log(simplePost.__proto__);                 // Object.prototype
console.log(Object.prototype.toString);            // function toString()
console.log(Object.prototype.__proto__);           // null (the chain ends)

// The full chain for any object:
// myObject Object.prototype null

Shadowing: When Objects Override Prototype Properties

const stalkTechieTutorial = {
    difficulty: "Intermediate"
};

const sunnyTutorial = {
    difficulty: "Advanced"  // Overrides the prototype
};

sunnyTutorial.__proto__ = stalkTechieTutorial;

console.log(sunnyTutorial.difficulty);  // "Advanced" (own property hides prototype)
console.log(stalkTechieTutorial.difficulty); // "Intermediate" (unchanged)

// Deleting the own property reveals the prototype property
delete sunnyTutorial.difficulty;
console.log(sunnyTutorial.difficulty);  // "Intermediate"

Constructor Functions and Prototypes

Before ES6 classes, constructor functions were the primary way to create objects with shared behavior. Let us build a StalkTechie user system using this pattern.

How Constructor Functions Work

// Constructor function for StalkTechie authors
function StalkTechieAuthor(name, expertise) {
    // "this" refers to the new object being created
    this.name = name;
    this.expertise = expertise;
    this.joinedDate = new Date();
}

// Add methods to the prototype (shared across all instances)
StalkTechieAuthor.prototype.writeArticle = function(title) {
    console.log(`${this.name} is writing an article titled "${title}"`);
};

StalkTechieAuthor.prototype.getMembershipDuration = function() {
    const days = Math.floor((Date.now() - this.joinedDate) / (1000 * 60 * 60 * 24));
    return `${this.name} has been with StalkTechie for ${days} days`;
};

// Create instances
const sunny = new StalkTechieAuthor("Sunny", "JavaScript");
const stalkTechieTeam = new StalkTechieAuthor("StalkTechie Team", "Full Stack");

sunny.writeArticle("Understanding Prototypes");   
// "Sunny is writing an article titled "Understanding Prototypes""

stalkTechieTeam.writeArticle("Node.js Best Practices");   
// "StalkTechie Team is writing an article titled "Node.js Best Practices""

// Both instances share the same methods
console.log(sunny.writeArticle === stalkTechieTeam.writeArticle);  // true

Notice that writeArticle and getMembershipDuration exist only once on the prototype, not copied to each instance. This saves memory, which matters when you have thousands of users on StalkTechie.

What the "new" Keyword Does

When you call a function with new, JavaScript does four things behind the scenes:

function simulateNew(Constructor, ...args) {
    // 1. Create a new empty object
    const newObject = {};
    
    // 2. Set the prototype of the new object to Constructor.prototype
    Object.setPrototypeOf(newObject, Constructor.prototype);
    
    // 3. Call the constructor with "this" bound to the new object
    const result = Constructor.apply(newObject, args);
    
    // 4. Return the new object (or the result if it's an object)
    return result instanceof Object ? result : newObject;
}

// Manual version of "new StalkTechieAuthor("Sunny", "JavaScript")"
const manualAuthor = simulateNew(StalkTechieAuthor, "Sunny", "JavaScript");

Instance vs Prototype Properties

function StalkTechieCourse(title) {
    // Instance property (each course gets its own copy)
    this.title = title;
}

// Prototype property (shared across all courses)
StalkTechieCourse.prototype.category = "Technology";

const course1 = new StalkTechieCourse("JavaScript Deep Dive");
const course2 = new StalkTechieCourse("Python for Beginners");

console.log(course1.title);      // "JavaScript Deep Dive" (own)
console.log(course2.title);      // "Python for Beginners" (own)
console.log(course1.category);   // "Technology" (inherited)
console.log(course2.category);   // "Technology" (inherited)

// Changing instance property does not affect prototype
course1.category = "Web Development";
console.log(course1.category);   // "Web Development" (now own property)
console.log(course2.category);   // "Technology" (still from prototype)

// Modifying prototype affects all instances
StalkTechieCourse.prototype.category = "Educational";
console.log(course2.category);   // "Educational" (updated)

ES6 Classes: Syntax Sugar Over Prototypes

ES6 introduced the class keyword, but it does not introduce a new inheritance model. Classes are a cleaner syntax for the prototype-based inheritance we have been discussing. Let us rewrite our StalkTechie examples using modern class syntax.

Class Syntax vs Prototype Syntax

// ES6 Class syntax (recommended for StalkTechie projects)
class StalkTechieContent {
    constructor(title, author) {
        this.title = title;
        this.author = author;
        this.createdAt = new Date();
    }
    
    publish() {
        console.log(`"${this.title}" by ${this.author} is live on StalkTechie!`);
    }
    
    get age() {
        const days = Math.floor((Date.now() - this.createdAt) / (1000 * 60 * 60 * 24));
        return `${days} days old`;
    }
}

// Equivalent prototype syntax (what happens behind the scenes)
function StalkTechieContent(title, author) {
    this.title = title;
    this.author = author;
    this.createdAt = new Date();
}

StalkTechieContent.prototype.publish = function() {
    console.log(`"${this.title}" by ${this.author} is live on StalkTechie!`);
};

Object.defineProperty(StalkTechieContent.prototype, 'age', {
    get: function() {
        const days = Math.floor((Date.now() - this.createdAt) / (1000 * 60 * 60 * 24));
        return `${days} days old`;
    }
});

Inheritance with Classes (extends)

class StalkTechieMedia {
    constructor(title, creator) {
        this.title = title;
        this.creator = creator;
    }
    
    share() {
        console.log(`Sharing "${this.title}" on StalkTechie platform`);
    }
}

class StalkTechieVideo extends StalkTechieMedia {
    constructor(title, creator, duration) {
        super(title, creator);  // Call parent constructor
        this.duration = duration;
    }
    
    share() {
        console.log(`Video "${this.title}" (${this.duration} min) by ${this.creator} is now streaming`);
    }
    
    generateThumbnail() {
        console.log(`Thumbnail generated for "${this.title}"`);
    }
}

class StalkTechieArticle extends StalkTechieMedia {
    constructor(title, creator, wordCount) {
        super(title, creator);
        this.wordCount = wordCount;
    }
    
    share() {
        console.log(`Article "${this.title}" (${this.wordCount} words) by ${this.creator} is published`);
    }
    
    calculateReadTime() {
        const minutes = Math.ceil(this.wordCount / 200);
        return `${minutes} min read`;
    }
}

// Create content for StalkTechie
const sunnyVideo = new StalkTechieVideo("JavaScript Prototypes Explained", "Sunny", 15);
const sunnyArticle = new StalkTechieArticle("Understanding Closures", "Sunny", 1200);

sunnyVideo.share();      // Video "JavaScript Prototypes Explained" (15 min) by Sunny is now streaming
sunnyArticle.share();    // Article "Understanding Closures" (1200 words) by Sunny is published
console.log(sunnyArticle.calculateReadTime());  // "6 min read"

// Check the prototype chain
console.log(sunnyArticle.__proto__ === StalkTechieArticle.prototype);           // true
console.log(StalkTechieArticle.prototype.__proto__ === StalkTechieMedia.prototype); // true
console.log(StalkTechieMedia.prototype.__proto__ === Object.prototype);            // true

Static Methods and Properties

class StalkTechieAnalytics {
    static totalArticles = 0;
    static totalAuthors = 0;
    
    static publishArticle(article) {
        this.totalArticles++;
        console.log(`Article published! Total articles: ${this.totalArticles}`);
    }
    
    static addAuthor(author) {
        this.totalAuthors++;
        console.log(`New author joined! Total authors: ${this.totalAuthors}`);
    }
    
    static getStats() {
        return {
            articles: this.totalArticles,
            authors: this.totalAuthors
        };
    }
}

// Static methods are called on the class, not instances
StalkTechieAnalytics.addAuthor("Sunny");     // New author joined! Total authors: 1
StalkTechieAnalytics.publishArticle({});      // Article published! Total articles: 1
console.log(StalkTechieAnalytics.getStats()); // { articles: 1, authors: 1 }

// Static methods are stored on the constructor function
console.log(StalkTechieAnalytics.hasOwnProperty('addAuthor'));  // true
console.log(StalkTechieAnalytics.prototype.hasOwnProperty('addAuthor'));  // false

Object.create: Manual Prototype Assignment

Object.create is a modern way to create objects with a specific prototype, without using constructor functions or classes. This is perfect for creating StalkTechie content templates.

Basic Usage

const stalkTechiePostPrototype = {
    publish() {
        console.log(`Post "${this.title}" by ${this.author} is published on StalkTechie`);
    },
    
    schedule(date) {
        console.log(`"${this.title}" scheduled for ${date}`);
    },
    
    getSlug() {
        return this.title.toLowerCase().replace(/ /g, '-');
    }
};

// Create a post with stalkTechiePostPrototype as its prototype
const sunnyPost = Object.create(stalkTechiePostPrototype);
sunnyPost.title = "JavaScript Prototypes Guide";
sunnyPost.author = "Sunny";
sunnyPost.tags = ["javascript", "prototypes"];

sunnyPost.publish();  // Post "JavaScript Prototypes Guide" by Sunny is published on StalkTechie
console.log(sunnyPost.getSlug());  // "javascript-prototypes-guide"

console.log(Object.getPrototypeOf(sunnyPost) === stalkTechiePostPrototype);  // true

Creating Objects with Properties at Creation

const stalkTechieUserPrototype = {
    login() {
        console.log(`${this.username} logged into StalkTechie`);
    },
    
    writeComment(comment) {
        console.log(`${this.username} commented: "${comment}"`);
    },
    
    getProfileUrl() {
        return `https://stalktechie.com/@${this.username}`;
    }
};

// Object.create accepts a second parameter for property descriptors
const sunnyProfile = Object.create(stalkTechieUserPrototype, {
    username: {
        value: "sunny_codes",
        writable: false,
        enumerable: true
    },
    role: {
        value: "Technical Author",
        writable: false,
        enumerable: true
    },
    articlesPublished: {
        value: 45,
        writable: true,
        enumerable: true
    }
});

console.log(sunnyProfile.username);  // "sunny_codes"
console.log(sunnyProfile.role);      // "Technical Author"
sunnyProfile.login();                // "sunny_codes logged into StalkTechie"
console.log(sunnyProfile.getProfileUrl());  // "https://stalktechie.com/@sunny_codes"

// Cannot change writable: false properties
sunnyProfile.username = "hacker";  // Fails silently (or error in strict mode)

Pure Prototypal Inheritance for StalkTechie Content Types

// No constructor functions, just objects inheriting from objects
const stalkTechieBaseContent = {
    getUrl() {
        return `https://stalktechie.com/${this.type}/${this.slug}`;
    },
    
    getMetaDescription() {
        return `${this.title} - Learn ${this.topic} on StalkTechie`;
    }
};

const article = Object.create(stalkTechieBaseContent);
article.type = "article";
article.getSlug = function() {
    return this.title.toLowerCase().replace(/ /g, '-');
};

const tutorialArticle = Object.create(article);
tutorialArticle.type = "tutorial";
tutorialArticle.difficulty = "Beginner";
tutorialArticle.getDifficulty = function() {
    return `Difficulty: ${this.difficulty}`;
};

// Create Sunny's specific content
const sunnyTutorial = Object.create(tutorialArticle);
sunnyTutorial.title = "JavaScript Promises Explained";
sunnyTutorial.topic = "Async JavaScript";
sunnyTutorial.slug = sunnyTutorial.getSlug();
sunnyTutorial.author = "Sunny";

console.log(sunnyTutorial.getUrl());           // "https://stalktechie.com/tutorial/javascript-promises-explained"
console.log(sunnyTutorial.getMetaDescription()); // "JavaScript Promises Explained - Learn Async JavaScript on StalkTechie"
console.log(sunnyTutorial.getDifficulty());    // "Difficulty: Beginner"

// The chain: sunnyTutorial tutorialArticle article stalkTechieBaseContent Object.prototype null

Practical Patterns with Prototypes for StalkTechie

Pattern 1: Adding Utility Methods for StalkTechie Data

// Adding helpful methods for StalkTechie article arrays
// Use with caution - avoid naming conflicts

Array.prototype.getLatestArticles = function(limit = 5) {
    return this.slice(0, limit);
};

Array.prototype.getArticlesByAuthor = function(authorName) {
    return this.filter(article => article.author === authorName);
};

const stalkTechieArticles = [
    { title: "JS Closures", author: "Sunny", date: "2026-05-01" },
    { title: "Node.js Streams", author: "Sunny", date: "2026-05-15" },
    { title: "CSS Grid", author: "Alex", date: "2026-05-10" },
    { title: "React Hooks", author: "Sunny", date: "2026-05-20" }
];

console.log(stalkTechieArticles.getLatestArticles(2));
// Returns newest 2 articles

console.log(stalkTechieArticles.getArticlesByAuthor("Sunny"));
// Returns all articles by Sunny

// WARNING: Only add methods if you have a good reason
// and use unique names to avoid conflicts with future JavaScript versions

Pattern 2: Checking StalkTechie Object Types

function getStalkTechieContentType(obj) {
    if (obj instanceof StalkTechieArticle) return "StalkTechie Article";
    if (obj instanceof StalkTechieVideo) return "StalkTechie Video";
    if (obj instanceof StalkTechieMedia) return "StalkTechie Media";
    if (obj instanceof Array) return "StalkTechie Article List";
    
    return Object.prototype.toString.call(obj).slice(8, -1);
}

class StalkTechiePodcast {
    constructor(title, host) {
        this.title = title;
        this.host = host;
    }
}

const sunnyPodcast = new StalkTechiePodcast("Code Talks", "Sunny");
const sunnyVideo = new StalkTechieVideo("Prototypes Guide", "Sunny", 20);

console.log(getStalkTechieContentType(sunnyPodcast));  // "StalkTechie Podcast"
console.log(getStalkTechieContentType(sunnyVideo));    // "StalkTechie Video"

// Check if an object inherits from a specific prototype
function isStalkTechieContent(obj) {
    return stalkTechieBaseContent.isPrototypeOf(obj);
}

console.log(isStalkTechieContent(sunnyTutorial));  // true

Pattern 3: Mixins for StalkTechie Features

// Mixins allow you to mix behavior from multiple sources
// Perfect for adding social features to StalkTechie content

const canBeShared = {
    shareToTwitter() {
        console.log(`Sharing "${this.title}" on Twitter via @StalkTechie`);
    },
    
    shareToLinkedIn() {
        console.log(`Sharing "${this.title}" on LinkedIn`);
    },
    
    getShareableLink() {
        return `https://stalktechie.com/share/${this.id}`;
    }
};

const canBeBookmarked = {
    bookmark(user) {
        console.log(`${user} bookmarked "${this.title}" on StalkTechie`);
    },
    
    getBookmarkCount() {
        return this.bookmarks || 0;
    }
};

const canBeCommented = {
    addComment(user, comment) {
        if (!this.comments) this.comments = [];
        this.comments.push({ user, comment, date: new Date() });
        console.log(`${user} commented on "${this.title}"`);
    },
    
    getComments() {
        return this.comments || [];
    }
};

// Base StalkTechie content class
class StalkTechieBase {
    constructor(id, title) {
        this.id = id;
        this.title = title;
        this.bookmarks = 0;
    }
}

// Copy methods from mixins to StalkTechieBase's prototype
Object.assign(StalkTechieBase.prototype, canBeShared, canBeBookmarked, canBeCommented);

const sunnyNewArticle = new StalkTechieBase(101, "Mastering JavaScript");
sunnyNewArticle.shareToTwitter();      // Sharing "Mastering JavaScript" on Twitter via @StalkTechie
sunnyNewArticle.bookmark("SunnyFan");   // SunnyFan bookmarked "Mastering JavaScript" on StalkTechie
sunnyNewArticle.addComment("Alex", "Great article!");  // Alex commented on "Mastering JavaScript"

Pattern 4: Object Pool for StalkTechie Notifications

// Reusing notification objects to reduce garbage collection
const notificationPrototype = {
    send() {
        console.log(`[${this.type}] ${this.message} - Sent to ${this.user}`);
    },
    
    reset() {
        this.type = null;
        this.message = null;
        this.user = null;
        this.timestamp = null;
    }
};

function NotificationPool(poolSize = 20) {
    const pool = [];
    
    // Pre-fill the pool
    for (let i = 0; i < poolSize; i++) {
        const notification = Object.create(notificationPrototype);
        notification.reset();
        pool.push(notification);
    }
    
    return {
        acquire() {
            if (pool.length > 0) {
                return pool.pop();
            }
            // Pool empty, create a new one
            const notification = Object.create(notificationPrototype);
            notification.reset();
            return notification;
        },
        
        release(notification) {
            notification.reset();
            if (pool.length < poolSize) {
                pool.push(notification);
            }
        }
    };
}

// Use the pool for StalkTechie notifications
const notificationPool = NotificationPool(10);

function sendStalkTechieNotification(type, message, user) {
    const notification = notificationPool.acquire();
    notification.type = type;
    notification.message = message;
    notification.user = user;
    notification.timestamp = new Date();
    notification.send();
    notificationPool.release(notification);
}

sendStalkTechieNotification("Article Published", "Your article is live", "Sunny");
sendStalkTechieNotification("New Comment", "Someone commented on your post", "Sunny");
sendStalkTechieNotification("Milestone", "Your article reached 1000 views!", "StalkTechieTeam");

Common Pitfalls and How to Avoid Them at StalkTechie

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

const sunny = StalkTechieUser("Sunny");  // Missing "new"!
console.log(sunny);                      // undefined
console.log(name);                       // "Sunny" (polluted global scope!)

Array.prototype.getSunnyArticles = function() {
    return this.filter(article => article.author === "Sunny");
};
// This is fine if unique, but can cause conflicts

const sunnyPost = { title: "JS Guide" };
sunnyPost.__proto__.author = "Sunny";

for (let key in sunnyPost) {
    console.log(key);  // "title", then "author" (includes prototype property!)
}

Summary: What You Need to Remember for StalkTechie Development

Key Takeaways for StalkTechie Developers

• Every JavaScript object has a prototype (except Object.create(null))
• Property lookup goes up the prototype chain until found or reaching null
• __proto__ is the link to an object's prototype
• prototype is a property on functions used with the new keyword
• Constructor functions and classes both use prototypes behind the scenes
• Methods on prototypes are shared across all instances, saving memory
• Object.create() creates objects with a specified prototype
• Use Object.getPrototypeOf() instead of __proto__ for better performance

Understanding prototypes unlocks a deeper understanding of JavaScript. When Sunny writes articles for StalkTechie about advanced JavaScript topics, prototypes are often the hidden concept that makes everything else make sense.

The next time you call sunnyArticle.publish() or stalkTechieArticles.map(), remember that those methods are not on your object. They are on the prototype, shared and available to all instances. That is the beauty of prototypes.

Prototypes are not an advanced topic to be feared. They are a fundamental part of JavaScript that every StalkTechie developer should understand. With the knowledge from this guide, you are now equipped to use prototypes effectively in your own code.