1

例えば：

object1 = function() {
  console.log('action1');
}

object2 = function() {
  console.log('action2');
}

object1(); //should log "action1"
object2(); //I need this to log "action1" and "action2"

また、object2 が object1 のメソッドをオーバーライドできるようにする必要があるため、上記はどこにもありません (メソッドが含まれていません)。

私が探していない、私が考えた解決策は次のとおりです。

object2 =     object2 = function() {
  object1(); //this won't allow me to override object1's methods. THIS IS IMPORTANT!!
  console.log('action2');
}

設計図 (プロトタイプ) のみを構築して利用する試みを次に示します。

object1 = function() {};
object1.prototype.action1 = function() {
  console.log('action1');
}

object2 = function() {};

object2.prototype = new object1();
object2.prototype.constructor = object2;

//object2.prototype.action1 = function() { //I can overwrite the inherited action here
//  console.log('actionCHANGED');
//}
object2.prototype.action2 = function() {
  console.log('action2');
}

var foo = new object2(); //new object1(); will do object1's actions instead, as desired.

for (var method in foo) { //run all of foo's methods
foo[method]();
}

しかし、これも実際には機能しません。通常、関数は順不同で実行されます (明らかな理由により)。

拡張を使用して他のいくつかのアプローチを試しましたが、探しているものがまったく得られません。現時点では例が思い浮かびませんが、他の方法の 1 つは object2 を正確に実行させましたが、object1 にはプロトタイプ関数しかなかったため、「new object1()」では何も起こりませんでした。関数を object1 の実際の関数に移動すると、object2 がそれを継承するときにそのアクションが実行されますが、これもこの場合は適切ではありません。

私のアプローチ全体を変更する必要があるかもしれません。私はアイデアを受け入れます。これの実際の目的は、整理されていない手続き型の YouTube プラグインを書き直すことです。簡単に呼び出して、動作を変更できるようにしたいと思います。

$('selector').youtubePlayer({type:'basic'}) //like object1
$('selector').youtubePlayer({type:'withThumbs'}) //like object2
$('selector').youtubePlayer({type:'allFeatures'}) //even more complex object

しかし、jQuery はここでは重要な詳細ではありません...jQuery がなくても同じように機能する必要があります。お気に入り：

youtubePlayer(selector, type);

また

new youtubePlayer(selector, type);

というわけで...ここまでです。私の無知を助けてください（そして言い訳してください）。私はこれを学ぶために一生懸命努力してきました。ありがとう！

編集：これはまさに私がこれでやっていることです。

実際の例: object1 (または関数 1) には 2 つのメソッド (関数) があります。object1 の最初の機能は、div をセレクターにアタッチすることです。object1 の 2 番目の機能は、YouTube API をロードすることです。YouTube プレーヤーは、API の読み込み時に上記の div に読み込まれます。

object2 には 2 つのメソッドがあります。object2 の最初の機能は、可能であればキャッシュから YouTube プレイリスト フィードを取得することです。そうでない場合は、YouTube からフィードを取得してキャッシュに保存します。object2 の 2 番目の機能は、フィードからサムネイルを表示することです。

object3 には同じ方法でさらに多くの機能があり、object3 の前に実行される object2 の機能に完全に依存しています。

オブジェクト 1 のアクションだけが必要な場合は、「object1();」とだけ記述します。または "new object1(); など、オブジェクトごとに。

4

4 に答える 4

0

しばらく経ちましたが、継承について多くのことを学び、いくつかのパターンに精通しています。誰かに役立つ場合に備えて共有したいと思いました。以下は私が探していたパターンです。これを説明する記事は次のとおりです。http://blog.javascriptroom.com/2013/01/21/the-initializer-pattern/

実際の動作を確認するには、ここをクリックしてください: http://jsbin.com/orijaz/2/edit

var foo = {
  run: function() {
    this.action1();
    this.action2();
  },
  action1: function() {
    console.log('action1 '+this.objName);
  },
  action2: function() {
    console.log('action2 '+this.objName);
  },
  objName: 'foo'
};

var bar = Object.create(foo);
bar.run = function() {
  this.first();
  foo.run.call(this);
  this.last();
};
bar.first = function() {
  console.log('first '+this.objName);
};
bar.last = function() {
  console.log('last '+this.objName);
};
bar.objName = 'bar';

foo.run();
bar.run();

古い答え:

var object1 = function() {};
//NEW METHODS
  object1.prototype.action1 = function () { console.log('action1'); };
  object1.prototype.action2 = function () { console.log('action2'); };

  object1.prototype.run = function() {
    this.action1();
    this.action2();
  };

var object2 = function() {};
  //INHERIT
  object2.prototype = new object1();
  //MODIFY METHODS
  object2.prototype.action2 = function() {
    console.log('action2 changed!!'); 
  };
  //NEW METHODS
  object2.prototype.action3 = function () { console.log('action3'); };

  object2.prototype.run = function() {
    object1.prototype.run.call(this);
    this.action3();
  };

object1.prototype.run(); //I do the basic 2 actions
object2.prototype.run(); //I do the basic 2 actions with any changes made, then my own new actions
于 2013-08-05T21:18:27.743 に答える
0

単純にプロトタイプの継承をそのまま使用できます。

クラス定義 A を作成します。

function A() {}
A.prototype.action = function() {
  console.log('A::action');
}

A から継承するクラス定義 B を作成します。

function B() {}
B.prototype = new A();
B.prototype.constructor = B;
B.prototype.action = function() {
  B.prototype.action.call(this);
  console.log('B::action');
}

次に、適切なインスタンスを作成します。

var a = new A();
var b = new B();

a.action(); // A::action
b.action(); // A::action, B::action

もちろん、代わりにhttps://github.com/linkedin/Fiberにある軽量の継承モデル ライブラリー Fiber.js を使用することもできます。これにより、継承のすべてのブートストラップが抽象化されます。

var A = Fiber.extend(function() {
  return {
    action: function() {
      console.log('A::action');
    }
  }
});

var B = A.extend(function(base) {
  return {
    action: function() {
      base.action.call(this);
      console.log('B::action');
    }
  }
});

var a = new A();
var b = new B();

a.action(); // A::action
b.action(); // A::action, B::action
于 2013-01-03T20:18:06.607 に答える
0

このコードInheritance Managerを使用しました。これは、現在のプロジェクトで非常にうまく機能します。

私は他のソリューションを試してみましたが、基本クラスのコードを呼び出してメソッドをオーバーライドする機能などを提供しているようには見えませんでした.

サイトのコードは単純である必要があります。さらに例が必要な場合はお知らせください。

プロジェクトのスタイルに合わせて名前を変更したバージョンを次に示します。

_inheritanceManager = {};
_inheritanceManager.extend = function(subClass, baseClass) 
{
    function inheritance() { }
    inheritance.prototype = baseClass.prototype;
    subClass.prototype = new inheritance();
    subClass.prototype.constructor = subClass;
    subClass.baseConstructor = baseClass;
    subClass.superClass = baseClass.prototype;
}
于 2013-01-03T16:03:35.220 に答える