__proto__, prototype, [[Prototype]], Prototype Chain

I decided to talk about this because I think it is one of the confusing topics in JS. On average, in every interview, at least one question is necessarily related to this topic.

Prototype

Note: “Prototype” is a special property available only on function objects.

This property is automatically assigned to functions when the function is run.

Almost every object is connected to some other object. That connection is established by prototype. Objects inherit the methods and properties of the parent object through the prototype .

prototypeproperty is in the function itself( Animal), not in its instances( Dog).

To understand better, let’s try to understand the following example step-by-step:

First, let’s see what happens when the first line is executed:

prototypeWhen the function is executed, an automatic property is added to Animal ( because it is declared with the function keyword)

prototype itself is a separate object and has 2 properties:

{ 
  constructor: ƒ Animal() 
  __proto__: Object 
}

What happens when you create a Dog object?

1. Animal.prototype.constructoris triggered and a new object is created.
2. The new object is assigned to the variable Dog. ( Dog={})
3. Dogproperty is created which __proto__points to parent.prototype. (Dog.__proto__ === Animal.prototype)

Additionally , let’s add to Animal :color

Dogsince it does not have a color property, Dog.__proto__it will search for it in and return it after finding it.

Proto : __proto__ vs [[Prototype]]

What is [[Prototype]]? (Private)

It is a private object that JS runs in the background. ( inaccessible to the developer ) which shows the object’s prototype.

What is __proto__? (Public)

It is an internal property that is a must in every object .

[[Prototype]]Since we cannot directly refer to , __proto__we use the property

__proto__can be either Object or Null .

How we can create an object without a prototype?

In general, every js object inherits Object , and Object.prototype is always Null .

Object.create(null)

NOTE: Setting __proto__ directly is no longer recommended by JS. (Doberman.__proto__ = Dog)

DEPRECATED. This is for example purposes only. DO NOT DO THIS in real code. //source: Mozilla

Prototype Chain

All objects in JS are instances of Object .

Each object can inherit only one object at a time.

Objects

How to search on any field of object?

1. First of all the field of object is searched in itself, if it is found it is returned,

if it is not found, object.__proto__ is also searched.

If it is not found yet, it is searched in object.__proto__.__proto__

The process continues in this order (object.__proto__.__proto__.__proto__) until reaching the Global Object

2. If it can’t be found at the end, the result undefinedis returned.

In the example below, Inherited fields( code,name) is not inside District hence there are returned from inside District.__proto__.

Arrays

Let’s take a look at what an array inherits when creating it:

1. The first inherits from and thus has the methods of ( …etc)Array.prototypeArrayforEach, join
2. It then Object.prototypeinherits and thus Objecthas the methods of ( toString, keys…etc)

Functions

1. The first inherits from and thus has the methods of ( …etc)Function.prototypeFunctioncall, bind
2. It then Object.prototypeinherits and thus Objecthas the methods of ( toString, keys…etc)

with Object.create()

Object.create()method allows you to create a new object using an existing object, which creates a prototype chain .

Null means no prototype.

NOTE: The delete operator normally deletes a specific property of an object. But in the following example it is not deleted. Why?

In fact, b.id is deleted normally here , but id still remains in a .

Since id is not in b , b.__proto__ is also searched and b.__proto__.id is returned.

Note: If a.id was deleted, that field would be deleted from both.

Getter and Setter Methods

As we can see from the example, the setColor and getColor methods belong to the Dog object. Since we inherited Doberman from Dog, it already exists in Dog.

Note: setColor and getColor methods only change the property of the object from which it is called.

Iteration

For in also iterates over the properties of the inherited object.

Global Object is a function

A Global Object can be called as a function, which means that what we call a global object is actually a function. Therefore, it has the prototype property.

All objects inherit the default Object , including Dog and Cat .

This means that Dog.__proto__ and Cat.__proto__ also have color .

Instanceof operator

Finally, let’s look at Process with a diagram:

You can see more clearly from this link: Diagram URL:

Diagram URL:

I hope it was helpful…