Advanced js: Prototype vs. Class
Manuel Artero Anguita 🟨
Posted on August 10, 2022
Usually we trend to think in terms of classes & instances.
Let's do a quick review to prototype and class theory.
We use regular functions to create the illusion of classes
function foo() {
console.log('this is just a regular function');
this.foo = 'foo';
} // « undefined
const f = new foo(); // « Object { foo: 'foo' }
// this is just a regular function
f.foo; // « 'foo'
Then, the way of creating class methods is adding a property to foo's prototype
foo.prototype.sayHi = () => {
console.log('hi');
return 1;
}; // « function sayHi()
f; // « Object { foo: 'foo' }
f.sayHi(); // « 1
// hi
This is so standard that ES5 (and ts before them) introduced syntactic sugar:
class goo {
constructor() {
this.goo = 'goo';
}
sayHi() {
console.log('hi');
return 1;
}
} // « undefined
g = new goo(); // « Object { goo: "goo" }
g.sayHi(); // « 1
// hi
The truth is...
There are no classes. Neither instances. While in class-oriented languages, multiple copies (instances) of a class can be made, like stamping or copying behavior out from a mold. In js we have just regular friendly objects.
...js is prototype-oriented.
What we're truly doing on the examples above is creating a new object and linking them to another plain, regular object.
This linked object is the prototype.
We are linking each new object to the prototype of the function we've called.
There are plain js-objects in memory; no more, no less.
function foo() {
this.foo = 'foo';
}
foo.prototype.sayHi = () => console.log('say hi');
f = new foo();
/*
------------- linked to ----------------- linked to ------------------ linked to
| foo: string | ---------> | sayHi: Function | ---------> | { toString... } | ---------> null
------------- ----------------- ------------------
^ ^ ^
f foo.prototype Object.prototype
*/
foo.prototype; // Object { sayHi: Function }
Object.getPrototypeOf(f) == foo.prototype; // « true
Object.prototype; // « Object { ... }
Object.getPrototypeOf(foo.prototype) == Object.prototype; // « true
Object.getPrototypeOf(Object.prototype); // « null
Thing is, IMO this is even more powerful (and elegant) than classic instances. Since everything are in-memory objects, we could even modify the thing in execution time:
function player() {}
player.prototype.sayHi = () => console.log('hi');
a = new player();
b = new player();
a.sayHi(); // « 'hi'
b.sayHi(); // « 'hi'
// we can modify the behaviour in execution time
player.prototype.sayHi = () => console.log('hello');
a.sayHi(); // « 'hello'
b.sayHi(); // « 'hello'
Applying the theory
With this in mind. We (our team) challenge to stop thinking in terms of classes & instances, and start thinking on prototype objects.
Imagine you need two objects, o1 and o2, each one overriding some default behavior/values. This is how we'd code that:
const defaultBehaviour = {
name: 'guest',
sayHi() {
return 'hi ' + this.name;
},
foo() {
return 42;
},
};
const o1 = Object.setPrototypeOf({ name: 'Jane Doe' }, defaultBehaviour);
o1.sayHi(); // « hi Jane Doe
o1.foo(); // « 42
const o2 = Object.setPrototypeOf({ foo: () => 100 }, defaultBehaviour);
o2.sayHi(); // « hi guest
o2.foo(); // « 100
While the class sugar-syntax is perfectly valid. Let's remove the mask and claim the true behavior of js 🦾
--
I can't recommend hard enough to read Kyle Simpson.
--
Cover image from undraw.co
Thanks for reading 💚.
Posted on August 10, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
