This code does the same as the Typescript version. Even though the code seems to be simple, there are a lot of things to understand. It is important that we get the mental concept behind it.

To visualize those concepts, we will use the same graphical representation Kyle Simpson (Kyle) used on his „You don’t know JS“ series.

By the way. If you haven’t read them yet, I highly recommend you to do so. They are great!

In his book about “this and object prototypes” Kyle represents functions with circles and object with squares. So let’s see how the JS code from above would be represented in such a graphical representation.

👀 Follow me on Twitter or medium to get notified about the newest blog posts and interesting frontend stuff!

When line one executes, it’s going to create a function Foo . Notice that it also creates an object which is the prototype of the Foo function.

function Foo(name) {

this.name = name;

}

The function Foo contains a .prototype linkage to an object. As the linkage indicates, the object acts as Foo’s prototype. But what about the .constructor property?

Don’t get confused by its name. It has nothing to do with construction. It’s just an internal linkage from the prototype back to the function.

2. Let’s go to line 5. In this line, we add the greet function to the prototype.

Foo.prototype.greet = function () {

console.log(`Hi I am ${this.name}`);

};

3. Line 9 then creates the Bar function:

function Bar(name, favouriteFood) {

this.favouriteFood = favouriteFood;

Foo.call(this, name);

}

4. Line 14 is where things become interesting.

Bar.prototype = Object.create(Foo.prototype);

Object.create is a method that’s around since ES5. It creates a brand new object and links it to the prototype we pass in as an argument. In other words, we create a brand new object that is linked to Foo’s prototype.

We then take this Object and assign it to Bar’s prototype. This results in the following picture.

Notice that the linkage between Bar.prototype and Foo.prototype is represented by [[Prototype]] . The [[Prototype]] is just an internal linkage from one object to another object.

Probably you already heard about “Protoype Chain”? The prototype chain is the reason why instances of bar can call the greet function. It allows objects to delegate a method call to a different object. The [[Prototype]] is part of this chain.

So basically if somebody calls greet on bar it will be checked if greet exists on Bar.prototype . If not — it follows the internal [[Prototype]] linkage until it finds a greet method or until the chain ends. If the chain ends it returns undefined.

While [[Prototype]] is an internal linkage there is also a public linkage called __proto__ . This linkage was invented by Mozilla but has never been standardized. Nevertheless everybody adopted it except IE. 🤪

5. Currently, bar is quite friendly, it is linked to Foo and therefore able to greet. But it is still very shy. Line 16 to 18 changes that. Bar will now tell you what his favorite food is, which indeed is very useful ;)

Bar.prototype.talk = function () {

console.log(`${this.name}: I love ${this.favouriteFood}!`);

};

6. Ok. Cool. We created this whole concept but the current code does nothing. So let’s create objects and call some methods on it.

var bar1 = new Bar('bar one');

var bar2 = new Bar('bar two');

The picture is now complete 👨‍🎨 (actually there is still more stuff going on, but that’s beyond the scope of this post)

Click here to tweet about this article 🐥

bar1 and bar2 also get linked to talk . Thanks to the linkages we now have the correct prototype chain and can call greet and talk on bar1 and bar2 .

We now clearly understand what the vanilla JS code does and what the mental concept behind the code is.

Cool, but what about the Typescript code?

Yes, the goal of this blog post is to take a deep dive to Typescript inheritance. We will do so in a second. The things we have done so far were just necessary steps to better understand the next section. So now that we are ready, let’s dive! 🐠