JavaScript Prototypal Inheritance In Depth: a blog about prototypal inheritance and how it can be used in Javascript.
This blog is for developers who want to learn more about the inner workings of JavaScript, specifically the prototype chain, prototypal inheritance, constructor functions, and the new keyword.
JavaScript is an object oriented language and it’s having a prototype-based inheritance model. There is no class keyword in JavaScript like in Java or other languages. The objects inherit from objects, not classes.
How does JavaScript Prototypal Inheritance work?
The main idea is that you have a prototype object that other objects are linked to through the prototype chain. The prototype object (prototype) has properties and methods which will be assigned to the object inheriting from this prototype object (instance).
There are two ways that you can link objects together: chaining and cloning. We’ll take a look at both ways, but we won’t be using cloning because it’s inefficient. Instead we’ll be using chaining because it’s very efficient even though it seems somewhat complicated at first.
The Prototype Chain
It’s very important to understand how the prototype chain works in order to understand how prototypal inheritance works and how we can leverage this mechanism to our advantage in
In this post I’m going to talk about prototypal inheritance in Javascript. While there are a number of JS tutorials out there, I thought it would be nice to put together a blog post on the topic for those who may already have some familiarity with JS but aren’t familiar with prototypal inheritance.
Since “Inheritance” is kind of a big word, let’s start off by talking about what prototypal inheritance is. In short, prototypal inheritance is a way of creating objects that inherit directly from other objects. In OOP (object oriented programming), many classes (the equivalent of types) can inherit from other classes and have their own set of methods unique to that class. This isn’t the case in javascript, so we use prototypal inheritance instead.
Here’s an example of a function that creates objects:
function createObject(name) {
var obj = {};
obj.name = name;
obj.hello = function() { console.log(‘Hello ‘ + this.name); };
return obj;
}
In this example we’re creating an object called obj and adding two properties onto it, one which holds a string value and the other which holds a function reference. We then return the obj object to its caller
Prototypal inheritance is a term you will hear tossed around in JavaScript circles, but many people do not fully understand what it is. I want to give you a full understanding of prototypal inheritance and how you can use it in your code. See the table of contents below for a list of topics I’ll cover:
1. What is prototypal inheritance?
2. Defining an object
3. Object references
4. Setting up the prototype chain
5. Different ways to create objects
6. The prototype chain in action
7. Modifying the object’s prototype after creation (not recommended)
8. Bonus: Object.getPrototypeOf()
Prototypal inheritance is an entirely different way of looking at object oriented programming. Rather than putting methods on class definitions, methods are put on objects and then objects are cloned to create new objects. In this series of notes, I’ll describe prototypal inheritance in depth and provide code samples along the way.
JavaScript’s prototype inheritance system is unusual compared to many other object oriented languages. This post explains the nuts and bolts of the system and gives you a better intuition for how it will behave. It goes into much greater depth than the official documentation, which only provides a cursory overview.
JavaScript’s prototype inheritance system is unusual compared to many other object oriented languages. This post explains the nuts and bolts of the system and gives you a better intuition for how it will behave. It goes into much greater depth than the official documentation, which only provides a cursory overview.
JavaScript’s prototype inheritance system is unusual compared to many other object oriented languages. This post explains the nuts and bolts of the system and gives you a better intuition for how it will behave. It goes into much greater depth than the official documentation, which only provides a cursory overview.
JavaScript is a very powerful language with a relatively simple inheritance model. Yet, there are many places where JavaScript can trip up the unwary developer, especially in regards to prototypal inheritance.
In this article, I will go over some concepts that are key to understanding how JavaScript implements prototypes and prototypal inheritance. In addition, I will go over some of the common pitfalls associated with the language.
Inheritance Models
The way in which objects inherit from other objects differs between languages and this can have a huge impact on how you structure your code. This section will describe what prototypal inheritance is and how it differs from other types of object oriented inheritance models.
Classical Inheritance
If you’ve ever done any development in Java, C++ or C
Objects in JavaScript are defined as an unordered collection of related data, of primitive or reference types, in the form of “key: value” pairs. These keys can contain either primitive or reference values. In addition to this, objects can contain other nested objects.
In JavaScript, functions are first-class citizens. They can be assigned to variables, passed around as arguments, created within another function and returned as values from a function call.
In JavaScript, functions are treated as objects by the interpreter, that’s why they have properties and methods just like any other object.
Every JavaScript function has a prototype property (this property is empty by default), and you attach properties and methods on this prototype property when you want to implement inheritance.
What happens when you try to access a property on an object?
Whenever you try to access a property on an object, the interpreter starts searching for this property in the current object itself. If it finds that property then it returns its value, else it searches for this property in all its parent objects one by one until it finds it or reaches the top-most parent – Object.prototype (i.e., null). If it still doesn’t find the requested property then it throws an error saying undefined is not an object