JavaScript：使用子类中的父方法？

Question

I'm trying to use a method from a parent class inside the child class. In other languages, you would just have to use extends and all the methods from the parent can be used in the child, but in JavaScript, it seems to be different.

function Svg() {
    this.align = function(value) {
        if(value === 'left') return 0;
    }
}

function Graph() {
    // I want to align text to the left
    console.log('<text x="' + align('left') + '"></text>');
}

graph = new Graph();
Graph.prototype = new Svg();
Graph.prototype.align.call();

http://jsfiddle.net/cBMQg/9/

Answer 1

I do understand that the code below doesn't necessarily 'extend' like in other OOP languages. But it does take another function/class as a property - for which you can call it's methods directly. Furthermore, I haven't used JavaScript prototyping for this demo.

<script>
    function Svg() {
        this.align = function( align ) {
            if( align == 'left') 
                return 'left';
            else
                return 0;
        }
    }

    function Graph() {

        this.Svg = new Svg();
        // I want to align text to the left
        this.AlignLeft = function( direction ) {
            console.log('<text x="' + this.Svg.align( direction ) + '"></text>');
        }
    }

    graph = new Graph();
    graph.AlignLeft('left');  //console.log <text x="left"></text> 
</script>

Fiddle : http://jsfiddle.net/cBMQg/11/

Answer 2

function Svg() {
    this.align = function(value) {
        if(value === 'left') return 0;
    }
}

function Graph() {
     Svg.call(this); // Call the Super Class Constructor with changed THIS
    // I want to align text to the left
    console.log('<text x="' + align('left') + '"></text>');
}



graph = new Graph();
Graph.prototype = new Svg();
graph.align('left');

Answer 3

The answers probably work but why no prototype use? Is the align function going to perform different logic on every instance?

As Bergi pointed out; JavaScript uses prototype to inherit and it's better to define members on the prototype that don't change between instances:

Simply explained; prototype can be used to declare members/properties that won't change for an instance. If I declare an object named Person and person has 2 members: name and greet. Greet will output "Hello, I am [this.name]" so greet does not change between instances.

When I declare the greet method on Person prototype and then create thousands of Person instances (ben, jack, mary ....) they will all share only one greet function. This saves memory and cpu time for object intialisation. Check out this link for more info: https://stackoverflow.com/a/16063711/1641941

The following link might help you understand what this refers to in JavaScript. https://stackoverflow.com/a/19068438/1641941

function Svg() {
  this.someInstanceValue=22;
}
Svg.prototype.align = function(value) {
  if(value === 'left') return 0;
}
function Graph() {
    // get Svg's instance properties
    Svg.apply(this,arguments);
    console.log('<text x="' + this.align('left') + '"></text>');
}
//inherit from Svg:
Graph.prototype=Object.create(Svg.prototype);
Graph.prototype.constructor=Graph;

graph = new Graph();

graph.align('left');

If you don't want to inherit from Svg but mix it in then you can still use prototype to mix in it's functions (and call Svg.apply to get needed instance members):

function mixin(source, target){
  for(thing in source){
    if(source.hasOwnProperty(thing)){
      target[thing]=source[thing];
    }
  }
};
function Svg() {
  this.someInstanceValue=22;
}
Svg.prototype.align = function(value) {
  if(value === 'left') return 0;
}
function Graph() {
    // get Svg's instance properties
    Svg.apply(this,arguments);
    console.log('<text x="' + this.align('left') + '"></text>');
}
//mix in Svg:
mixin(Svg.prototype, Graph.prototype)

graph = new Graph();

graph.align('left');