最近、タオバオのインタビュー中に誰かの体験談をネットで読んだのですが、よくわからないことがたくさんあったので、いくつかの問題について理解を深めるためにいくつかの記事を書きました。
この記事で言及されている質問は、「JavaScript はどのように継承を実装するのですか?」です。
以下に、ネットで見つけた印象を深めるための方法と例をいくつか説明します。
JavaScript の関数は、関数定義に使用されるだけでなく、クラス定義にも使用できることがわかっています。
JavaScript の継承は少し奇妙です。C++ や一部のオブジェクト指向言語とは異なり、パブリックやプライベートなどのアクセス制御の変更がなく、継承を示すための実装やその他の特定のシンボルもありません。
JavaScript クラスの継承については、次の例を参照してください。
次のようにコードをコピーします。
<script type="text/javascript">
関数 人() {
//プロパティ
this.Gender = "女性";
これ。年齢 = 18;
this.Words = "沈黙";
// 方法
this.shouting = function() {
alert("Happy! 親クラスのメソッド");
}
}
//継承
functionProgrammer() {
this.base = 人;
}
Programmer.prototype = 新しい人;
//新しいメソッドをサブクラスに追加します
Programmer.prototype.typeCode = function() {
alert("私はプログラマーです! IT 出稼ぎ労働者ですが、非常に不幸です。サブクラス メソッド");
}
// 呼び出し例
関数sayHello() {
var a = 新しいプログラマ();
alert(a.Gender); // 親クラスのプロパティを呼び出します。
a.shouting(); // 親クラスのメソッドを呼び出す
a.typeCode(); // サブクラスのメソッドを呼び出します。
}
SayHello();
</script>
上記の例では、いくつかの属性とメソッドを含む person クラスが最初に宣言され、次に、base 属性を持つ Programmer クラスが宣言されます。この属性は必須ではありませんが、仕様のため、およびオブジェクトを検索するためです。将来 継承されたすべてのクラスを作成する必要があり、その後、person クラスがプログラマのプロトタイプ オブジェクト (プロトタイプ) にコピーされ、クラスの継承が実現されます。
JavaScript でのクラスと継承のいくつかの原則をシミュレートする
オブジェクト指向言語では、クラスを使用してカスタム オブジェクトを作成します。しかし、JavaScript ではすべてがオブジェクトなので、カスタム オブジェクトを作成するにはどうすればよいでしょうか?
これには、プロトタイプという別の概念を導入する必要があります。プロトタイプを単にテンプレートと見なすことができます。新しく作成されたカスタム オブジェクトはすべて、このテンプレート (プロトタイプ) のコピーです (実際にはコピーではなく、リンクです)。目に見えず、人々にコピーであるという印象を与えます）。
プロトタイプを介してカスタム オブジェクトを作成する例を見てみましょう。
次のようにコードをコピーします。
//コンストラクタ
関数 人(名前, 性別) {
this.name = 名前;
this.sex = セックス;
}
// Person のプロトタイプを定義します。プロトタイプ内のプロパティはカスタム オブジェクトから参照できます。
人物.プロトタイプ = {
getName: function() {
this.name を返します。
}、
getSex: function() {
これを返す.sex;
}
}
ここでは、関数 Person をコンストラクターと呼びます。これは、カスタム オブジェクトを作成する関数です。 JavaScript がコンストラクターとプロトタイプを通じてクラスの機能をシミュレートしていることがわかります。
以下は、カスタム オブジェクトの作成時に 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 に代入します。
すべての作業が完了しました。
プロトタイプ テンプレートがインスタンス化されたオブジェクトにコピーされるのではなく、リンクの方法であることを証明するには、次のコードを参照してください。
次のようにコードをコピーします。
関数 人(名前, 性別) {
this.name = 名前;
this.sex = セックス;
}
人物.プロトタイプ.年齢 = 20;
var zhang = 新しい人("張さん", "男");
console.log(zhang.age); // 20
// プロトタイプの age 属性をオーバーライドします
張年齢 = 19;
コンソール.log(zhang.age); // 19
zhang.ageを削除します。
// インスタンス属性 age を削除した後、この属性値はプロトタイプから再度取得されます
console.log(zhang.age); // 20
上記の例では、コピーによってのみ取得された場合、age 属性を削除した後、オブジェクトは存在しませんが、例の age 属性は引き続き出力されるか、以前の値が上書きされることを示します。サブクラス内の同じ名前の属性が削除されただけで、親クラスの age 属性は非表示のリンクを介してオブジェクト内にまだ存在します。
JavaScript で単純な継承を実装するにはどうすればよいですか?
次の例では、プロトタイプ プロトタイプのすべてのプロパティを Person から継承する従業員クラス Employee を作成します。
次のようにコードをコピーします。
function 従業員(名前、性別、従業員ID) {
this.name = 名前;
this.sex = セックス;
this.employeeID = 従業員ID;
}
// Employee のプロトタイプが person のインスタンスを指すようにします
// PERSON のインスタンスは PERSON プロトタイプ内のメソッドを呼び出すことができるため、Employee のインスタンスも PERSON プロトタイプ内のすべてのプロパティを呼び出すことができます。
Employee.prototype = 新しい Person();
Employee.prototype.getEmployeeID = function() {
this.employeeID を返します。
};
var zhang = 新しい従業員("ZhangSan", "man", "1234");
console.log(zhang.getName()); // "張さん
さて、上記は JavaScript で継承を実装するための具体的なプロセスとメソッドです。
もちろん、要約すると、JavaScript の継承メカニズムは、一部のオブジェクト指向言語と比較すると、荒削りでいくつかの欠陥がありますが、それでもフロントエンド開発者の効率を低下させるものではありません。 。 熱意。