{"id":1074,"date":"2022-08-30T15:11:57","date_gmt":"2022-08-30T15:11:57","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2013\/11\/09\/in-javascript-where-do-prototypes-functions-hide-when-we-instantiate-the-derived-object-collection-of-common-programming-errors\/"},"modified":"2022-08-30T15:11:57","modified_gmt":"2022-08-30T15:11:57","slug":"in-javascript-where-do-prototypes-functions-hide-when-we-instantiate-the-derived-object-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2022\/08\/30\/in-javascript-where-do-prototypes-functions-hide-when-we-instantiate-the-derived-object-collection-of-common-programming-errors\/","title":{"rendered":"In JavaScript, where do prototype's functions hide when we instantiate the derived object?-Collection of common programming errors"},"content":{"rendered":"

I am currently trying to figure out exactly how the prototypical inheritance works in JavaScript. Here is the mystery I currently trying to solve.<\/p>\n

Suppose we set up the following structure:<\/p>\n

var base = { greet : \"hello\" }\n\nvar child = function () {}\n\nchild.prototype = base;\nchild.prototype.protoSomething = function () {}\n\nvar instance = new child();\n<\/code><\/pre>\n
Nothing fancy. Now lets see what instance<\/code> has for properties (own or otherwise):<\/p>\n
for(prop in instance) {\n    console.log(prop); \/\/ prints 'greet', 'protoSomething'\n}\n<\/code><\/pre>\n
Alright, so it has greet<\/code> and protoSomething<\/code>, are they instance<\/code>‘s own members?<\/p>\n
for(prop in instance) {\n    if(instance.hasOwnProperty(prop))\n        console.log(prop); \/\/ nothing is printed\n}\n<\/code><\/pre>\n
Nope, own property list is empty. Are they in instance<\/code>‘s prototype?<\/p>\n
if(instance.prototype === undefined) {\n    console.log(\"'instance' has no prototype\"); \/\/ gets printed\n}\n<\/code><\/pre>\n
Well, bummer, instance<\/code> doesn’t have a prototype assigned. So, if the properties are not own<\/em> and there is no prototype, where are they coming from? I feel like some sort of a diagram would be very nice at this point.<\/p>\n
    \n
  1. \n
    Only a function has the property prototype<\/code>.<\/p>\n
    instance.constructor.prototype === base \/\/ return true\n<\/code><\/pre>\n
    To get a prototype of an object, you should use the Object.getPrototypeOf method.<\/p>\n
    Object.getPrototypeOf(instance) === base \/\/ return true\n<\/code><\/pre>\n<\/li>\n
  2. \n
    This page should help you out:<\/p>\n
    http:\/\/joost.zeekat.nl\/constructors-considered-mildly-confusing.html<\/p>\n
    In short, the ‘behind the scenes’ prototype of an instance (created via new<\/code>) is not accessible in any way, hence why it returns undefined<\/code>. Only the constructor (on which you’ve manually set a .prototype<\/code> property) will return anything when you try to retrieve it.<\/p>\n<\/li>\n<\/ol>\n
    Originally posted 2013-11-09 23:21:29. <\/small><\/p>","protected":false},"excerpt":{"rendered":"
    I am currently trying to figure out exactly how the prototypical inheritance works in JavaScript. Here is the mystery I currently trying to solve. Suppose we set up the following structure: var base = { greet : “hello” } var child = function () {} child.prototype = base; child.prototype.protoSomething = function () {} var instance […]<\/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-1074","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1074","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=1074"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1074\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=1074"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=1074"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=1074"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}