{"id":189,"date":"2016-04-27T16:30:33","date_gmt":"2016-04-27T16:30:33","guid":{"rendered":"http:\/\/muthu.co\/?p=189"},"modified":"2021-01-02T14:06:02","modified_gmt":"2021-01-02T14:06:02","slug":"inheritance-in-javascript","status":"publish","type":"post","link":"http:\/\/write.muthu.co\/inheritance-in-javascript\/","title":{"rendered":"Inheritance in Javascript"},"content":{"rendered":"

Inheritance is a concept which says\u00a0you can create a class from another class if you would like to use its properties.<\/p>\n

\"Javascript<\/a>
Javascript Inheritance<\/figcaption><\/figure>\n

A parent cantalk<\/em> and caneat<\/em>, so can the child because child “is a” subclass of Parent.<\/p>\n

While most programming languages have the concept of classes, in javascript its all about objects inheriting from other objects.\u00a0With\u00a0ECMAScript 6 you can also create classes using the class keyword. But in this post we will only talk about prototypical inheritance.<\/p>\n

Creating Inheritance using ___proto___<\/h3>\n

__proto__ is a special property in an object where when a property is accessed and the interpreter can\u2019t find it in the object, it follows the __proto__ link and searches it there.<\/p>\n

var parent = {\r\n caneat : true, \r\n cantalk : true\r\n}\r\n\r\nvar child = {\r\n}\r\n\r\nchild.__proto__ = parent; \/\/inheriting from parent\r\n\r\nconsole.log(child.caneat);\/\/prints true\r\n\r\nchild.hasOwnProperty(caneat); \/\/this throws error because caneat is a property of the parent\r\n\r\n<\/pre>\n
The code above shows\u00a0basic inheritance where all the properties available in parent is also a part of child. What we did was set the __proto__ variable of object child\u00a0<\/em>to parent to let the interpreter look into the parent if the looked up keys are not found in child.\u00a0But if I change the value of caneat<\/em> in the parent will the child be effected?<\/p>\n
parent.caneat = false;\r\nconsole.log(child.caneat); \/\/yes this returns false.<\/pre>\n
What if I add another property to our parent?<\/p>\n
parent.canwalk = true;\r\nconsole.log(child.canwalk); \/\/yes this returns true.<\/pre>\n
__proto__ is not the most preferred way of achieving inheritance because its not cross browser friendly and will work only in Chrome and Firefox. Another way of creating subclass is by using Object.create which does the exact same thing that __proto__ does but without the use of __proto__ keyword.<\/p>\n
Creating Inheritance using Object.create<\/h3>\n
var parent = {\r\n  caneat : true, \r\n  cantalk : true\r\n}\r\n\r\nvar child = {\r\n}\r\n\r\nchild = Object.create(parent); \/\/inheriting from parent\r\n\r\nconsole.log(child.caneat);<\/pre>\n
child\u00a0=\u00a0Object.create(parent);<\/code> is exactly the same as\u00a0child.__proto__\u00a0=\u00a0parent;<\/code><\/p>\n
There is a better way of creating subclasses which work across browsers. This method\u00a0uses\u00a0.prototype.<\/em><\/p>\n
\u00a0Creating Inheritance using\u00a0prototype<\/h3>\n
When using .prototype<\/em>, the dynamics of achieving inheritance changes a bit because you\u00a0need to create a class for it.<\/p>\n
var parent = {\r\n  caneat : true, \r\n  cantalk : true\r\n}\r\n\r\nvar Child = function(){\r\n  \/\/creating a class named Child\r\n}\r\n\r\nChild.prototype = parent; \/\/inheriting from parent\r\nvar child = new Child();\r\nconsole.log(child.caneat);\/\/returns true\r\n<\/pre>\n
The above example is the simplest form of prototype inheritance as the parent is an object and the child is a function with no parameters but this is not the ideal scenario because we would be creating Objects of Functions\u00a0and inheriting them most of the time.<\/p>\n
inheritance in non parameterized\u00a0contructors<\/h4>\n
\/\/ Define the Parent constructor\r\nvar Parent = function(){\r\n  this.caneat = true;\r\n  this.cantalk = true;\r\n}\r\n\r\n\/\/ Define the Child constructor\r\nvar Child = function(){\r\n   Parent.call(this);\/\/the most important part of code\r\n}\r\n\r\nChild.prototype = Object.create(Parent); \/\/inheriting from parent\r\nvar child = new Child();\r\nconsole.log(\"Can child also eat? \" + child.caneat);\/\/this returns true<\/pre>\n
Did you see the use of call method in our Child class. This is similar to using the super<\/em> keyword in Java without which you cannot inherit the Parent. call\u00a0<\/em>method ensures that the Parent object instance is created for the child to\u00a0inherit otherwise\u00a0there is nothing given to the child.<\/p>\n
\u00a0inheritance in parameterized contructors<\/h4>\n
var Parent = function(caneat,cantalk){\r\n    this.caneat = true;\r\n    this.cantalk = cantalk\r\n}\r\n\r\n\/\/ Defining a class constructor with NO parameters\r\nvar Child = function(){\r\n    Parent.call(this);\/\/I am not setting the parent variables\r\n}\r\n\r\nChild.prototype = Object.create(Parent); \/\/inheriting from parent\r\nvar child = new Child();\r\nconsole.log(\"Can child also eat? \" + child.caneat);\/\/this is undefined<\/pre>\n
The above code\u00a0returns the value of caneat<\/em> to be undefined<\/em> because the value has not been passed to the Parent from its constructor call. See another version of the same code below.<\/p>\n
var Parent = function(caneat,cantalk){\r\n    this.caneat = caneat;\r\n    this.cantalk = cantalk\r\n}\r\n\r\nvar Child = function(caneat,cantalk){\r\n    Parent.call(this,caneat,cantalk);\/\/passing all variables\r\n}\r\n\r\nChild.prototype = Object.create(Parent); \/\/inheriting from parent\r\nvar child = new Child(true,true);\r\nconsole.log(\"Can child also eat? \" + child.caneat);\/\/this is true \r\n<\/pre>\n
Now we are setting the values of our parent from\u00a0our child from its constructor and thus we are able to read the values of parent properties from the child object.<\/p>\n
Private and Public variables<\/h3>\n
Any time you talk about inheritance in any programming language, there are these two\u00a0access specifiers which never go\u00a0ignored. Some properties or methods must remain private to the parents and should not be allowed to be inherited by the child. You can achieve it by using the var<\/em> keyword to initialize your variable instead of this.\u00a0<\/em>See the code\u00a0below.<\/p>\n
var Parent = function(caneat,cantalk){\r\n    var caneat = caneat; \/\/this is a private variable\r\n    this.cantalk = cantalk; \/\/this is a public variable\r\n}\r\n\r\nvar Child = function(caneat,cantalk){\r\n    Parent.call(this,caneat,cantalk); \/\/calling the parent constructor\r\n}\r\n\r\nChild.prototype = Object.create(Parent); \/\/inheriting from parent\r\nvar child = new Child(true,true);\r\nconsole.log(child.caneat);\/\/this is undefined<\/pre>\n
The caneat variable in this case remains undefined because the parent has not exposed\u00a0that property for inheritance.<\/p>\n
Thats all about javascript inheritance! <\/p>\n","protected":false},"excerpt":{"rendered":"
Inheritance is a concept which says\u00a0you can create a class from another class if you would like to use its properties. A parent cantalk and caneat, so can the child because child “is a” subclass of Parent. While most programming languages have the concept of classes, in javascript its all about objects inheriting from other […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[52],"_links":{"self":[{"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/posts\/189"}],"collection":[{"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/comments?post=189"}],"version-history":[{"count":1,"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/posts\/189\/revisions"}],"predecessor-version":[{"id":1654,"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/posts\/189\/revisions\/1654"}],"wp:attachment":[{"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/media?parent=189"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/categories?post=189"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/tags?post=189"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}