My understanding is that “hasOwnProperty” returns true if the object has a given member without check the prototype chain. But when I inherit fro other object, I see all members in the last object itself.<\/p>\n
Consider the following example:<\/p>\n
var Object1 = function (param) {\n this.prop1 = \"p1 \" + param;\n this.prop2 = \"p2 \" + param;\n};\n\nvar Object2 = function (param) {\n Object1.apply(this, arguments);\n this.prop3 = 'p3' + param;\n};\n\nObject2.prototype = new Object1();\n\nvar b = new Object2('this is Object 2');\n\nfor (var v in b)\n print(v + \": \" + b[v] + (b.hasOwnProperty(v)?' (own)':' (inherited)'));\n<\/code><\/pre>\nThis code prints:<\/p>\n
--prop1: p1 this is Object 2 (own)\n--prop2: p2 this is Object 2 (own)\n--prop3: p3this is Object 2 (own)\n<\/code><\/pre>\nIf I take a look on the debugger I see:<\/p>\n
b\n Object2\n prop1: \"p1 this is Object 2\"\n prop2: \"p2 this is Object 2\"\n prop3: \"p3this is Object 2\"\n __proto__: Object1\n<\/code><\/pre>\nBut, id I remove the apply<\/code> line, all makes more sense, but base object it is not initialized:<\/p>\n--prop3: p3this is Object 2 (own)\n--prop1: p1 undefined (inherited)\n--prop2: p2 undefined (inherited)\n<\/code><\/pre>\nNow I see in the debugger:<\/p>\n
b\n Object2\n prop3: \"p3this is Object 2\"\n __proto__: Object1\n prop1: \"p1 undefined\"\n prop2: \"p2 undefined\"\n __proto__: Object\n<\/code><\/pre>\nAs far as I know, apply<\/code> it’s like … execute the super class constructor, so super members are initialized correctly, but apparently that changes the shape of the child object.<\/p>\nWhy is this happening? What is the correct way -or at least the less messy- to inherit in JS?<\/p>\n
I am taking a look to some information about it, and apparently each developer has different feelings about how to do it.<\/p>\n
Regards.<\/p>\n
\n- \n
apply<\/code> is not at all like executing the super class constructor. As a construct, it executes any<\/em> function in the scope of the first provided argument<\/strong>. When you pass this<\/code> to your Object1<\/code> function (which you execute as a function, not as a constructor), you are passing through the scope in which your second function (Object2<\/code>) is being executed.<\/p>\nTo see what’s happening, try executing Object1(\"param\")<\/code> without<\/strong> new<\/code>:<\/p>\nObject1(\"test\");\n<\/code><\/pre>\nWhen we execute new Object1(\"test\")<\/code> we get back an object that looks like this:<\/p>\nObject { prop1=\"p1 test\", prop2=\"p2 test\"}\n<\/code><\/pre>\nBut when we execute Object1(\"test\")<\/code> we get back undefined<\/code> … and on the object equal to this<\/code> (most likely window<\/code> in the case of browser JavaScript) we find two new variables … prop1<\/code> and prop2<\/code>.<\/p>\nThe key here is that:<\/p>\n
Object1(\"param\") !== new Object1(\"param\");\n<\/code><\/pre>\nThe first version (Object1(\"param\")<\/code>) executes a function (Object1<\/code>) in some already existing<\/em> scope (in browser JavaScript the most common scope is the top-level scope where this === window<\/code>.) This is the way you are invoking Object1<\/code> when you call Object1.apply(this)<\/code>.<\/p>\nThe second version (new Object1(\"param\")<\/code>) executes a function as a constructor<\/strong> – that is, it creates a new<\/strong> object and sets this<\/code> to be that new object. If we were to use the same apply<\/code> function to demonstrate this we would write Object1.apply({})<\/code>;<\/p>\nFor one of the most definitive answers I have ever seen on the subject of how to do OOP-like programming right<\/em> in a JavaScript environment, see Bobince’s answer to this question.<\/p>\n<\/li>\n<\/ol>\nOriginally posted 2013-11-09 23:09:22. <\/small><\/p>","protected":false},"excerpt":{"rendered":"
My understanding is that “hasOwnProperty” returns true if the object has a given member without check the prototype chain. But when I inherit fro other object, I see all members in the last object itself. Consider the following example: var Object1 = function (param) { this.prop1 = “p1 ” + param; this.prop2 = “p2 ” […]<\/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-975","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/975","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=975"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/975\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=975"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=975"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=975"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}