JavaScript uses a prototypal inheritance model, and this can be a little confusing for developers coming from class-based languages such as Java or C++. Prototype inheritance is simple but yet a powerful model. In this post, we are going to talk a little bit about it and how it is built in JS. If you haven't used a prototypical model before, don't be intimidated - we'll break it down!

Each JS object has a property called [[Prototype]], which holds a link to another object referred to as the object's prototype. This prototype object has its own prototype, and so on and so forth. When trying to access a property of an object, JavaScript will look at the object itself first. If it doesn’t find the property, it looks in that object's prototype. If it doesn’t find it in the prototype, it looks in the prototype of the prototype, and so on until a property with a matching name is found or until it reaches an object with null as its prototype, meaning that the prototype chain is over.

The [[Prototype]] property is accessed using the accessors Object.getPrototypeOf() and Object.setPrototypeOf(). It can also be accessed via the property __proto__, which is non-standard but implemented by many browsers. For the sake of simplicity, we’re going to use __proto__ from now on in this article, as shown below:

Note that the code above is merely a simplified version of the following: 

Object is called a constructor function, which is a function used to create objects. (If you want to learn more about the different ways we can create objects and the resulting prototype chain of each method, be sure to read next week's Snippet on Object Creation in JavaScript.)

In JavaScript, functions have a special property called "prototype" (not to be confused with the object property __proto__), and this is used when the function is called with the new keyword in order to set the prototype of the object being created.

In fact, if we check the value of Object.prototype, we get the same result as the x.__proto__. 

To make things clear, let's look at another example. First, we’ll create a function called “Person.” This will be our constructor function, and in JavaScript, the first letter of a constructor function is capitalized by convention. 

As we’ve seen before, Person has a property called prototype. So we are going to create a function called greetings inside of it:

Now we’ll create an object using our constructor function: 

If we check johnDoe.__proto__, we will see our greetings function there. When we call johnDoe.greetings(), the interpreter will check johnDoe’s properties. Since the function is not defined there, it will check its prototype (referenced by the __proto__ function), and then we’ll get the expected result:

Now, let's find out what happens if we create our object and then change our constructor function after that, like this:

What do you think will be the output? … If you said “Hello! =),” you are correct! This is because, as we said before, the __proto__ property is a reference to the object’s prototype and not a copy of it. You can also check that johnDoe.__proto__ === Person.prototype is true, meaning that both properties point to the same place.

Happy coding!