I’m trying to get my head around JS inheritance using the “Pseudo-classical inheritance” style. I’ve done many Google searches and have read the classic articles. I’m familiar with Java’s class structure and am trying to understand JS’s prototypal style. I’m looking for vanilla JS since I want to understand the basics first.<\/p>\n
I have a simple parent\/child test class setup and need some help with the scoping rules.<\/p>\n
1.) When do I define methods in the class vs outside of the class?<\/p>\n
2.) How do I access private variables and private functions when I create methods using the prototype style?<\/p>\n
function superClass(name){\n this.name = name;\n var privateValue = \"I'm Private\";\n this.outputPrivate2 = function(){\n alert(privateValue); \/\/works fine\n } \n}\n\nsuperClass.prototype.outputPrivate = function(){\nalert(this.privateValue); \/\/outputs undefined.. \n alert(superClass.prototype.privateValue) \/\/also undefined \n}\n<\/code><\/pre>\n3.) How Can child objects call private functions or access private variables of the parent?<\/p>\n
4.) When should the child object manually call the parent constructor?<\/p>\n
subClass2.prototype = new superClass(); \/\/ Define sub-class\nsubClass2.prototype.constructor = subClass2;\n\nfunction subClass2(name) {\nthis.name = name;\nthis.Bye = function() {\nreturn \"Bye from subClass - \" + this.name;\n} \nthis.testm = function(){\nsuperClass.prototype.SomeParentMethod.call(this, \"arg1\", \"arg2\");\n}\n<\/code><\/pre>\n}<\/p>\n
var parent = new superClass(\"parent\");\nvar child = new subClass(\"child1\");\nparent.outputPrivate(); \/\/undefined\nparent.outputPrivate2(); \/\/I'm private\nchild.outputPrivate(); \/\/undefined\nchild.outputPrivate2(); \/\/I'm private\n<\/code><\/pre>\nI had three objects where 80% of the code was duplicated so I created a parent object and three child objects. The child objects have methods that use and manipulate private data from the parent. The only way I’ve gotten this to work is make all variables public which I don’t like. Again, my familiarity is with Java so I might be trying too hard to make JS work like Java.<\/p>\n
\n- \n
You’re addressing some interesting points of object oriented JavaScript here.<\/p>\n
1) When you define a method in the class, a new function will be created every time you call the constructor. This may lead to performance issues if you use a lot of objects. When you attach a method to the prototype object, the function is created only once.<\/p>\n
2) But the advantage of defining functions inside the constructor is that you can use “private” methods\/properties. In Javascript, there isn’t really something like a private variable. Instead, you are creating a closure which contains some variables.<\/p>\n
If you need to use these variables anyway outside the constructor, you need to make them public.<\/p>\n
3) Same problem.<\/p>\n
4) Although your question is not totally clear, I would do something like this:<\/p>\n
function parent(){\n this.a = 1;\n}\n\nfunction child(){\n parent.call(this);\n this.b = 2;\n}\n\nobj = new child();\n\/\/ now obj.a == 1, obj.b == 2\n<\/code><\/pre>\n<\/li>\n<\/ol>\nOriginally posted 2013-11-09 22:55:29. <\/small><\/p>","protected":false},"excerpt":{"rendered":"
I’m trying to get my head around JS inheritance using the “Pseudo-classical inheritance” style. I’ve done many Google searches and have read the classic articles. I’m familiar with Java’s class structure and am trying to understand JS’s prototypal style. I’m looking for vanilla JS since I want to understand the basics first. I have a […]<\/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-895","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/895","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=895"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/895\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=895"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=895"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=895"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}