Prototypal Inheritance
Tags: javascript, webdev, frontend
Published: 2023-06-06 11:08:41

## What is Prototypal Inheritance:

Prototypal Inheritance is an object getting access to the properties and methods that is part of another object using prototype chaining.

Every function in Javascript has this hidden property called `[[prototype]]` and `__proto__` property which is inside the `[[prototype]]` helps in creating the chain to inherit the properties and methods from parent function.

let's see an example to understand better:

### prototypal Inheritance in an array.

We can use map method on the `arr` but where does this map method comes from.

```javascript
const arr = []
arr.map()
```
If you check the `[[prototype]]` property of the `arr`, you will find different array methods and `map` is also in there.

![prototype](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dg9q1xj5px1uk98c6eel.png)

All the arrays that we create comes from the base `Array[]` object and this base array has all the array methods like `map`, `filter`, `reduce` etc. So whenever we create an array it inherits these array methods from the `Array[]` using prototypal inheritance. 

As we already know `__proto__` helps in creating the chain between the `arr` and base `Array[]`. So if we write `arr.__proto__` we will get that base array since `__proto__` is referencing to it. 

![proto](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k9nd9uejfw0dd9alk57o.png)

We can use `hasOwnProperty()` method to check if `map` is the property of `arr` or base array. 

![hasOwnProperty](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m3bkizw2kfr1ibel2m2p.png)

The base Array comes from the base Object. we can get that object using `arr.__proto__.__proto__` and the __proto__ of the base object points to `null`.

![proto chain](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/npqkk2wtycbkc45igfnf.png)

<small>How prototypal chaining is made</small>
![prototypal chaining](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p2awsd6d57xetea1wt9h.png)


prototypal inheritance helps in reusing the property if it's needed by another object.


### Prototypal Inheritance in a function

let's see how prototypal inheritance works in case of functions with an example.

Every functions in javascript has the `[[prototype]]` property which contains `__proto__`

We have a function `add`
```javascript
function add(){}
```
If we write `add.__proto__` then we will get the base function, from which this `add()` function comes from and inherits the `call`, `apply`, `bind` methods. 

![native code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ypab7hmmkvtqtbw31td1.png)

We can check if `bind`, `call`, `apply` are the properties of `add()` or are being inherited from the base function using `hasOwnProperty`

![inheritance in functions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/of3e307lyotfv625m8nx.png)

`name` is a special property of function is will give us the name of the function. 

![name a special property](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z7m1njdqplykx3huy3aw.png)

The base function comes from the base Object so `add.__proto__.__proto__` will give us an object and `__proto__` of that object points to the `null`.

<small>below image shows the prototype chaining</small>
![prototype chain](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fphyxsnttnqsaudilpg8.png)

### prototypal Inheritance using objects.

we have two objects `animal` and `bird`. 
```javascript
const animal = {
  eat:true,
  fly(){
    return "I can fly"
  }
}

const bird = {
  color:"blue",
}
```
We want `bird` object to inherit the `fly()` methode from animal. We can do so using `__proto__`.

```javascript
brid.__proto__ = animal

console.log(bird.fly())
console.log(bird.color)
```
When `bird.fly()` was called then javascript checked it in the `bird` object, when this method was not found there then it checked its `[[prototype]]` and found it in `animal` object.

We can set the `[[prototype]]` property using `Object.setPrototypeOf()` as well.

```javascript
const person ={
  greet(){
    return "Hellooo!"
  },
  talk:true
}

const student = {
  study:"true"
}

//student inherits the properties of person
Object.setPrototypeOf(student,person)

console.log(student.greet())
```