What does a .prototype mean in JS?

JavaScript
#1

Hi. I know on how to use an object like Math. This will looks like this:

console.log(Math.abs(-4)); // returns 4

And use an object as a function (i.e. converting a string that looks like a number into an integer number). That will look like this:

var string = '42';
var number = Number(string);
console.log(number); // returns 42

But I have a question.

Let’s say that we use the Math object with a .prototype key that may looks something like this:

Math.prototype;

And yeah. What does a .prototype mean? And what does it do??

Please answer.

Thanks!
@pummarinbest

#2

Did you go through the part of the fCC JS curriculum on Object Oriented Programming?

MDN links:

MDN: Object prototypes

Prototypes are the mechanism by which JavaScript objects inherit features from one another. In this article, we explain how prototype chains work and look at how the prototype property can be used to add methods to existing constructors.

#3

It’s an object, with some properties attached to it (normally just functions, occasionally values).

In programming languages, it is common to want to inherit bits of functionality, to reuse behaviour.

JavaScript uses prototypes to do this. So bear in mind that most things in JS are objects. Each of those objects has a [hidden] property called prototype (which is another object).

So as an example:

  • There is a type of object called Object, the base type that everything inherits from.
  • It has a prototype property that has some functions attached to it (for example toString(), which converts the object to a string, and hasOwnProperty(), which checks if an object has a specific property).
  • There is a type of object called Array, which inherits from Object (think of Object as the parent of Array).
  • Array copies the prototype object from Object, so Array now has access to the toString() and hasOwnProperty() functions.
  • Array's own copy of prototype has a load more functions attached to it (e.g. map(), indexOf(), push() and so on).
  • I can make a new object, let’s call it MyArray, that inherits from Array.
  • MyArray copies Arrays prototype, so now MyArray has access to toString(), hasOwnProperty(), map(), indexOf() and push().
  • I can now add more properties to the MyArray prototype.

Edit: just as an addendum, the OO section @lasjorg linked to on FCC goes through how this works. IRL you probably won’t write OO code the way it’s taught in FCC (you would use the class syntax instead), but it’s important to understand because it’s how JS works.

Tutorials on JS’ OO features often feel a bit abstract and dry, but isn’t actually too complicated if you remember that a prototype is just another object that’s attached to each concrete type of object (Object, Array, String, etc), one that gets shared and copied.

Every object is a copy of another object, and because in JS you can freely alter those objects at any time, you can add or redefine properties, which lets you build parent/child relationships easily (for example, copy Object, get all the functions attached to its prototype, maybe alter how some of them work, add some more functions).

Edit edit: this is a good book on the subject if you’re interested: The Principles of Object-Oriented JavaScript. And a very different rec, but the Lua chapter of the book Seven More Languages in Seven Weeks involves creating a fully functional prototypal OO system – different language to JS, but principles are very useful (from the overview of the book: “If you want to learn JavaScript, learn how prototypes work first in a simpler language. New JavaScript programmers are often better off learning a language like Lua first, which has the same overall model but fewer distracting concepts than JavaScript.”)

1 Like
Can't get a grasp on JavaScript prototype
#4

To avoid confusion, whenever someone refers to the prototype of an Object, they’re usually not meaning this:

Object.prototype

Math.prototype

But this:

Object.__proto__

Math.__proto__

The .prototype property as in the first example is only present on functions. The Math object doesn’t have such a property, so

typeof(Math) // object
Math.prototype // undefined

The thing called “Object” in JavaScript however is actually a function - the constructor function of all objects:

typeof(Object) // function
Object.prototype // function Object(){...}

Don’t worry if you don’t understand all that right away. I’ve been coding in JS for a while and it still confuses me occasionally.

So to answer your question “What does .prototype mean in JS”: That property point to the object that was used as prototype, when the object was created.

1 Like
#5