Javascript Prototype: The Basics

I think prototype is one of the hardest concepts to understand in Javascript. Some of the reasons for that may be:

• More and more developers are using Javascript frameworks these days and most developers can get their job done without touching prototype.
• There are a few terms about prototype that are just confusing, e.g. __proto__, getPrototypeOf and prototype.

So why bother even talking about it then? Because understanding how prototypes work can help you develop more efficient and organized code in JavaScript. If you want to become an experienced Javascript developer, you cannot escape it.

In this series, I want to share with you what I learned about prototype and hope it helps you a bit in your journey to Javascript mastery.

Table of Contents

• A Glimpse of Prototype
• __proto__, Object.getPrototypeOf() and prototype
  • __proto__ and Object.getPrototypeOf()
  • prototype
• Conclusion

A Glimpse of Prototype

In JavaScript, a prototype is an object that serves as a template for creating new objects. When a new object is created, it inherits the properties and methods of its prototype. This makes it easy to organize and extend your code.

This example demonstrates how to create an object with a particular prototype and how to access the object's prototype and (don't worry about the code at this point, we'll get to it later).

class Person {
  constructor(age) {
    this.age = age;
  }

  canDrive() {
    return this.age >= 18;
  }
}

const andy = new Person(10)
// check the prototype of the new object: andy
Object.getPrototypeOf(andy) === Person.prototype // => true
// call the method defined on the object's prototype
andy.canDrive() // => false

__proto__, Object.getPrototypeOf() and prototype

Now that we had a basic idea on prototype, it's time to clarify a few terms that cause most confusion: __proto__, Object.getPrototypeOf() and prototype.

__proto__ and Object.getPrototypeOf()

To get the prototype of an object in JavaScript, we have two options:

1. Use the __proto__ property
2. Or the Object.getPrototypeOf() method

While many modern browser supports it, __proto__ is deprecated and it's recommended we use Object.getPrototypeOf().

Here is an example using both approaches:

const foo = {
  // properties and methods go here
};

// These two are equivalent↓
const fooPrototype = foo.__proto__;
const fooPrototype = Object.getPrototypeOf(foo);

prototype

Every function has a prototype property in Javascript. It's important to distinguish it from the notion, every object has a prototype.

The prototype of an object is in fact a property too, only that it cannot be accessed via someObject.prototype. Instead, we use someObject.__proto__ as we've seen above. In other words, it is the __proto__ property that points to the actual prototype of an object.

The prototype property of a function, on the other hand, serves as the prototype of new objects created using the function as constructor (that is, with the new keyword).

function foo() {}

const myObj = new foo() // call foo as constructor
Object.getPrototypeOf(myObj) === foo.prototype // => true

Is foo.prototype the prototype of foo? Certainly not. I said foo.prototype is the prototype of new objects created via new foo(), so it cannot be the prototype of foo itself.

What is the prototype of foo then? It is Function.prototype in most cases (by which I mean if you didn't assign a new prototype to it), because functions are all created calling Function as constructor (via new Function(args)) under the hood.

Object.getPrototypeOf(foo) === Function.prototype // => true

Please remember that the prototype property is itself an object whose prototype is Object.prototype (if you didn't override it).

Object.getPrototypeOf(foo.prototype) === Object.prototype // => true

To summerize,

• The prototype of an object is a property that can be accessed via __proto__ and Object.getPrototypeOf().
• prototype is a property that every function has. It is the prototype of new objects created by calling the function as constructor.
• The actual prototype of a function (as distinguished from the prototype property) is Function.prototype (if you didn't override it).
• The prototype property is itself an object whose prototype is Object.prototype (if you didn't override it).

Conclusion

In the first part of the series, we had an overview of prototype, clarified some key terms about it and saw some code samples to help us get an initial impression on how prototype works.

In part 2, we'll take a closer look at concepts like prototype chain and shadowing.