Instantly share code, notes, and snippets.
Save gaearon/a25fd42a1e6b4cc24851978df0a36571 to your computer and use it in GitHub Desktop.
| classSpiderman{ | |
| lookOut(){ | |
| alert('My Spider-Sense is tingling.'); | |
| } | |
| } | |
| letmiles=newSpiderman(); | |
| miles.lookOut(); |
| // class Spiderman { | |
| letSpidermanPrototype={ | |
| lookOut(){ | |
| alert('My Spider-Sense is tingling.'); | |
| } | |
| }; | |
| // let miles = new Spiderman(); | |
| letmiles={__proto__:SpidermanPrototype}; | |
| miles.lookOut(); |
aquibyatoo commentedMay 28, 2020
let miles = Object.create(SpidermanPrototype)
timiscoding commentedMay 28, 2020
function Spiderman() {}Spiderman.prototype.lookOut = function() { alert('My Spider-Sense is tingling.');}Same?
rafaelcastrocouto commentedMay 28, 2020 • edited
Loading Uh oh!
There was an error while loading.Please reload this page.
edited
Uh oh!
There was an error while loading.Please reload this page.
function Spiderman() { this.__proto__.lookOut = function() { alert('My Spider-Sense is tingling.'); }}let miles = new Spiderman();rahildar commentedMay 30, 2020
Hi@rafaelcastrocouto miles instanceof Spiderman would be false if replaced completely.
rafaelcastrocouto commentedMay 30, 2020
Thanks for the comment@rahildar! I've fixed it, check out the edit.
mabdullahsari commentedMay 31, 2020 • edited
Loading Uh oh!
There was an error while loading.Please reload this page.
edited
Uh oh!
There was an error while loading.Please reload this page.
function Spiderman() {}Spiderman.prototype.lookOut = function() { alert('My Spider-Sense is tingling.');}Same?
Not really unless you use thenew operator(new Spiderman). Under the hood, 4 things happen:
- A brand new object is created
- That object's prototype is set to theprototype 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 commentedMay 31, 2020 • edited
Loading Uh oh!
There was an error while loading.Please reload this page.
edited
Uh oh!
There was an error while loading.Please reload this page.
`
// 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 commentedJun 1, 2020
@abdullahsari thanks, that jogged my memory. I remember reading that inYDKJS.
Did a bit more digging as the code I had written was something I remembered a long time ago. SeeYDKJS
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.
quintontcampbell commentedMar 5, 2021
Love this content, thank you for sharing it freely with us all Dan!
ovistoica commentedMar 18, 2021
haikyuu commentedAug 19, 2021
@ovistoica typescript is probably converting it like that for compatibility and performance reasons. But people are discouraged to use it.
duzitug commentedJan 29, 2022
@ovistoica I think it is not exactly polluting, because It isn't changing a default prototype like Array, String or Object ones.
khoanguyen-yang commentedFeb 27, 2023
Hi@gaearon,
I am wondering why, when defining classes, the properties are on the object itself while the methods are on the__proto__
class Spiderman { aProperty; lookOut() { alert("My Spider-Sense is tingling."); }}let miles = new Spiderman();console.log(miles.hasOwnProperty("aProperty")); // trueconsole.log(Object.getPrototypeOf(miles).hasOwnProperty("lookOut")); // truebuza-me commentedJun 14, 2023 • edited
Loading Uh oh!
There was an error while loading.Please reload this page.
edited
Uh oh!
There was an error while loading.Please reload this page.
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?
const someObject = {};
const everyObjectProto = someObject.__proto__;
const someFunction = function() {};
someFunction.prototype.__proto__ === everyObjectProto; // true
So "someFunction.prototype" points to an object, just like any other in your code, not to the "main" object prototype. Thus it is not polluting anything.
magnusram05 commentedApr 17, 2024
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?
const someObject = {}; const everyObjectProto = someObject.proto; const someFunction = function() {}; someFunction.prototype.proto === everyObjectProto; // true
So "someFunction.prototype" points to an object, just like any other in your code, not to the "main" object prototype. Thus it is not polluting anything.
ThissomeFunction.prototype.__proto__ === everyObjectProto; // true can be changed tosomeFunction.prototype === everyObjectProto; // false for clarity
