oop - How to call parent class' method from a subclass in JavaScript so that parent's local variables would be a

admin管理员组

文章数量:1384106

I'm using one of the approaches to class inheritance in JavaScript (as used in the code I'm modifying), but do not understand how to attach additional functionality for a method in a subclass to the functionality the respective parent class method already has; in other words, I want to override a parent's method in the child class with a method that besides its own sub-class-specific stuff does also the same the parent's method is doing. So, I'm trying to call the parent's method from the child's method, but is it even possible?

The code is here: /. Please, open the development console to see the output.

Code 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's MethodA sees parent's local variable:", parentVar);};
    this.MethodB = function () {console.log("Parent's MethodB doesn't see parent's local variable:", parentVar);};
}

function Child (inVar)
{
    Child.prototype.baseClass.apply(this, arguments);

    this.MethodB = function ()
    {
        console.log("Child's method start");
        Child.prototype.MethodB.apply(this, arguments); // 1st way
        this.parent.MethodB.apply(this, arguments); // 2 2nd way
        console.log("Child's method end");
    };
}

MakeAsSubclass(Parent, Child);

var child = new Child(7);
child.MethodA();
child.MethodB();

I'm using one of the approaches to class inheritance in JavaScript (as used in the code I'm modifying), but do not understand how to attach additional functionality for a method in a subclass to the functionality the respective parent class method already has; in other words, I want to override a parent's method in the child class with a method that besides its own sub-class-specific stuff does also the same the parent's method is doing. So, I'm trying to call the parent's method from the child's method, but is it even possible?

The code is here: http://jsfiddle/7zMnW/. Please, open the development console to see the output.

Code 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's MethodA sees parent's local variable:", parentVar);};
    this.MethodB = function () {console.log("Parent's MethodB doesn't see parent's local variable:", parentVar);};
}

function Child (inVar)
{
    Child.prototype.baseClass.apply(this, arguments);

    this.MethodB = function ()
    {
        console.log("Child's method start");
        Child.prototype.MethodB.apply(this, arguments); // 1st way
        this.parent.MethodB.apply(this, arguments); // 2 2nd way
        console.log("Child's method end");
    };
}

MakeAsSubclass(Parent, Child);

var child = new Child(7);
child.MethodA();
child.MethodB();

• javascript
• oop
• inheritance
• superclass

Share Improve this question Follow asked Aug 19, 2013 at 18:49 Jānis ElmerisJānis Elmeris 2,05511 gold badge2626 silver badges4747 bronze badges 1

• no you can't see the parents local variables. You inherit the parents prototype chain, not their local state. – Ben McCormick Commented Aug 19, 2013 at 19:06

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

No you can't see the parents local variables. You inherit the parents prototype chain, not their local state. In your case you're applying the parent function onto the child object which does not hold the state.

apply(this,...)

means that you're binding the function to the current value of this. when you call method b from the child object, its then bound to the child, and therefore is not operating within the closure that contains the parents value.

I would advice agains using private instance value properties like this because it messes up the prototype. Functions that need to access the private instance variable (each instance has it's own private value) can't be put on the prototype so you can't realy use it.

Here is how your code could work (but I would not 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's 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 "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'

More info on constructor functions here

The 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 that best way here would be to modify the Parent class in such way that the parentVar wouldn't be private, but public:

function Parent(inVar) {

    this.parentVar = inVar;

}

本文标签：