JavaScriptの継承を詳しく解説その1_JavaScriptスキル-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 18:47:28

オリジナル

923 人が閲覧しました

オブジェクト指向とオブジェクトベース
ほぼすべての開発者は、オブジェクト指向言語 (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 自体にはクラスと継承の完全な実装がなく、手動による実装には多くの問題があることがわかっているため、インターネット上にはこの困難なタスクの実装がすでに多数あります。