🟡 JS: Prototypal Inheritence Explained 🟡

Thread By @MrConerMurphy

01/04/2021 06:30

15 Tweets

JavaScript

🟡 JS: Prototypal Inheritence Explained 🟡

Prototypal Inheritance is one of those terms that sounds intimidating and complicated but it's not! In this thread, I'm going to cover what it is and how we use it. 🧵 1/15

#100DaysOfCode #JavaScript #developers #DEVCommunity

1️⃣ What is it?

"Prototypal inheritance is the process an object uses in JavaScript to lookup properties and methods from its prototype should it not be found in the current object. "

Essentially, it allows us to use the methods and properties from another object. 2/15

2️⃣ Example

In the image, we have 2 objects with different properties in them.

We try to log out the property from the first object by accessing it on the second object and unsurprisingly it doesn't work. ❌

But, once we set the prototype it works. ✅

Why is this? 3/15

The reason we can log out the property from the first object by accessing it on the second object after setting the prototype is because of prototypal inheritance.

Once the prototype is set, the chain is formed. When we try to access a property on an object... ⏬ 4/15

...it looks within itself first, if it can find the property there it executes it.

However, if the property isn't found within itself it then looks up the chain to the next link which we had set to the 'shop object.

As the property existed there it logged it out. 5/15

3️⃣ The Chain

Prototypal Inheritance is actually quite logical, it looks within itself and then works up the chain every time it can't find the requested property.

This process continues until it finds the property or it reaches the end of the chain which is null. 6/15

🔗 Chain Examples

In the image, there are 3 examples showing the different situations of our example above.

1 - No Prototype 2 - One Custom Prototype 3 - Two Custom Prototype

By default, all objects will finish with the last prototype being Object.prototype. 7/15

4️⃣ Read Only

The prototype is only used for reading properties, when it comes to writing/deleting properties they are added or removed to the object it was called on regardless if it's in the prototype or not. 8/15

4️⃣ Accessor Properties Exceptions

The only exception to the read-only rule is getters and setters.

When using getters and setters we use the methods defined in the chain but the individual values are stored within the objects themselves. (More on this in a bit) 9/15

5️⃣ ".this"

The simple rule when it comes to using the "this" keyword with the prototype is:

No matter where the method is found whether the object itself or the prototype chain. When calling a method the "this" keyword always refers to the object before the dot.

10/15

5️⃣ ".this" example

In our getters/setters from earlier, we used 'foodShop.age = 10', this called the setter which used ".this".

The " this" referred to 'foodShop' and not 'shop' even though the setter was stored within 'shop'.

Another example in the 🖼️ 11/15

6️⃣ Looping

If we want to see the properties on an object we can use 'Object.keys()' but this excludes inherited properties so we can't see the properties from the prototype.

If we want to do this, we can use a 'for..in' loop like shown in the image. 12/15

6️⃣ Looping - Checking if a property exists on the object

If you want to see if a property exists within the object or has been inherited you can by using:

'Object.prototype.hasOwnProperty()'

This will return a boolean value for every property, see the 🖼️ for more... 13/15

6️⃣ Looping - Checking Object.prototype

You may notice that when we loop through the inherited properties, methods like '.keys()' are not shown, why?

Because the Object.prototype has the 'enumerable:false' flag & a for..in loop skips anything with this flag. 14/15

❗ The use of proto

I have used proto a few times throughout this thread but this shouldn't be done unless for demonstration as this syntax is now deprecated.

Instead use, Object.getPrototypeOf & Object.setPrototypeOf

🔗

15/15

Links: