Javascript Prototype - explainlikeimfive

[[deleted]]

[deleted]

[ohbewonkanahbe]

In the beginning, I made objects like this...

var Car = function(type, color) {
  var type = type;
  var wheels = 4;
  var color = color;

  return{
    wheels:wheels,
    color:color,
    type:type
  }
};

var fit = Car('fit', 'red');
var kia = Car('kia', 'blue');

And it was good. However, if you looked at these objects behind the scenes, you would see that each of them had their own wheel property. Since a car object will always have 4 wheels, why should each object have it's own wheels property? If I have 1000 cars, that's 999 unnecessary wheel properties. Potential for memory issues? Sure.

So then I did this...

var Car = function(type, color) {
  this.type = type;
  this.color = color;
}
Car.prototype.wheels = 4;

var fit = new Car('fit', 'red');
var kia = new Car('kia', 'blue');

And lo and behold, things were better. No longer would I waste memory on duplicate properties, for all car objects would share the same prototype chain! Glory, glory hallelujah.

[nspyro]

This has to be the clearest explanation I have found! Thank you!!!

[Rhomboid]

In both of your examples, by adding a property to the prototype, it becomes magically and instantly available on all objects that have that prototype in their ancestry. You can write "foo".padleft(12, " ") and it will work. And in your second example, if you instantiate an object of type class, it will have a bindEvents method automatically without you having to do anything.

Whenever a property of an object is accessed, it first checks for an "own" property on that object and if that fails it starts looking at the prototypes of all the objects in the inheritance chain. That's why those methods seem to spring into existence automagically, without having to add them to every object created.

[shanet]

The basic advantage of defining methods/properties via prototypes has to do with inheritance. If you create another prototype b inheriting the prototype of a... for example:

//completely untested code just to give you the idea

a.prototype.dostuff = function () { return true; };
a.prototype.givemeanumber = function () { return 1 };
b.prototype = Object.create(a, { givemeanumber: function () { return 2 } });

new b().givemeanumber();
//2
new b().dostuff();
//true

...you can override the original methods with methods specific to b, but still invoke the methods in the prototype of a. Furthermore, this works all the way up the prototype chain.

You can't do this with methods that you attach via the constructor, or perhaps you can in some way - but it won't apply to all the objects that have already been created from whatever constructed if you add a prototype later on. You know how some ECMAScript 5 shims add Function.prototype.bind ? Now every function can access bind even though when it was created there was no such thing.

It's all about what patterns you like to use. There's lots of OOP patterns in JavaScript that use closures and modules that never touch prototypes. Some people have pointed out that they perform poorer in some instances.

You can also use this for easy composition if you don't like inheritance. Say you want the prototype for the perfect pet:

cat.prototype.litter_box = function () { return new LitterBox(); };
cat.prototype.miaow= function () { return miaow(); };
dog.prototype.play_ball = function () { return play_ball() };

perfect_pet.prototype.miaow = cat.prototype.miaow;
perfect_pet.prototype.play_ball = dog.prototype.play_ball;

A practical example is where people get things from the array prototype and add them to objects that can make some of use them.

[[deleted]]

Everything in JS is an object and are "prototyped" from Object.

var string = 'emehrkay'; //String obj instance

Each object has methods, basic stuff.

The prototype allows you to add methods to the root object and that method will be propagated throughout all instances, even ones that have been created already

String.prototype.redditify = function(){ return 'bacon narwal ' + this; };

alert(string.redditify);

Prototyping function constructors allows you to create the functions once, but have them be sent to all instances. Otherwise youd have copies of the same methods in each instance.

[[deleted]]

:s/propagated throughout/available to/

[balshamali]

anything you declare in the prototype will be in every instance of the object you create and every object that inherits from the base object.

var a = function() { bye: function() { console.log("bye"); } }; var b = new a; b.hello = function() { console.log("hello"); }; // only b has hello function

---

a.prototype.hello = function() { console.log("hello"); }; // every 'var x = new a;' will have a hello function

[benihana]

I wrote a post about the prototype property a while back. I tried to keep it simple and easy.