4

Java のバックグラウンドを持っていたので、Javascript に切り替えたとき、(怠惰に) oop に関して知っていること、つまり古典的な継承に固執しようとしました。私は（私が作成した）Webアプリに取り組んでおり、この種の継承を使用しています。ただし、コードを変更し、OOP 部分を書き直して、プロトタイプの継承を行うことを検討しています (2 つの理由: より優れているとよく読んでおり、次に、それをよりよく理解するために別の方法を試す必要があります)。 ）。

私のアプリはデータの視覚化を作成し (D3js を使用しますが、それはトピックではありません)、次のようにコードを整理しました。

function SVGBuilder( dataset ) {
  this.data = dataset;
  this.xCoord;
  this.startDisplaying = function() {
    // stuff
    this.displayElement();
  }
}

メソッドは、displayElement()SVGBuilder (多かれ少なかれ抽象クラス) から継承する「クラス」で定義されます。私はそれから持っています：

function SpiralBuilder( dataset ) {
  SVGBuilder.call( this, dataset );
  this.displayElement = function() {
    // stuff
  };
}
SpiralBuilder.inheritsFrom( SVGBuilder );

同じ構造に基づく他の「ビルダー」がいくつかあります。

ビルダーを呼び出すスクリプトは次のようになります (ユーザー入力に基づいて正しいコンストラクターを選択するため、少し複雑になります)。

var builder = new SpiralBuilder( data );
builder.startDisplaying();

今度は「変換部分」です。Douglas Crockford の記事から Eloquent Javascript の一部まで、これについてかなり多くのことを読みました。Aadit M Shahのコメントで、彼は次のような構造を提案しています。

var svgBuilder = {
  data: [],
  xCoord: 0,  // ?
  create: function( dataset ) {
    var svgBuilder= Object.create(this);
    svgBuilder.data = dataset;
    return svgBuilder;
  },
  startDisplaying: function() {
    // stuff
  }
}

しかし、この時点で、私は立ち往生しています。まず (技術的な質問)、変数 (データ、xCoord) をこのパターンで初期化せずに宣言できますか? のようにthis.data;？次に、継承を作成するにはどうすればよいでしょうか。プロトタイプに対応する関数を手動で配置するだけですか？何かのようなもの：

var spiralBuilder = builder.create( dataset );
spiralBuilder.prototype.displayElements = function() {
  // Code to display the elements of a spiral
};
spiralBuilder.displayElements();

私が正しければ、これは、ビルダーを呼び出すスクリプトで、正しいコンストラクター (もう存在しません) を選択する代わりに、単一のビルダー インスタンスのプロトタイプでメソッドを追加/変更する必要があることを意味します。それは物事がどのように行われるべきかですか？

それとも、まったく別の方法でコードを設計する必要がありますか? もしそうなら、これに関するアドバイス/参考文献を教えていただけますか？

4

1 に答える 1