Let’s Build Prototypal Inheritance in JS
Tags: javascript, webdev
Published: 2019-06-20 22:22:54

The idea for this post is pretty simple. I want to some extent build and with that, illustrate how prototypes work in Javascript.

We have to make a statement. Every object has to have a property that we will call **delegator** that points to:

1. another object, or  
2. points to null

Now, let us quickly define the search-property algorithm, and don’t worry, it is straightforward.  
We search for a property in some initial object. If nothing is found and a delegator is an object, perform the same property search in that delegator object. If delegator property is pointing to null, return some generic error like “_nothing is found_”.

```
var first = {
 a: 221,
 delegator: null
}
var second = {
 b: ‘stringy property’,
 delegator: null
}
```

I have created two objects with some of their personal properties, and one property name in common. The **delegator** one. And for now, both of them are pointing to null. By doing this, we have fulfilled our first condition/statement, and that is that every object has to have a **delegator** property. Great so far. Now, we need to focus on the searching-properties algorithm.

To look up for the properties in an object, we can use the`for` loop.

```
for( property in first ){
 if(property === 'a'){
   console.log('I found it') // `I found it`
   return
  } // else there is nothing found
}
```

In case you don’t know what this is doing, it is looking for the properties in the object called`first` for the property `a`&nbsp;. Before I go any further, I would have to refactor this code in a function, since I will be using it (hopefully) many times in my program. We have two variables in it: the name of the object(_obj_) and the name of the property(_property\_name_), so those two will be my arguments in the function.

```
function searchProperty(obj, property_name) {
  for( property in obj ){
    if(property === property_name){
      console.log('I found it')
      return
    } // else there is nothing found
  }
}
searchProperty(first, 'a') // 'I found it'
```

So far, we have a function that performs searching only in one object, but we have said in our algorithm that we need to perform this search recursively on object’s **delegators** until we find the property **or** we hit a **delegator** that points to null.

```
function searchProperty(obj, property_name) {
 if(obj === null) {
   console.log('We have reached the end of chain. Nothing found.')
    return
  }
  for( property in obj ){
    if(property === property_name){
      console.log('I found it')
      return
    }
  }
  searchProperty(obj.delegator, property_name)
}

searchProperty(first, 'a') // 'I found it'
```

In the first line, we have handled the case when the delegator points to null. All we return is a log that says`We have reached the end of chain. Nothing found.` and then we exit the function. Nothing we can do in it anymore, so we return.  
After the `for` loop, and that is the case if no property is found in the starting object, I would call that search function again with the same `property_name` argument, but with a different object to begin the search on.&nbsp;  
By doing this, we are searching the properties on delegator objects until we hit the delegator that points to null or we actually get a property that we are searching.

* * *

In this short section, I would like to explore and test our function above and try to walk through the code and guess what the outcome would be.

Example 1

```
var first = {
 a: 221,
 delegator: null
}
var second = {
 b: 'stringy property',
 delegator: null
}
 ...
searchProperty(second, 'a')
```

Here, we are searching property `a` in the `second` object, and since it is not found in that object itself (for loop), we are calling `searchProperty(second.delegator, ‘a’)`&nbsp;. As you can see, the `delegator` property here points to null, hence returning the “end of the chain” error.

 ![](https://cdn-images-1.medium.com/max/1600/1*_DVmgrEOTH06ZTGZA3AAvQ.gif)

I am drawing the objects with head, body, and bottom. On the body, there are hands that point to some values to emulate _key-value_ pair. So, we are performing the value resolving function for `a` in the `second` object and since it is not found, then the second function is called, and as an argument, we are resolving the **delegator** property. It is pointing to a null value and the “_error_” was printed.

Example 2

```
var first = {
 a: 221,
 delegator: null
}
var second = {
 b: 'stringy property',
 delegator: first
}
 ...
searchProperty(second, 'a')
```

In here, I start searching `a` property in the `second` object. I haven’t found it in there so I am invoking `searchProperty(second.delegator, 'a')` which will result in `searchProperty(first, 'a')`&nbsp;, performing the search in `first` object looking for `a` property. Sure enough, it is found there.

Example 3

```
var first = {
 be: 210021,
 ce: 001,
 __delegator__ : null
}

var second = {
 ey: "lol",
 some: 001,
 __delegator__ : first
}

var third = {
 prop: 'null',
 tup: 21,
 __delegator__ : first
}

searchProperty(third, 'be') // I found it
```

Quick obvious note. I have changed the **delegator** key name into **\_\_delegator\_\_** because of some chance that user picks that name and our object or a null value will be changed by the user. Be sure to change it in the function body: `searchProperty(obj. __delegator__ , property_name).`

 ![](https://cdn-images-1.medium.com/max/1600/1*ZeO-GLYoCkX0h59lWOL6ig.gif)

A quick note regarding animation. Every object will be sitting on its **\_\_delegator\_\_** rather point to it from the body. The reason for this is an organized view of the system.

In this case, both `second` and `third` object have a **delegator** object `first`&nbsp;. Both of them are sitting on the `first` object, and he is sitting on top on null. The search was started on `third` object and since it is not found, a new search is started on the `first` object where the property `be` is found. The same result will be achieved when we call this:

```
searchProperty(second, 'be') // I found it
```

The search starts on the `second `object, the property is not found, the search has been performed on its **delegator** , and it is found there.

In the end, objects don’t inherit anything. It’s just the search that is being continued to other objects.

* * *

Depending on the reception of this post, I will make a follow up to it. While the core mechanic of delegation is demonstrated, I would like to spend more time talking about the topics related to this. I have prepared two more posts on this topic so far and have an idea for one more.