{"id":1007,"date":"2022-08-30T15:10:50","date_gmt":"2022-08-30T15:10:50","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2013\/11\/09\/javascript-inheritance-without-child-prototype-new-parent-collection-of-common-programming-errors\/"},"modified":"2022-08-30T15:10:50","modified_gmt":"2022-08-30T15:10:50","slug":"javascript-inheritance-without-child-prototype-new-parent-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2022\/08\/30\/javascript-inheritance-without-child-prototype-new-parent-collection-of-common-programming-errors\/","title":{"rendered":"Javascript inheritance without child.prototype = new parent();-Collection of common programming errors"},"content":{"rendered":"

I was playing around with javascript prototype chain inheritance and i came accross this funny behaviour.<\/p>\n

I have a parent class and a child class<\/p>\n

\/\/class parent\nfunction parent(param_1) {\n    this.param_1 = param_1;\n\n    this.getObjWithParam = function(val) {\n        console.log(this);\n        console.log(\"Constructor value in parent class \" + this.param_1);\n        console.log(\"tguha ----> parent,  val \" + val);\n    };\n};\n\n\/\/class child\nfunction child(param_1) {\n    parent.call(this, [ param_1 ]);\n};\n\nvar childObj = new child(100);\nchildObj.getObjWithParam(200);\n<\/code><\/pre>\n
and i get the output as<\/p>\n
**>child**\nConstructor value in parent class 100\ntguha ----> parent,  val 200\n<\/code><\/pre>\n
and nowhere i’m doing \/\/child.prototype = new parent(); and still the parent class is inherited.<\/p>\n
Could anyone help me by explaining this scenario please.<\/p>\n
    \n
  1. \n
    The word prototype does not appear in this code. So nothing is being inherited. You create a new child<\/code> and then explicitly run the parent<\/code> constructor function on that new child<\/code>. The parent<\/code> constructor function then add a method to to the new child<\/code>.<\/p>\n
    If you put getObjWithParam<\/code> on parent.prototype.getObjWithParam<\/code> instead then you will see that it will not carry over.<\/p>\n<\/li>\n
  2. \n
    You invoke parent constructor in child constructor. Because parent constructor sets this.getObjWithParam = function[...]<\/code> it’ll also set it for child. Notice that this has nothing to do with prototype. By invoking parent.call(a, [...])<\/code> you invoke parent function and set scope to a<\/code>. That means any modification made to this<\/code> is also made to a<\/code> (because it’s the same object).<\/p>\n<\/li>\n
  3. \n
    parent.call(this, [ param_1 ]) \n<\/code><\/pre>\n
    Assigns Parent.param_1 and Parent.getObjWithParam to childObj. This has nothing to do with inheritance. Consider this formulation:<\/p>\n
    var foo = {};\n\n\/\/class parent\nfunction parent(param_1) {\n    this.param_1 = param_1;\n\n    this.getObjWithParam = function(val) {\n        console.log(this.param_1);\n        console.log(val);\n    };\n};\n\n\/\/class child\nfunction child(param_1) {\n    parent.call(foo, [ param_1 ]);\n};\n\nvar childObj = new child( 'lets give foo a param_1');\n\nconsole.log( typeof childObj.getObjWithParam );\n\/\/ Undefined\n\nfoo.getObjWithParam();\n\/\/ [\"lets give foo a param_1\"]\n<\/code><\/pre>\n
    here you are passing foo as a scope to .call() thus the properties are assigned to foo.<\/p>\n<\/li>\n<\/ol>\n
    Originally posted 2013-11-09 23:12:37. <\/small><\/p>","protected":false},"excerpt":{"rendered":"
    I was playing around with javascript prototype chain inheritance and i came accross this funny behaviour. I have a parent class and a child class \/\/class parent function parent(param_1) { this.param_1 = param_1; this.getObjWithParam = function(val) { console.log(this); console.log(“Constructor value in parent class ” + this.param_1); console.log(“tguha —-> parent, val ” + val); }; }; […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1007","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1007","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=1007"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1007\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=1007"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=1007"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=1007"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}