60 Mins advanced
20. Prototypes & Classes
Advanced Core
Prototypes & Inheritance
Unlike languages like Java, JavaScript is not traditionally class-based. It is Prototype-based. When ES6 introduced the class keyword, it was just syntactical "sugar" hiding the underlying Prototype Chain.
🧬 The Prototype Chain
When you call a method on an array (like .push()), the array itself doesn't contain that code. JavaScript looks at the array, doesn't find the method, and searches up the "Prototype Chain" to the master Array.prototype object, which holds all the shared methods.
🏗️ Constructor Functions (The Old Way)
Before ES6, we built object templates using standard functions and the new keyword.
function Player(name) {
this.name = name;
this.score = 0;
}
// Attaching a method to the shared prototype to save memory
Player.prototype.addScore = function() {
this.score += 10;
};
const p1 = new Player("Prince");
p1.addScore();
console.log(p1.score);
Output10
🏛️ ES6 Classes (The Modern Way)
The modern syntax provides a much cleaner, Java-like structure for creating objects and dealing with inheritance.
class User {
constructor(username) {
this.username = username;
}
login() {
console.log(`${this.username} logged in.`);
}
}
// Inheritance using 'extends' and 'super()'
class Admin extends User {
constructor(username, permissions) {
super(username); // Calls the Parent constructor
this.permissions = permissions;
}
deleteDatabase() {
console.log("Database wiped by", this.username);
}
}
const admin1 = new Admin("AdminPrince", "ALL");
admin1.login();
admin1.deleteDatabase();
OutputAdminPrince logged in.
Database wiped by AdminPrince
Database wiped by AdminPrince
Knowledge Check
Ready to test your understanding of 20. Prototypes & Classes?