“Colorful lines of code on a MacBook screen” by on Caspar Rubin Unsplash Disclaimer: this is a slightly opinionated post. Feel free to disagree in comments :) Overtime, this has become a standard question in interviews for a frontend/full stack role: What is the difference between classical & prototypal inheritance in JS? or it’s alter ego: How do you do classical inheritance and how do you do prototypal inheritance in JS? To answer the first, there is no difference. Conversely, & inheritance is the same thing. Or rather, we implement classical inheritance using prototype chaining or inheritance. classical prototypal Second and the most important, inheritance inherently means copying of properties & behaviour. Here, by virtue of prototype chaining, it is merely delegation. Will explain further below. is where properties and behaviour are inherited from some map / blueprint. Classical Inheritance Think of it like constructor functions mapping to another via prototype chaining. Mind the following code block: At this point, when we create a new object from it will get the properties attached to of like this: Bar this Foo const bar_object = new Bar();console.log(bar_object.name); // prints 'Hello'console.log(bar_object.age); // prints '31' However, when we attach a new behaviour to Foo’s prototype, this is not available to . As in, bar_object Foo.prototype.sayName = function() {console.log('My name is '+this.name);} Now if we do this: bar_object.sayName(); // it throws an error But ideally this should be available because we are attempting to perform inheritance and anything on the parent should be available to child. In this spirit, this is what we need to do make it work: Mind Line 10. We are reassigning the property on function to another object. prototype Bar According to MDN, this is what does. Object.create Essentially, it is creating a new object with it’s prototype set to the passed in argument, . Foo.prototype What this means is, going forward, all objects created out of using it as a constructor function will have access to the behaviour / methods we add to . Bar Foo.prototype If we think of the & as classes with properties, they are basically blueprints of how objects created out of them should look like, similar to how we have classes and their instances in Java / Python. Foo Bar Here, JS is made to behave like Java by coercing a prototype relationship. What we did above is using prototype chaining, and this is also called as people think it is ok to add a qualifier like or to an age old term and think it is ok. Classical Inheritance Prototypal Inheritance Classical Prototypal Inheritance When we do this we are essentially invoking the method defined on and not our original constructor function copied/inherited method. bar_object.sayName() Foo.prototype Bar's However, the magic is not over yet. You see, the prototype also has a property that maps to the constructor function. It’s use case can be in objects created out of a function to know the constructor that created it. constructor However, we directly updated the property of the and as such, it’s constructor property will point to . prototype Bar Foo While we wouldn’t normally rely on the constructor property, it is still dirty code. So to clean up our act, we have to also modify the constructor property in . This is the complete code where inheritance happens from to . Bar.prototype Foo Bar There is however another school of thought where in it is said that is basically an inheritance involving or objects like this: prototypal inheritance prototypes const foo = {name: 'John'}; const bar = {age: 21}; const foobar = {...foo,...bar,hotel: 'tango'}; This has been mentioned and explained beautifully here: _“Master the JavaScript Interview” is a series of posts designed to prepare candidates for common questions they are…_medium.com Master the JavaScript Interview: What’s the Difference Between Class & Prototypal Inheritance? To sum it up, next time some one asks you the classical / prototypal inheritance family of questions, tell them this: You implement using . One cannot exist without the other. classical inheritance prototypal inheritance / chaining / delegation Read up: _You-Dont-Know-JS - A book series on JavaScript. @YDKJS on twitter._github.com getify/You-Dont-Know-JS Thanks for reading. Hit *clap* if you think this was worth your while :) Find me on or revert back to me on comments. linkedin I write about tech, mostly JavaScript: , , and . React Redux react app performance stories frontend engineering
