Details on prototypes

Question

So I'm coming from Python and trying to wrap my head around what a prototype is. Is there anyway I could get a Pythonic description of a Prototype? It kind of sounds like a descriptor had a baby with init. Also, I heard that Prototype tends to have negative consequences when being used on the DOM. Is that true? If so, why? Thanks, I've been looking through a ton of articles and the Prototype just isn't making sense to me at this point!

• Paul S.: I suppose a Pythonic description of a prototype would be prototype.py, but this is an implementation of prototypes into Python. Prototypical languages go about code reuse in a different way to the classical Class, it's not a simple translation.
• Obj3ctiv3_C_88: @PaulS. Thanks, a quick google of prototype.py took me to a very helpful site and it sounds like a wasn't terribly far off. Correct me if I'm wrong but you're able to define variables and set default values (like init). Additionally, you can add custom functions similar to a partial or using a decorator or override built in functions like print (similar to descriptors ability to override getattr)?
• bbill: I was also trying to find some insight on this for a while, and stumbled on this article aaditmshah.github.io/why-prototypal-inheritance-matters. Hope it helps.
• Paul S.: You have an Object obj, if you SET a property on obj then it will be set as an own property (even if it already exists, as long as it's not already setter). If you GET a property k of obj, let e = obj; X if e has it's own k, return that. If it doesn't, let e = Object.getPrototypeOf(e);, go back to X. ---- Multiple Objects can inherit from the same prototype chain, so if you perform a set on an Object that's not at the bottom level then everything that inherits from it will see this change even after they've been created.

Answer 1

In Javascript, much like Python, everything is an object. This includes functions.

Javascript doesn't have classes though. However, you can use functions to simulate the behavior of classes.

---

All functions have a property called prototype. If you say:

myInstance = new myFunction()

myFunction is run. (So it acts like a constructor) and the result is stored in myInstance. Nothing crazy here, but what that new keyword does is copy the prototype property from myFunction over to an internal property of myInstance. This property is referred to in the docs as [[prototype]] and you can reference it in some modern browsers as __proto__. __proto__ is not standardized though, so its use is discouraged.

If you need to get the [[prototype]] of an object, rather than using __proto__ use Object.getProtoTypeOf(myInstance).

MyClass.prototype == Object.getPrototypeOf(myInstance) //true

---

When you call a method on an object, if the object doesn't have that method, Javascript will look in its [[prototype]] property. It will keep searching the prototype (a.k.a. inheritance) chain until it reaches Object.

So as an example:

function MyClass() {
 this.prop ="hello"
 //Javascript implicitly returns `this` when the function is invoked using "new"
} 
MyClass.prototype.instanceMethodOne = function() {
 console.log(this.prop);
}
var myInstance = new MyClass();
myInsance.instanceMethodOne(); //"hello"

In the above example, myInstance will have a property called prop. But it will have no property called instanceMethodOne. This property was added to MyClass's prototype object. However, a reference to this object was copied to that [[prototype]] (a.k.a) __proto__ property of myInstance, so it is accessible.

You now have a situation where all instances have their own state, which is created in the constructor function (just a normal function) but they share the state that was added to the function's prototype property. This is how you get "classes" in Javascript.

• Paul S.: It's not good to call these things classes, call them Constructors
• Kyll: Going over constructors to explain JavaScript prototypes... Maybe not the best idea.
• Luke: @Kyll What would be a better way to explain them? Some overly complex metaphor about an object's blueprints? ;) Please feel free to add your own answer. I will happily up vote it. This is just my way of explaining it and it is technically accurate.
• Obj3ctiv3_C_88: Thanks, I think it is starting to come together. JS is just such a confusing language. In an article linked above new isn't recommended but then I see the author using the new keyword later in the article -.-
• Luke: @Obj3ctiv3_C_88 new is really just a shortcut for Object.create(), which is more powerful because it allows you to assign any object you want to be the prototype of another object. If you want to make one class inherit from another class, you create the prototype of the child class manually via ChildClass.prototype = Object.create(ParentClass.protoype) That introduces some slight caveats though, best explained in the tutorials: developer.mozilla.org/en-US/docs/Web/JavaScript/…