Why ES6 classes are just "syntactic sugar" for prototypes
Timothy stood at the chalkboard, admiring his work. He had drawn a perfect, rectangular box.
"Finally," he said, dusting his hands. "Civilization."
Inside the box, he had written a Class.
class Book {
constructor(title, author) {
this.title = title;
this.author = author;
}
read() {
console.log("Reading " + this.title);
}
}
const myBook = new Book("The Hobbit", "Tolkien");
"Look at it, Margaret," Timothy beamed. "It is clean. It is structured. It looks exactly like the blueprints used in Java or C++. We finally have proper Templates in the library."
Margaret walked over, holding a magnifying glass in one hand and a small screwdriver in the other. "It is certainly pretty, Timothy. But do not be fooled by the paint."
She tapped the word class with the handle of the screwdriver.
"This is not a template," she said. "This is a costume. Underneath, the machinery is exactly the same as it was twenty years ago."
The Syntactic Sugar
Margaret drew a line down the middle of the board. "This is what you think you are writing," she said, pointing to his Class. "But this is what the Engine actually sees."
On the right side, she wrote the "Old Way"—the Constructor Function.
// 1. The Constructor Function
function Book(title, author) {
this.title = title;
this.author = author;
}
// 2. The Prototype Link
Book.prototype.read = function() {
console.log("Reading " + this.title);
};
const myBook = new Book("The Hobbit", "Tolkien");
"They are identical," Margaret revealed. "The class keyword is just Syntactic Sugar. It gathers the constructor and the methods and packages them into a neat little block. But the engine simply unpacks them and builds the same old Prototype Chain we talked about in Volume 2."
"So there is no blueprint?" Timothy asked, disappointed.
"No," Margaret said. "There are only functions and objects linked together."
The Magic of new
Timothy pointed to the bottom line. "But what about new? That word feels special. It feels like I am firing up a factory machine."
"It is a machine," Margaret agreed. "But it is a very simple one. It performs exactly four steps."
She erased the code and wrote a manual implementation to show him the gears turning.
// What 'new' actually does:
function fakeNew(Constructor, ...args) {
// Step 1: Create a new, empty object
const newObj = {};
// Step 2: Link it to the Prototype
Object.setPrototypeOf(newObj, Constructor.prototype);
// Step 3: Bind 'this' and run the constructor
Constructor.apply(newObj, args);
// Step 4: Return the object
return newObj;
}
"That is it?" Timothy asked.
"That is it," Margaret nodded. "It is not magic creation. It is just plumbing. It builds a bucket, connects the pipes (setPrototypeOf), fills it with data (apply), and hands it to you."
The Proof
Timothy grabbed the chalk. "If that is true," he said, "then myBook isn't an 'Instance' of a class. It is just a regular object with a link."
He wrote a test to check the type:
console.log(typeof Book);
// Output: "function"
"Ha!" Timothy shouted. "The class is just a function!"
He wrote one final test to check the connection, using the proper tool Margaret had left on the desk.
console.log(Object.getPrototypeOf(myBook) === Book.prototype);
// Output: true
"And the link is real," he whispered.
The Conclusion
Timothy looked at his "modern" Class syntax. It didn't look like a solid blueprint anymore. It looked like a convenient shorthand.
"I felt safer with the Class," Timothy admitted. "It felt like a strict rule."
"Comfort is important," Margaret assured him. "Use the class keyword. It groups your logic and makes your code readable. But never forget what is happening underneath."
She pocketed her screwdriver.
"We do not stamp copies from a master mold, Timothy. We just link objects to other objects, all the way down."
Aaron Rose is a software engineer and technology writer at tech-reader.blog and the author of Think Like a Genius.
Top comments (0)