How to call a parent class method from a subclass in JavaScript so that parent local variables are available?

Question

I use one of the approaches to class inheritance in JavaScript (as used in the code that I modify), but I don’t understand how to attach additional functions for a method in a subclass to the functionality of the corresponding parent class, the method already has; in other words, I want to redefine the parent method in the child class using a method that, in addition to its own subclass of its own class, also executes the same method of the parent method. So, I'm trying to call the parent method from the child method, but is this possible?

Code here: http://jsfiddle.net/7zMnW/ . Please open the development console to see the result.

The code is also here:

function MakeAsSubclass (parent, child) { child.prototype = new parent; // No constructor arguments possible at this point. child.prototype.baseClass = parent.prototype.constructor; child.prototype.constructor = child; child.prototype.parent = child.prototype; // For the 2nd way of calling MethodB. } function Parent (inVar) { var parentVar = inVar; this.MethodA = function () {console.log("Parent MethodA sees parent local variable:", parentVar);}; this.MethodB = function () {console.log("Parent MethodB doesn't see parent local variable:", parentVar);}; } function Child (inVar) { Child.prototype.baseClass.apply(this, arguments); this.MethodB = function () { console.log("Child method start"); Child.prototype.MethodB.apply(this, arguments); // 1st way this.parent.MethodB.apply(this, arguments); // 2 2nd way console.log("Child method end"); }; } MakeAsSubclass(Parent, Child); var child = new Child(7); child.MethodA(); child.MethodB(); 

Answer 1

No, you cannot see parent variables. You inherit the parent prototype chain, not their local state. In your case, you apply a parent function to a child object that does not hold state.

 apply(this,...) 

means that you are binding the function to the current value of this. when you call method b from a child, then bind to it and therefore do not work in a closure containing the value of parent.

Answer 2

I would advise using properties of the properties of a private instance like this again because it ruined the prototype. Functions that need access to a private instance variable (each instance has its own personal value) cannot be placed in the prototype, so you cannot use it.

Here is how your code could work (but I wouldn’t do it myself):

 var Parent = function(){ var private=22; this.showPrivate=function(){ console.log(private); } } var Child=function(){Parent.call(this)}; // the following is only usefull if you have functions // on the parent prototype that don't use privates Child.prototype=Object.create(Parent.prototype); // Child.prototype.constructor would now point to Parent // it not needed most of the time but you can fix that Child.prototype.constructor=Child; var c = new Child(); c.showPrivate(); 

Here is how you could use the private functions:

 var Parent = function(name){ //public instance variable this.name=name; } Parent.prototype=function(){ // privates on the prototype (shared among instances) var privateFunction=function(me){ console.log("private function called in:"+me.name); console.log("shared in "+me.name +" is now:"+shared+" setting it to 'changed'"); shared="Changed"; } // private shared value var shared="Parent" return{ constructor:Parent, publicFn:function(){ privateFunction(this); } }; }(); var Child=function(name){Parent.call(this,name)}; Child.prototype=Object.create(Parent.prototype); Child.prototype.constructor=Child; var c = new Child("child1"); var c2 = new Child("child2"); c.publicFn(); c2.publicFn();//shared is already changed by 'child1' 

Learn more about design features here.

Answer 3

Variable var parentVar = inVar; is a local and private variable, available only in the Parent() function and visible only to functions defined in the same scope ( Parent() ).

I think the best way here is to change the Parent class so that parentVar not private, but public:

 function Parent(inVar) { this.parentVar = inVar; }