JavaScriptデザインパターン学習「クラス継承」_javascriptスキル

何かをする前に、まずそれを行うメリットを理解する必要があります。理由もなく何かをしようとする人はいないと思います。一般に、クラスを設計するとき、実際には、反復的なコードを減らすことが望まれます。継承メカニズムを使用すると、既存のクラスに基づいて再設計でき、それを利用することで設計の完全な変更が容易になります。彼らがすでに持っているメソッドの。早速、いくつかの例を示します:

コードをコピー コードは次のとおりです:

関数 人(名前){
This.name = 名前;
}
Person.prototype.getname = function(){
this.name を返します;
}

関数 Bloger(名前,ブログ){
person.call(this,name);
This.blog = ブログ;
}
var blogger = new Bloger("zhenn","http://www.jb51.net");
alert(bloger.name=="zhenn"); /*true を返す*/
alert(bloger.blog) /*アラート http://www.jb51.net*/
alert(bloger.getname()=="zhenn"); /*プロンプト「bloger.getname は関数ではありません」*/

上記の例からわかるように、Blogger は内部で呼び出しを通じて親クラス person のネイティブ プロパティとメソッドを動的に呼び出します (呼び出しの説明については、http://www.jb51.net/article/ を参照してください)。 62086.htm )、これは、Bloger が Person を継承し、そのサブクラスになると理解できますが、注意深い学生であれば、呼び出しに依存するだけでは Person プロトタイプ オブジェクトのメソッドを継承できないことがわかるでしょう。つまり、「bloger.getname は継承されない」ということです。関数」が理由です。ただし、心配しないでください。上記のコードを少し処理するだけでこの問題を解決できます。

コードをコピーします コードは次のとおりです:

関数 人(名前){
This.name = 名前;
}
Person.prototype.getname = function(){
this.name を返します;
}

関数 Bloger(名前,ブログ){
person.call(this,name);
This.blog = ブログ;
}
/*次の 2 行のコードに注意してください*/
Bloger.prototype = 新しい人 ()
Bloger.prototype.constructor = Bloger;

var blogger = new Bloger("zhenn","http://www.jb51.net");
alert(bloger.name=="zhenn"); /*true を返す*/
alert(bloger.blog) /*アラート http://www.jb51.net*/
alert(bloger.getname()=="zhenn"); /*プロンプト true*/

ここで、これら 2 行のコードについて説明する必要があります。各コンストラクターには、コンストラクターのプロトタイプ オブジェクトを指すプロトタイプ属性があることがわかります。ただし、プロトタイプ オブジェクトは、プロトタイプ内にあります。オブジェクト 定義されたプロパティとメソッドはすべてのインスタンス オブジェクトで共有できます。2 行のコードを追加する目的は、サブクラスのプロトタイプ オブジェクトが親クラスのインスタンス化されたオブジェクトを指すように設定することと、インスタンス化されたオブジェクトを設定することであると結論付けることができます。親クラスのオブジェクト 親クラスのすべてのプロトタイプ属性メソッドが継承されるため、サブクラスのプロトタイプは親クラスのインスタンス オブジェクトのすべてのプロパティとメソッドを継承します。

ただし、コード行 Bloger.prototype.constructor = Bloger; にも注意する必要があります。これは、サブクラスのプロトタイプを親クラスのインスタンスに設定すると、そのコンストラクター属性が親クラスを指すためです。サブクラス プロトタイプのコンストラクターを再度設定する必要があります。この時点で、JavaScript クラスの継承は完全に実装されています。

サブクラスの宣言を簡略化するために、サブクラスを拡張するプロセス全体を extend という関数で記述することができます。この関数は、指定されたクラス構造に基づいて新しいクラスを作成します。

コードをコピー コードは次のとおりです:

function extend(childClass,parentClass){
var F = 新しい関数();
F.prototype =parentClass.prototype;
childClass.prototype = new F();
childClass.prototype.constructor = childClass;
}

この extend 関数を使用すると、この関数を呼び出すだけで簡単にサブクラスを拡張でき、extend(Bloger,person) に変更することができ、完全な継承も実現できます。