Let’s Build Prototypal Inheritance in JS

var-che — Thu, 20 Jun 2019 22:22:54 +0000

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:

another object, or
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 thefor 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 calledfirst for the property a . 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 saysWe 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.

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’) . As you can see, the delegator property here points to null, hence returning the “end of the chain” error.

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') , 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).

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 . 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 secondobject, 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.

DEV Community: var-che

Let’s Build Prototypal Inheritance in JS