1

我正在尝试使用子类中父类的方法。在其他语言中，您只需要使用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/

4

3 回答 3

1 
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');
于 2013-10-07T07:20:44.783 回答
1

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

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

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

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

以下链接可能会帮助您了解thisJavaScript 中的含义。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');
于 2013-10-07T14:26:43.987 回答
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/

于 2013-10-06T20:38:03.567 回答