JavaScript
Completed
-
Section 1: Getting Started
-
Section 2: Core Syntax and Types
-
Section 3: Strings and Numbers in Depth
-
Section 4: Control Flow
-
Section 5: Functions
-
Section 6: Objects and Arrays
-
Section 7: Maps, Sets, and Symbols
-
Section 8: Asynchronous JavaScript
-
Section 9: Object-Oriented and Prototypes
-
Section 10: The DOM
-
Section 11: Browser APIs
-
Section 12: Modern JavaScript (ES2015-ES2025)
-
Section 13: Functional Programming Patterns
-
Section 14: Error Handling and Debugging
-
Section 15: Testing
-
Section 16: Accessibility for JavaScript Developers
-
Section 17: Internationalization and Localization
-
Section 18: Performance
-
Section 19: Node.js Fundamentals
-
Section 20: Regular Expressions
-
Section 21: Design Patterns in JavaScript
-
Section 22: Security Basics
-
Section 23: Data Structures and Algorithms in JavaScript
-
Section 24: Practical Projects
-
Section 25: More Advanced Async Patterns
-
Section 26: More Object and Class Practice
-
Section 27: Working with Dates and Internationalization
-
Section 28: Web Components
-
Section 29: More DOM and Browser Practice
-
Section 30: Build Tooling for Vanilla JavaScript
-
Section 31: More Practice Projects
-
Section 32: Interview and Algorithm Practice
-
Section 33: Error Objects (MDN Reference)
-
Section 34: TypedArrays and Binary Data
-
Section 35: Reflection and Metaprogramming (MDN Reference)
-
Section 36: More Global Functions (MDN Reference)
68: Prototypal Inheritance Explained
I've spent a lot of time reviewing code for junior devs, and there is one mistake that comes up almost every single time we hit the topic of inheritance: the belief that when an object "inherits" a method, that method is actually copied onto the new object.
"Inheritance is just copying methods from a parent"
It seems intuitive, right? You create a base class, you create a subclass, and you assume the subclass now "owns" those methods. Let's look at why that's fundamentally wrong. If JavaScript actually copied methods, we'd be wasting a massive amount of memory by duplicating the same function thousands of times across thousands of objects.
const GameCharacter = {
greet() {
console.log(`Hello, I am ${this.name}`);
}
};
const warrior = Object.create(GameCharacter);
warrior.name = "Thorin";
warrior.greet(); // "Hello, I am Thorin"
At first glance, it looks like warrior has a greet method. But if you check warrior.hasOwnProperty('greet'), it returns false. The method isn't there. So where is it? This is where the "magic" (which is actually just a linked list) happens.
The Prototype Chain is a lookup, not a copy
When you call warrior.greet(), JavaScript doesn't just give up if it doesn't find the method on the warrior object. Instead, it says, "Okay, it's not here. Let me check the object's internal prototype link."
It follows that link to GameCharacter, finds the greet function there, and executes it. I like to think of it as a corporate hierarchy: if a junior employee doesn't know how to handle a request, they ask their manager. If the manager doesn't know, they ask the director. The request keeps moving up the chain until someone knows the answer or they hit the very top (Object.prototype) and finally return undefined.
Here is the concrete proof that no copying is happening. Watch what happens if we add a method to the parent after the child has already been created:
const GameCharacter = {
greet() {
console.log(`Hello, I am ${this.name}`);
}
};
const warrior = Object.create(GameCharacter);
warrior.name = "Thorin";
// We add a new method to the parent AFTER the warrior was created
GameCharacter.attack = function() {
console.log(`${this.name} swings a sword!`);
};
warrior.attack(); // "Thorin swings a sword!"
If JavaScript had copied the methods during Object.create(), the warrior would have no idea that attack exists. But because it's a live link, the warrior finds the new method instantly. This is the essence of prototypal inheritance.
You've probably seen the class keyword in modern JS. Just remember: class is "syntactic sugar." Under the hood, JavaScript is still doing exactly this—linking objects via prototypes. It's not like Java or C#; there are no "blueprints" being stamped out, only objects linking to other objects.
- Own Properties: Things defined directly on the object (like
warrior.name). - Inherited Properties: Things found further up the prototype chain (like
warrior.greet). - The Chain: The path from the object $\rightarrow$ its prototype $\rightarrow$ its prototype's prototype $\rightarrow$
null.
📋 Practical Task
Building a Prototypal RPG Item System
Your goal is to create a prototype chain for a game's item system. Instead of using the class keyword, you will use Object.create() to demonstrate your understanding of the prototype chain.
Requirements:
- Create a base object called
Item. It should have a methodinspect()that logs:"This is a [name] with a value of [value] gold." - Create a second object called
Weaponthat inherits fromItem.Weaponshould have a methodattack()that logs:"[name] deals [damage] damage!" - Create a specific instance called
excaliburthat inherits fromWeapon. Give it the following own properties:name: "Excalibur",value: 1000, anddamage: 50.
Verification:
When you call excalibur.inspect(), it should successfully find the method on the Item object. When you call excalibur.attack(), it should find it on the Weapon object. Finally, verify that excalibur.hasOwnProperty('inspect') returns false.
There are no comments for now.