JavaScript:使用子类中的父方法

JavaScript: Use parent methods from child class?

本文关键字：方法 子类 JavaScript      更新时间：2023-09-26

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

我知道下面的代码不一定像其他 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/

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

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

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

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

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

以下链接可能会帮助您了解 JavaScript 中this所指的内容。 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 继承，而是混合它，那么你仍然可以使用 prototype 来混合它的函数(并调用 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');
相关文章：