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

答えはおそらく機能しますが、プロトタイプを使用しないのはなぜですか? align 関数は、インスタンスごとに異なるロジックを実行しますか?

ベルギが指摘したように。JavaScript はプロトタイプを使用して継承します。インスタンス間で変更されないメンバーをプロトタイプに定義することをお勧めします。

簡単に説明します。プロトタイプは、インスタンスに対して変更されないメンバー/プロパティを宣言するために使用できます。Person という名前のオブジェクトを宣言し、person に name と greeting の 2 つのメンバーがあるとします。挨拶は「こんにちは、私は[this.name]です」と出力するので、挨拶はインスタンス間で変わりません。

Person プロトタイプで greeting メソッドを宣言し、何千もの Person インスタンス (ベン、ジャック、メアリーなど) を作成すると、それらはすべて 1 つの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 から継承したくないが、それを混在させたくない場合でも、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');
于 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 に答える
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 に答える