Javascript Prototype: The Basics
Tags: webdev, javascript, prototype, beginners
Published: 2022-12-18 10:00:00

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](#a-glimpse-of-prototype)
- [\_\_proto\_\_, Object.getPrototypeOf() and prototype](#---proto------objectgetprototypeof----and--prototype-)
  * [\_\_proto\_\_ and Object.getPrototypeOf()](#---proto----and--objectgetprototypeof---)
  * [prototype](#-prototype-)
- [Conclusion](#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).

```javascript
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:

```javascript
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).

```javascript
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.

```javascript
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).

```javascript
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](https://dev.to/jessewei/javascript-prototype-prototype-chain-and-shadowing-3oe2), we'll take a closer look at concepts like prototype chain and shadowing.