JavaScript：使用子类的父方法？

Question

我正在尝试在子类中使用父类中的方法。在其他语言中，您只需要使用extends，并且所有来自父级的方法都可以在子级中使用，但在 JavaScript 中，它似乎有所不同。

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

我明白下面的代码不一定像其他 OOP 语言那样“扩展”。但它确实需要另一个函数/类作为属性——你可以直接调用它的方法。此外，我没有在这个演示中使用 JavaScript 原型设计。

<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>

小提琴：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

答案可能有效，但为什么不使用原型？ align 函数会在每个实例上执行不同的逻辑吗？

正如贝尔吉指出的那样； JavaScript 使用原型来继承，最好在原型上定义成员在实例之间不会改变：

简单解释；原型可用于声明不会为实例更改的成员/属性。如果我声明一个名为 Person 的对象，并且 person 有 2 个成员：name 和 greet。 Greet 将输出“你好，我是 [this.name]”，因此 Greet 在实例之间不会改变。

当我在 Person 原型上声明 greet 方法，然后创建数千个 Person 实例（ben、jack、mary ....）时，它们将只共享一个 greet 函数。这为对象初始化节省了内存和 CPU 时间。查看此链接了解更多信息：https://stackoverflow.com/a/16063711/1641941

以下链接可能会帮助您了解 this 在 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');

如果您不想从 Svg 继承而是混合它，那么您仍然可以使用原型来混合它的功能（并调用 Svg.apply 以获取所需的实例成员）：

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');