JavaScriptの継承を詳しく解説 その1_JavaScriptスキル

オブジェクト指向とオブジェクトベース
ほぼすべての開発者は、オブジェクト指向言語 (C、C#、Java など) での開発経験があります。 従来のオブジェクト指向言語には、クラスとインスタンスという 2 つの非常に重要な概念があります。 クラスはモノのクラスのパブリックな動作とメソッドを定義し、インスタンスはクラスの特定の実装です。 また、オブジェクト指向プログラミングには、カプセル化、継承、ポリモーフィズムという 3 つの重要な概念があることもわかっています。

しかし、JavaScript の世界では、これらすべての機能は存在していないようです。 JavaScript 自体はオブジェクト指向言語ではなく、オブジェクトベースの言語であるためです。 たとえば、次の例のように、JavaScript には文字列、配列、日付、数値、さらには関数も含めてすべてがオブジェクトです。 >コードをコピー

コードは次のとおりです:// 関数を定義します - add function add(a, b) { add. invokeTimes;

return a b;

}
// 関数自体もオブジェクトであるため、この関数が呼び出された回数を記録する関数 add の属性を定義します
add.invokeTimes = 0;
add(1 1);
console.log(add.invokeTimes); // 2



JavaScript での継承

オブジェクト指向言語では、クラスを使用してカスタム オブジェクトを作成します。しかし、JavaScript ではすべてがオブジェクトなので、カスタム オブジェクトを作成するにはどうすればよいでしょうか?
これには、プロトタイプという別の概念の導入が必要です。新しく作成されたカスタム オブジェクトはすべて、このテンプレート (プロトタイプ) のコピーです (実際にはコピーではなく、リンクですが、このリンクは表示されません)。コピーのように感じます）。

プロトタイプを使用してカスタム オブジェクトを作成する例を見てみましょう:


コードをコピーします

コードは次のとおりです。 : // コンストラクター function person(name, sex) { this.name = name this.sex = sex; / 人のプロトタイプを定義します。プロトタイプ内のプロパティはカスタム オブジェクトによって参照できます。

person.prototype = {

getName: function() {
return this.name
},
getSex; : function() {
return this.sex;
}
}


ここでは、関数 person をコンストラクターと呼びます。これは、カスタム オブジェクトを作成する関数です。 JavaScript がコンストラクターとプロトタイプを通じてクラスの機能をシミュレートしていることがわかります。
カスタム オブジェクト (インスタンス化されたクラス) を作成するコード:




コードをコピー

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

var zhang = 新しい人("張さん", "男"); console.log(zhang.getName()) // "張さん" var chun = 新しい人("春華" ", "女性"); console.log(chun.getName()); // "春華"

コードの場合 var zhang = new Person("ZhangSan", "man ") が実行されると、次のことが実際に内部で行われます:

空のオブジェクト (new Object()) を作成します。
Person.prototype の属性 (キーと値のペア) をこの空のオブジェクトにコピーします (前述したように、内部実装はコピーではなく隠しリンクです)。
this キーワードを使用してこのオブジェクトをコンストラクターに渡し、コンストラクターを実行します。
このオブジェクトを変数 zhang に代入します。
プロトタイプ テンプレートがインスタンス化されたオブジェクトにコピーされるのではなく、リンクの方法であることを証明するには、次のコードを参照してください:

コードをコピー


コードは次のとおりです。

function person(name, sex) { this.name = name; this.sex = sex; 🎜>} person.prototype.age = 20; var zhang = new Person("ZhangSan", "man"); // 20 //

zhang.age = 19;

console.log(zhang.age) のプロトタイプを上書きします // 19
delete
// インスタンス属性を削除した後age、この属性 値はプロトタイプから取得されます
console.log(zhang.age); // 20


JavaScript 内に実装されたこの種の非表示のプロトタイプ リンクは、JavaScript が依存する暖かい土壌です。これはシミュレーション実装の継承の基礎でもあります。
JavaScript で単純な継承を実装するにはどうすればよいですか?
次の例では、従業員クラス Employee を作成します。これは、プロトタイプのすべてのプロパティを Person から継承します。




コードをコピー

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

関数 従業員(名前, 性別, 従業員ID) {
this.name = 名前;
this.sex = 性別;
this.employeeID = 従業員ID; // Employee プロトタイプを Person のインスタンスにポイントします
// Person インスタンスは Person プロトタイプ内のメソッドを呼び出すことができるため、Employee インスタンスは Person プロトタイプ内のすべてのプロパティを呼び出すこともできます。
Employee.prototype = new Person();
Employee.prototype.getEmployeeID = function() {
return this.employeeID
}; , "man", "1234");
console.log(zhang.getName()); // "ZhangSan


上記の継承の実装は非常に大雑把で、多くの問題があります。
Employee コンストラクターとプロトタイプ (以降、クラスと呼びます) を作成する際に、person がインスタンス化されますが、これは不適切です。

Employee のコンストラクターは、親クラス person のコンストラクターを呼び出すことができず、エラーが発生します。 Employee コンストラクターでの名前と性別属性の割り当て。
Employee の関数は Person の同じ名前の関数を上書きします。オーバーロード メカニズムはありません (これは前のものと同様、型の問題です)。 JavaScript クラスを作成します。構文が断片的すぎて、C#/Java の構文ほど洗練されていません。
コンストラクター属性にポインティング エラーがあります。これについては 2 番目の記事で説明します。
改善します。この例は第 3 章で説明します。 🎜>

JavaScript 継承の実装


JavaScript 自体にはクラスと継承の完全な実装がなく、手動による実装には多くの問題があることがわかっているため、インターネット上にはこの困難なタスクの実装がすでに多数あります。

Douglas Crockford -

JavaScript におけるプロトタイプの継承

• Douglas Crockford - JavaScript における古典的な継承
• John Resig - 単純な JavaScript の継承
• Dean Edwards - JavaScript 継承の基本クラス
• プロトタイプ
• ムーツール
• Extjs
• このシリーズの記事では、これらの実装を 1 つずつ詳しく分析し、最終的には JavaScript でクラスと継承がどのように実装されるかを深く理解します。 次の章では、this、コンストラクター、プロトタイプなど、クラス実装に関連する知識を紹介します。