JavaScript のオブジェクト指向と継承について、初心者が学ぶのに役立つ JavaScript スキル

これは 1 年前に書かれた記事で、JavaScript でオブジェクト指向を学びたい学生にとって非常に役立ちます。間違っていたら修正してください。元のリンク Javascript のオブジェクトと継承

一部の Javascript ユーザーはプロトタイプやオブジェクト指向言語の性質について知る必要がないかもしれませんが、伝統的なオブジェクト指向言語から来た開発者は、次のような場合に JavaScript の継承を見つけるでしょう。彼らはそれを使っています。そのモデルはとても奇妙です。さまざまな JS フレームワークが、クラスのようなコードを記述するための独自のメソッドを提供しているため、JS オブジェクト指向の理解がさらに難しくなります。この結果は次のとおりです:
1. オブジェクト指向を実装する標準的な方法はありません。
2. オブジェクト指向 JS の基礎となる概念はあまり知られていません

プロトタイプ継承
プロトタイプ継承は非常に単純な概念であり、その本質は次のとおりです。 🎜 >1. オブジェクト a はオブジェクト b を継承します。つまり、b は a のプロトタイプです。
2. a は b のすべての属性を継承します。つまり、b の値を継承します。> John Smith と彼から継承する Jane があると仮定して、その効果を具体的なコードで見てみましょう。




コードをコピー

コードは次のとおりです: var john = {firstName: 'John' , lastName: 'Smith'}; var jane = {firstName: 'Jane'};

jane.__proto__ = john; ここで、john を jane のプロトタイプと呼びます。 jane は john のすべての属性を継承します

コードをコピー

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

jane。 lastName "Smith"//この属性は john から継承されます 次のように、jane 自身の属性の方が優先されます

コードをコピー

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

jane.firstName;//この属性は、john "Jane" の firstName 属性をオーバーライドします。 この後に john に属性を追加すると、以下に示すように、jane もその属性を動的に継承します

コードをコピー

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

john.hair = 'brown'; //新しい属性を john jane.hair "brown"; に追加します。 jane は、

の新しい追加プロパティを継承します。 さて、jane が結婚し、新しい姓 (姓)

を持っていると仮定しましょう。コードをコピーします

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

jane.lastName = 'Doe' この属性は、同じ属性をオーバーライドします。ジョンの名前 (姓)

コードをコピー

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

jane.lastName "Doe" ただし、jane の姓を削除した場合

コードをコピー

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

delete jane.lastName この属性の値は john の値に復元されます[code] jane.lastName "Smith "

これで、jane は他のオブジェクトから継承することもできます。このチェーンには任意の数の継承を含めることができます。これをプロトタイプ チェーンと呼びます。実際、john にはプロトタイプ属性




コピー コード

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

john.__proto__; Object { }
Firebug コンソールでは、john.__proto__ の値は Object{} に設定されていますが、Object{} はオブジェクト Object.prototype (すべてのオブジェクトの親クラス) を表します。

これはプロトタイプ継承の簡単な説明です。かなり良さそうですよね？
しかし、実際には __proto__ を使用することはできません。 。 。

悪いお知らせをいくつかさせてください...
IE は __proto__ 属性をサポートしていません。実際、__proto__ は ECMAScript 仕様の属性ではなく、Mozilla もこれを Firefox に追加する予定です。この属性はブラウザの将来のバージョンでは削除される予定です。

ただし、これは __proto__ 属性が存在しないという意味ではありません。一部のブラウザでは __proto__ 属性に直接アクセスできませんが、何らかの形式で存在しており、これに対処する必要がありますが、それほど直接的なものではありません。

クラスと継承
したがって、JavaScript にはクラスがないと言えます
覚えておいてください: JavaScript にはクラスはありません
この場合、何が起こりますかメソッドと継承で何が達成されたのでしょうか?
プロトタイプによる。従来のオブジェクト指向言語では、メソッドはクラスに依存しますが、JavaScript では、メソッドはオブジェクトのプロトタイプに依存し、プロトタイプはオブジェクトのコンストラクターにバインドされます。

JavaScript では、関数はコンストラクターの役割を果たします。 new 演算子を使用すると、関数をコンストラクターとして使用できます。以下のコードは、Cat 関数の作成を示しています。

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

function Cat(name){ // this.name = name // これは新しいオブジェクトを指します
}

上記のコードCat.prototype オブジェクト

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

Cat.prototype
Cat { }

new 演算子を使用して Cat のインスタンスを作成できます

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

var garfield = new Cat('Garfield') // インスタンスを作成します - Cat 関数はコンストラクターとして機能します

これで、Cat.prototype オブジェクトは new Cat() によって作成されたオブジェクトのプロトタイプになります。例:

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

garfield.__proto__ === Cat.prototype
true // `Cat.prototype` が garfield オブジェクトのプロトタイプになりました

ここで、Cat.prototype メソッドを追加します。追加後、メソッドには garfield からアクセスできます。

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

Cat.prototype.greet = function(){
console.log('にゃー、私は ' this.name)
}
garfield.greet()
「ニャー、私はガーフィールドです」

他の Cat インスタンスもアクセスできます

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

var felix = new Cat('Felix')
felix.greet()
「ニャー、私はFelix"

つまり、JavaScript では、メソッドはオブジェクトのプロトタイプ (プロトタイプ) に依存します。

実際、以下に示すように、Cat.prototype 内の同じ名前のメソッドをオーバーライドするメソッドを garfield に追加することもできます。

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

garfield.greet = function(){
console.log("What's new?"); 🎜>};
garfield.greet();
"新機能は何ですか?"

ただし、これは他のオブジェクトには影響しません

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

felix.greet();

「ニャー、私はフェリックスです」


したがって、JavaScript では、メソッドをオブジェクト、オブジェクトのプロトタイプ、またはオブジェクトの親オブジェクト (つまり、プロトタイプ チェーン内の任意のリンク) に直接関連付けることができます。このようにして継承が実装されます。

2 番目のプロトタイプ チェーンを作成するには、まず別のコンストラクターを作成する必要があります。これを Animal という名前にしてはどうでしょうか?

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

function Animal(){
}

次に、Cat.prototype のプロトタイプを Animal オブジェクトにポイントし、Cat インスタンスがすべての Animal メソッドを継承するようにする必要があります。したがって、次のように Cat.prototype の値を Animal のインスタンスに設定します。

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

Cat.prototype = new Animal();

さらに、実際には Cat のインスタンスであることを新しい Cat.prototype に伝える必要があります。 🎜>

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

Cat.prototype.constructor = Cat // Let `Cat.prototype` は、それが Cat のインスタンスであることを認識しています

これを行う目的は主にクラス間の階層関係のためですが、通常はこれを行う必要があります。

Animal.prototype と Cat.prototype から継承されたオブジェクトは Animal クラスに属しているため、Cat のすべてのインスタンスも間接的に Animal.prototype から継承します。 Animal.prototype に新しいメソッドを追加すると、Cat のすべてのインスタンスもこのメソッドにアクセスできるようになります。

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

Animal.prototype.breed = function() {
console.log('新しい動物を作成します!');
return new this.constructor();
var kitty = garfield.breed(); new Animal!


上記のコードにより、簡単に継承を実現できました。

結論

JavaScript におけるプロトタイプベースの継承は奇妙で慣れるまでに時間がかかりますが、その中心となる考え方は非常にシンプルです。これらの重要な概念を本当に理解していれば、これらの混合コードで自信を持って JavaScript OO を制御できるようになります。 (終わり)^_^