Noob question about Array.prototype

JavaScript
1

I don’t really understand the practical role of prototypes in JS yet, but just for the heck, I though I’d ask why, when I want to read about something like the pop() method on MDN, it’s listed under Array.prototype.pop(). I’m kind of assuming that’s because .pop() is a method relating to arrays, but is there something more fundamental to it? Is there any practical purpose to presenting it as Array.prototype.pop()?

2

It is something like a “parent class” in other languages.

Let’s say you have this “class” defined:

function A(){
    this.hello = function(){
        return 'Hello world';
    }
}

then you make couple of instances:

var a = new A();
var b = new A();
a.hello() //=> Hello world
b.hello() //=> Hello world

and then you want to add some other method to all of the instances. But imagine that you haven’t access to the source code of the A class anymore. That is where prototypes come to help:

A.prototype.newMethod = function() { return 'New Method'; }

a.newMethod(); //=> New Method
b.newMethod(); //=> New Method
3

Thanks @megazoid. One problem for me is that I don’t know other languages, but still, I do get what you’re saying here.

I’m not really sure why you wouldn’t have access to that, though.

Still, in principle, prototypes seem to be like a blueprint for things in JS. Kind of like humans can’t fly, but if you could say

Humans.prototype.fly = function () {
  flap arms and soar through the air}

we’d thus be able to do so?

4

When you create an object from another object in JavaScript the new object has access to what is in the prototype of the object that was copied without having to make its own copy.

the methods (functions) belonging to an object are normally attached to the prototype so that no matter how many copies you make of the object that all of them can access the same copy of those methods rather than each having to have their own copy.
Properties are not normally placed in the prototype as you usually need each copy of the object to have its own set of values rather than sharing them between objects.

So in the case of Array.prototype.pop() it means that the one copy of the code to do the pop() is shared between all arrays whereas the property Array.length is not on the prototype because you want different arrays to be able to have different lengths.

The reason for representing it as Array.prototype.pop() is because pop() is attached to the prototype of Array and not to Array directly the way length is attached directly.

As an example, if I include the following code in a web page:

Array.prototype.shuffle = function() {
   var r=[],c = this.slice(0);
   while (c.length) r.push(c.splice(Math.random() * c.length, 1)[0]);
   return r;
};

this adds a new method shuffle() to the Array prototype which is therefore available for ALL arrays in the code in the page to use (even if they were created before this code runs). If we omit the reference to prototype then we are only adding the method to the Array object and it is not shared with any existing arrays.

2 Likes
5

O, wow, lightbulb moment. Thanks @felgall! I’ve been trying to understand this for years and the penny has just now fallen.

(You’re so good at explaining things, you really should put up a website for explaining JavaScript. :stuck_out_tongue: )

6
  1. It’s built-in javascript class (like Array)
  2. It’s a class that comes from third-party library that you shouldn’t touch by hand
  3. Other specific situations
1 Like
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.