Laoyu が JavaScript オブジェクト指向プログラミング_js オブジェクト指向について簡単に説明します-jsチュートリアル-php.cn

Laoyu が JavaScript オブジェクト指向プログラミング_js オブジェクト指向について簡単に説明します

WBOY

リリース： 2016-05-16 18:33:21

オリジナル

942 人が閲覧しました

この感嘆符は、深刻な雰囲気を緩和し、今日お話しするトピックである「JavaScript オブジェクト指向プログラミング」につながります。次に、オブジェクト指向のいくつかの主要なキーワードであるカプセル化、継承、ポリモーフィズムに焦点を当てます。
カプセル化: JavaScript でオブジェクトを作成するモードでは、クロージャが実際のカプセル化であると個人的に考えています。そのため、最初にクロージャについて簡単に紹介します。次の例を見てください:

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

 
 🎜>
 
上記の例のコーディング スタイルは ext yui で比較的一般的であり、パブリックとプライベートの区別は一目瞭然です。クロージャを使用すると、外部から直接アクセスしたくないものを簡単に隠すことができます。関数内で定義された変数にアクセスしたい場合、外部からの直接アクセスはアクセスできません。見つからなくて、書くのが大変だったので、しばらくしてからやっと戻ってきました。カプセル化とは、他人に見られたくないものを隠すためのものではありませんか？はは... 
上記の例を JQ 形式に変換すると、次の例のように書く必要があります。この種のカプセル化モードはオープン ドア モードに属し、そこで定義された変数は外部 (内部) からアクセスできます。次の例では、最初にオブジェクトをインスタンス化し、次に関数の外でオブジェクトの名前または年齢属性にアクセスする場合、もちろん、このモードでは、どの変数がプライベートであるかをチーム開発メンバーが理解できるように、いくつかの「隠しルール」を設定できます。 , 通常、プライベート変数やメソッドの前に人為的にアンダースコア「_」を追加して、警告信号をマークします。こうして「カプセル化」が実現しました！ 

コードをコピー

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

getName メソッドは上記のサブクラス Fish では定義されていませんが、サブクラス Fish のインスタンスオブジェクト ioldFish は依然としてこのメソッドを呼び出します。これは、サブクラス Fish がスーパークラス Name で定義された getName メソッドを継承しているためです。説明すると、ここでのサブクラス Fish のプロトタイプは、スーパークラスのインスタンスを指します。サブクラス Fish 内では getName メソッドが宣言されていませんが、プロトタイプチェーンの原理に従って、プロトタイプが指す上位レベルのオブジェクトが宣言されます。そのようなメソッドがあるかどうかを検索します。メソッドが見つからない場合は、元のプロトタイプオブジェクトが検索されます。これは実際には継承の原則です。ここでは特別な説明があり、Fish.prototype.constructor = Fish; です。デフォルトのサブクラスのプロトタイプはそれ自体を指す必要がありますが、プロトタイプは以前にスーパークラスのインスタンスオブジェクトを指していたため、ここで設定し直す必要があります。。もちろん、関連するコードは拡張機能を使用して整理できます。ここでは詳しく説明しません。次のブログ投稿に注目してください。
B. メモリパフォーマンスの点では、プロトタイプ継承の方が優れています。 .継承します。

コードをコピー

コードは次のとおりです。 >
明らかに、プロトタイプ継承の中核は clone 関数であり、これはプロトタイプチェーンの原理でもありますが、この場合、サブクラスはスーパークラスのすべての属性とメソッドを継承するという点が異なります。特に、このタイプの継承では、コンストラクターを作成する必要はありません。オブジェクトの単語変数を作成し、対応するプロパティとメソッドを定義し、サブクラスで参照するだけで済みます。
C. ドープされたクラス: いくつかの一般的で汎用性の高いメソッドを関数にカプセル化し、次の関数を通じてこれらのメソッドを使用するクラスに割り当てます。さまざまなクラスに必要なメソッドを選択的に渡すこともできます。

コードをコピー

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

🎜>
ポリモーフィズム: 個人的には、これは比較的抽象的で言葉で説明するのが難しいと思うので、オーバーロードと上書きの 2 つの側面から簡単に説明します。
オーバーロード: 上記の例では、agument 関数は最初に 2 つのパラメーターを受け取りますが、その後の呼び出しでは、agument(Fish,Name,"sayLove") は任意の数のパラメーターを受け取ることもできます。これは、JavaScript のオーバーロードによって実装されます。関数内のユーザーは、arguments 属性を操作して操作します。
オーバーライド: これは非常に単純です。サブクラスで定義されたメソッドがスーパークラスから継承されたメソッドと同じ名前を持つ場合、このメソッドは上書きされます (これはスーパークラスのメソッドをオーバーライドするわけではないことに注意してください)。もう面倒なことはありません！
最後に、this と実行コンテキストに注目してみましょう。前のカプセル化の例では、this は、this が配置されているクラスのインスタンス化オブジェクト自体を表しますが、たとえば、HTML 属性を通じて定義されるものとは異なります。イベント処理コード。次のコードを参照してください:

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

 
Up この例では、ボタンをクリックした後、インスタンス オブジェクトのプロパティがポップアップ ボックスに表示されません。これは、現在のコンテキストが変更されたためです。 HTMLタグですが、このタグには getName 属性がないので、当然この属性の属性値は出力できません。この例から、実行コンテキストは実行中に決定され、いつでも変更できることが簡単にわかります。 
もちろん、上でコメントアウトしたコードを削除し、getName メソッドを取得する呼び出しを通じてこの実行コンテキストを変更することもできます。 apply メソッドでも実行コンテキストを変更する機能を実現できますが、より美しい実装メソッドのバインドがプロトタイプ フレームワークで見つかりました。このメソッドの実装を見てみましょう。私たちの先祖の偉大さに感心するしかありません... 

コードをコピーしますコードは次のとおりです。 Function.prototype.bind = function(obj) {

var method = this,

temp = function() { 
return method.apply (obj, argument); 
} ; 
} 

 
これを明確に理解できれば、簡単なスクリプト フレームワークを作成できると思います。近い将来、マスターにアップグレードできると思います。理解していなくても、心配する必要はありません。オブジェクト指向は本質的に少し抽象的です。もっと練習すれば大丈夫です。
 とりあえずこの記事を書きましょう。次の記事では、JavaScript のデザイン パターンについて説明します。ご期待ください。