JavaScript Inheritance
Inheritance in JavaScript is an interesting and important topic. But it can sometimes be a bit tricky to grasp because JavaScript is quite a bit different from class-based languages like C++ and Java. In what follows, we’ll look at how to do inheritance in JavaScript and some things to watch out for. Before you dive into this you should have a decent understanding of the basics of JavaScript and JavaScript objects. W3 Schools has a really good quick introductory overview of JavaScript (complete with examples and exercises that you can try yourself) that can be found here.
There are many different ways to create objects in JavaScript because, well, pretty much everything is an object. However, for our purposes here when we’re discussing objects we mean the generic “Object” in JavaScript, the dynamic type that we can throw any data that we want into in a collection of key-value pairs. And taking it a step further, when we say generic “Object” what we’re really talking mostly are functions and object literals. These will be the center of our focus when discussing inheritance in JavaScript.
An empty generic “Object” object can be created in JavaScript by doing the following…
var animal = new Object();
But objects are often initialized with data. This can be done using the Object literal approach as shown below…
var Animal = { color: "brown", size: "medium" age: 1, sound: function() { console.log('Grunt'); } move: function() { console.log('Running'); } }
We can accomplish the same thing that we did above by creating a function and then assigning properties to the function…
function Animal() { this.color = "brown", this.size = "medium" this.age = 1, this.sound = function() { console.log('Grunt'); } this.move = function() { console.log('Running'); } }
NOTE: The function and the object literal are actually not *exactly* the same. There *are* some differences between function Animal() { } and var Animal = function() { }; mainly having to do with how and when JavaScript executes these functions at runtime. You can, for example, call function Animal() elsewhere in your code before you declare the function, but you cannot call var Animal = function() { } before you declare it. You will get an error. It’s treated as the same situation as trying to use a variable before defining it. This is due to something called “hoisting” which I recommend doing a search for if you are interested in the technical side of it.
The benefit of using a function is that we can create a new instance of different Animals if we want.
var dog = new Animal(); var cat = new Animal(); console.log(dog.size); console.log(cat.size);
There’s a problem with this though. All the animals that we create all have the same size, color, age, etc. We’re going to want our animals to all contain different types of data. To do that, we can slightly modify our function such that we pass arguments into the constructor.
function Animal(color, size, age, sound, move) { this.color = color, this.size = size this.age = age, this.sound = function() { console.log(sound); } this.move = function() { console.log(move); } }