Difference between inheritance in class-based languages and JavaScript

New to JavaScript?

A lot of you from standard(?) class-based language programmers quite feel differently when you encountered inheritance in JavaScript.

  • Let’s say the class is a cook 👩‍🍳 that creates a bread(instance) 🍞

Inheritance from Class-based language

In a common class-based language, a class Child can be only inherited from another parent or a superclass Parent. And the instance (Bob) from class Child has every method that is defined from class Child. So simply class Child can define the instance, Bob.

However, JavaScript has more flexibility. It’s even more like weird flexibility.

Inheritance from JavaScript

In JavaScript, Instances can inherit to other instances by prototype linking.
If a child instance needed another method from another instance, it can even get it from the other instance.

You may want to see the code now. 👀

let breadObj = {parent: 'parent'};
let croissantObj = {child: 'child'};
croissantObj.__proto__ = breadObj // linking parent instance/object to child instance/objectconsole.log(croissantObj.child); //child
console.log(croissantObj.parent); //parent
croissantObj.parent = ‘child’ // change the parent value in child objconsole.log(croissantObj.parent) // child

In JavaScript “__proto__” is not a standard. (but most of all browsers supports this)

What should we do instead, then?

You can use “Object create” instead.

let breadObj = {parent: 'parent'};// let croissantObj = {child: 'child'};
// croissantObj.__proto__ = breadObj // linking parent instance/object to child instance/object
let croissantObj = Object.create(breadObj); // create new object named croissantObj
croissantObj.child = 'child'; // assign child property
console.log(croissantObj.child); //child
console.log(croissantObj.parent); //parent
croissantObj.parent = 'child' // change the parent value in child obj
console.log(croissantObj.parent) // child
Weird, huh?

w..wait, so in JavaScript, the instance can inherit its methods and state to other instances, and it can be done in runtime?

“Yes”

One thing to remember is that JavaScript has very similar also at the same time very different behavior to other standard class-based programming languages.

--

--

--

Software Engineer at Loblaw Digital

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Best stories of 2018 on Angular-In-Depth

Node.js Module system Part 4( note-taking app)

Video Tutorials On Remix Run — New ReactJS Based Full Stack Web Development Framework

Why I chose Vue.js over React

Top 8 Open Source JS Libraries For Data Visualization

Insider’s guide into interceptors and HttpClient mechanics in Angular

DevNotes: Immutability and Redux

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Justin Lee

Justin Lee

Software Engineer at Loblaw Digital

More from Medium

Javascript — Object creation

How to Store Objects and Arrays Using localStorage in JavaScript

DI — Dependency Injection

How to keep your Javascript projects safe -01