JavaScript継承の仕組みを詳しく解説 例_JavaScriptスキル

この記事の例では、JavaScript の継承メカニズムについて説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

JavaScript 言語の継承メカニズムは一般に理解しにくいですが、「サブクラス」と「親クラス」という概念がなく、すべてが「クラス」と「インスタンス」に依存しています。継承を実装するための非常に独特な「プロトタイプ チェーン」モデル。

私はこの部分を勉強するのに多くの時間を費やし、たくさんのメモを取りました。しかし、それらはすべて強制された記憶であり、根本的に理解することはできません。

1. クラスの作成方法

次のような person というクラスがあるとします。

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

var person = function(name, age) {
This.name = 名前;
This.age = 年齢;
}
Person.prototype.getName = function() {
this.name を返します;
}

上記のように、「人」は地球上のすべての人々を表し、誰もが名前と年齢という 2 つの基本的な属性を持っています。次に、学生クラスを実装する必要があります。そして、学生もまた人であり、学生にも次のような属性があることがわかります。名前と年齢として;問題は、この関係をどのように確立するかです。
まず、純粋なオブジェクト指向言語 (Actionscrpt3 など) がどのように機能するかを見てみましょう

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

class Students extend Person {} //非常に単純な 1 行です。コード; より正確に言うと、単語です --extend

2. jsに切り替えて行う方法

js の継承メカニズムの実装を説明する前に、まず js のプロトタイプ チェーンを理解しましょう。

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

var person = new Person('Poized-flw', 21);
person.getName(); // "ポイズド flw"

上記の getName() メソッドについては、どのように実行されるのでしょうか?まず、Person 関数で getName() メソッドを探しますが、存在しないことがわかります。次に、Person.prototype に移動して検索し、存在することを確認します。それからそれを呼び出します。そうでなかったらどうしますか？メソッドが見つかるか、プロトタイプ チェーンの先頭に到達するまで、同じ方法でプロトタイプに沿って検索を続けます。

たとえば、犬オブジェクトのプロトタイプを表す DOG というコンストラクターが追加されました。

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

Function DOG(name){
this.name = 名前;
}

このコンストラクターで new を使用すると、犬オブジェクトのインスタンスが生成されます。

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

var DogA = new DOG('Big Hair');
alert(dogA.name); // ダ・マオ

コンストラクター内の this キーワードに注意してください。これは、新しく作成されたインスタンス オブジェクトを表します。

3. 新しいオペレーターのデメリット

コンストラクターを使用してインスタンス オブジェクトを生成することには、プロパティとメソッドを共有できないという欠点があります。
たとえば、DOG オブジェクトのコンストラクターで、インスタンス オブジェクトの共通属性種を設定します。

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

Function DOG(name){
this.name = 名前;
this.species = 'イヌ科';
}

次に、2 つのインスタンス オブジェクトを生成します:

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

var DogA = new DOG('Big Hair');
var DogB = new DOG('二毛');

これら 2 つのオブジェクトの種属性は独立しており、一方を変更しても他方には影響しません。

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

dogA.species = 'Feline';
alert(dogB.species); // 「犬」を表示します。dogA の影響を受けません

各インスタンス オブジェクトには、プロパティとメソッドの独自のコピーがあります。これではデータ共有が達成できないだけでなく、リソースの多大な浪費にもなります。

つまり: 継承の考え方: js の独自のプロトタイプ チェーンを通じて継承メカニズムを実装します。

4. プロトタイプチェーンに基づく継承

1. 直接継承の実装

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

var Students = function(name, age, sid) {
person.call(this, 名前, 年齢);
This.sid = sid;
}
Students.prototype = new Person() // 継承メカニズムを実装するために、Student のプロトタイプ チェーンに person を配置します
Students.prototype.constructor = 学生;
Students.prototype.getResults = function() {
// 生徒のスコアを取得します
}

Students.prototype.constructor = Students という行を見逃さないようにしてください。 、コンストラクターを定義するとき、そのデフォルトのプロトタイプは Object インスタンスであり、プロトタイプのコンストラクター プロパティは自動的に関数自体に設定されます。 ！ ！プロトタイプを別のオブジェクトに手動で設定する場合、新しいオブジェクトは当然ながら元のオブジェクトのコンストラクター値を持たないため、そのコンストラクター プロパティをリセットする必要があります。例:

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

var Test = function() {
This.time = "今";
}
console.log(Test.prototype); // オブジェクト {} 空のオブジェクト
console.log(Test.prototype.constructor); // function() {this.time = "now";} および関数自体
// Test
のプロトタイプ属性を手動で変更する場合 Test.prototype = {
SomeFunc: function() {
console.log('hello world!');
}
};
console.log(Test.prototype.constructor); // 関数 Object() { [ネイティブ コード] }
// その後、完全に間違った値を指定したことがわかります。そのため、プロトタイプ属性を手動で変更するときは、そのコンストラクター ポインタを変更する必要があります。 上記のテストの後、コンストラクターの値を変更する必要がある理由がわかります。

2. 継承された関数のカプセル化 extend

コードをコピーします コードは次のとおりです。function extend(subClass, superClass) {

var F = function() {};

F.prototype = superClass.prototype;
subClass.prototype = new F();
subClass.prototype.constructor = subClass;
}

実際、この関数の機能は上記の継承プロセスをカプセル化したものにすぎません。違いは次のとおりです。 superClass のプロトタイプ属性のみを継承し、superClass コンストラクターの属性は継承しません。

この利点は、新しいコンストラクターを作成するコストが削減されることです。
もちろん、後続の問題は、この関数だけではサブクラスがスーパークラスのすべての属性を継承できないことです
改善点:

コードをコピーします コードは次のとおりです: // Student コンストラクターにコード行を追加し続けます: person.call(this, 名前, 年齢);

5. まとめ

js のプロトタイプチェーン原理を使用すると、js の継承メカニズムを簡単に実装できます。それほど厳密ではありませんが、繰り返しコードをできるだけ 1 回出現させるという目標は達成されました。

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。