Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Beneath Classes: Prototypes
class Spiderman {
lookOut() {
alert('My Spider-Sense is tingling.');
}
}
let miles = new Spiderman();
miles.lookOut();
// class Spiderman {
let SpidermanPrototype = {
lookOut() {
alert('My Spider-Sense is tingling.');
}
};
// let miles = new Spiderman();
let miles = { __proto__: SpidermanPrototype };
miles.lookOut();
@aquibyatoo

This comment has been minimized.

Copy link

@aquibyatoo aquibyatoo commented May 28, 2020

let miles = Object.create(SpidermanPrototype)

@timiscoding

This comment has been minimized.

Copy link

@timiscoding timiscoding commented May 28, 2020

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

Same?

@rafaelcastrocouto

This comment has been minimized.

Copy link

@rafaelcastrocouto rafaelcastrocouto commented May 28, 2020

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

This comment has been minimized.

Copy link

@rahildar rahildar commented May 30, 2020

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

@rafaelcastrocouto

This comment has been minimized.

Copy link

@rafaelcastrocouto rafaelcastrocouto commented May 30, 2020

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

@mabdullahsari

This comment has been minimized.

Copy link

@mabdullahsari mabdullahsari commented May 31, 2020

@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.

@front-end-performer

This comment has been minimized.

Copy link

@front-end-performer front-end-performer commented May 31, 2020

`
// 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...

@timiscoding

This comment has been minimized.

Copy link

@timiscoding timiscoding commented Jun 1, 2020

@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

@quintontcampbell

This comment has been minimized.

Copy link

@quintontcampbell quintontcampbell commented Mar 5, 2021

Love this content, thank you for sharing it freely with us all Dan!

@ovistoica

This comment has been minimized.

Copy link

@ovistoica ovistoica commented Mar 18, 2021

image

This is picked up from the Typescript playground. I just finished the Just Javascript module written by Dan and I have a question which might be a noob one but isn't Spiderman.prototype.lookOut = (..) regarded as polluting the prototype and should be discouraged?

@haikyuu

This comment has been minimized.

Copy link

@haikyuu haikyuu commented Aug 19, 2021

@ovistoica typescript is probably converting it like that for compatibility and performance reasons. But people are discouraged to use it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment