2

JavaScriptプロジェクトの場合、コードの重複を減らすためにオブジェクトの継承を導入したいと思います。しかし、私はそれを私が望むように完全に機能させることができず、いくつかの助けが必要です。

モジュールパターンを使用します。スーパー要素があると仮定します：

a.namespace('a.elements.Element');
a.elements.Element = (function() {
    // public API -- constructor
    Element = function(properties) {
        this.id = properties.id;
    };

    // public API -- prototype
    Element.prototype = {
        getID: function() {
            return this.id;
        }
    };

    return Element;
}());

そして、このスーパー要素から継承する要素：

a.namespace('a.elements.SubElement');
a.elements.SubElement = (function() {
    // public API -- constructor
    SubElement = function(properties) {
        // inheritance happens here
        // ???
        this.color = properties.color;
        this.bogus = this.id + 1;
    };

    // public API -- prototype
    SubElement.prototype = {
        getColor: function() {
            return this.color;
        }
    };

    return SubElement;
}());

継承自体を実装する方法がよくわからないことに気付くでしょう。コンストラクターでは、パラメーターをスーパーオブジェクトコンストラクターに渡し、継承されたものを作成するために使用されるスーパー要素を作成できる必要があります。新しいオブジェクトのコンストラクター内でスーパーオブジェクトのプロパティにアクセスするための（快適な）可能性が必要です。理想的には、スーパーオブジェクトを新しいオブジェクトの一部であるかのように操作できます。

また、新しいSubElementを作成して呼び出すことができるようにしたいと思いますgetID()。

私が達成したいのは、従来のクラスベースの継承のようです。ただし、JavaScriptの方法であるため、プロトタイプの継承を使用して実行したいと思います。それも実行可能ですか？

前もって感謝します！

編集：コメントで提案されているように、プライベート変数の使用法を修正しました。EDIT2：コードの別の変更：idのコンストラクターからアクセスできることが重要ですSubElement。

4

2 に答える 2

1

必要に応じて、JavaScriptの典型的な継承を使用してクラスのような継承を行うことができます。完全な例と議論については、この他の回答を参照してください。これは、パターンに簡単に適合させることができます。

于 2012-06-25T14:41:25.733 に答える
1

このコードを試してください（inheritメソッドはここから取得されます）：

function inherit(proto) {
  function F() {};     
  F.prototype = proto;
  return new F();
}

a.namespace('a.elements.SubElement');
a.elements.SubElement = (function() {
    // private properties
    var color;

    // public API -- constructor
    SubElement = function(properties) {
        color = properties.color;
    };

    //inherit from parent
    SubElement.prototype = inherit(a.elements.Element);

    //add new methods to the prototype

    SubElement.prototype.getColor = function() {
            return color;
    }

    SubElement.prototype.doSomethinkWithID = function() {
            var id = this.getID();
    }

    return SubElement;
}());
于 2012-06-25T15:04:08.913 に答える