Beneath Classes: Prototypes

Classes.js

class Spiderman {
  lookOut() {
    alert('My Spider-Sense is tingling.');
  }
}

let miles = new Spiderman();
miles.lookOut();

Prototypes.js

// class Spiderman {
let SpidermanPrototype = {
  lookOut() {
    alert('My Spider-Sense is tingling.');
  }
};

// let miles = new Spiderman();
let miles = { __proto__: SpidermanPrototype };
miles.lookOut();

let miles = Object.create(SpidermanPrototype)

function Spiderman() {}
Spiderman.prototype.lookOut = function() {
  alert('My Spider-Sense is tingling.');
}

Same?

function Spiderman() {
  this.__proto__.lookOut = function() {
    alert('My Spider-Sense is tingling.');
  }
}
let miles = new Spiderman();

Hi @rafaelcastrocouto miles instanceof Spiderman would be false if replaced completely.

Thanks for the comment @rahildar! I've fixed it, check out the edit.

@timiscoding

function Spiderman() {}
Spiderman.prototype.lookOut = function() {
  alert('My Spider-Sense is tingling.');
}

Same?

Not really unless you use the new operator (new Spiderman). Under the hood, 4 things happen:

• A brand new object is created
• That object's prototype is set to the prototype property of the function you're newing up.
• The "constructor" function (ie. Spiderman) is called with the "this" context set to the brand new object in step 1.
• The brand new object in step 1 is returned (there is an edge case but it's something dumb).

Dan's example is the simplest and the most accurate though, imo.

`
// class Spiderman {
let SpidermanPrototype = {
lookOut() {
alert('My Spider-Sense is tingling.');
}
};

// let miles = new Spiderman();
let miles = { proto: SpidermanPrototype };
miles.lookOut();
`

Alot more clear for my head to remember...

@abdullahsari thanks, that jogged my memory. I remember reading that in YDKJS.

Did a bit more digging as the code I had written was something I remembered a long time ago. See YDKJS

I was curious how TypeScript/babel transpile classes and discovered they pretty much use the same method except babel does more checking and property descriptor setting.

TypeScript playground

Babel playground