JavaScript オブジェクト指向プログラミング_js オブジェクト指向に関する簡単な説明

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

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

コードをコピー

コードは次のとおりです: var ioldFish = function(name,age){

var name = 名前、年齢 = 年齢;

var myInfo = "私の名前は" 名前 "私は" 年齢 "歳";
return{
showInfo:function(){
alert(myInfo) ;
}
}
ioldFish("老鱼",27).showInfo();


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

コードをコピー

コードは次のとおりです: var ioldFish = function(name,age){ return ioldFish.func.init(name,age); };

ioldFish.func = ioldFish.prototype ={

init: function(name,age){
this.name = name;
this.age = 年齢;
},
showInfo:function(){
var info = "私の名前は " this.name " です "
alert(info)
}
ioldFish.func.init.プロトタイプ = ioldFish .func;
ioldFish("老鱼",27).showInfo();
//var oldFish("老鱼",27); .name) ;



どのモードが優れているのかと疑問に思う人もいるかもしれません。これはなんと言いますか？どちらの方法にもメリットとデメリットがあるので、併用してください。つまり、外部オブジェクトから直接アクセスできないものは、クロージャを使用してカプセル化するのが原則です。 「必ず」という4つの言葉は非常に奥深く、継続して練習することでしか本当の意味を知ることができません！
継承: これについて言及するとき、ついでにもう 1 つ付け加えておきます。クロージャのカプセル化の欠点はサブクラスの導出に役立たないため、クロージャには危険が伴い、カプセル化には注意が必要です。直観のために、次の例のオブジェクトの作成方法では「ドアを開ける」モードを採用しています。
JavaScriptにおける継承は、大きく「クラス継承」「プロトタイプ継承」「メタクラス」の3つの方法に分けられます。以下に、3 種類の継承方法の原理を簡単に紹介します。
A. クラスの継承: これは、主流のフレームワークで一般的に使用される継承メソッドです。次の例を参照してください。

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

コードをコピー

コードは次のとおりです: function extend(subClass,superClass){ var F = function(){}; F.prototype = superClass.prototype;プロトタイプ = new F(); subClass.prototype.constructor = subClass;

B. メモリのパフォーマンスの点では、プロトタイプの継承の方が優れています。




コードをコピー

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

};

var Name = {

name:"誰の名前",
showInfo:function(){
alert(this.name);
}
var Fish = clone( Name);
//Fish.name = "老鱼";



明らかに、プロトタイプ継承のコアです。はクローン関数であり、プロトタイプ チェーンと同じ原理ですが、違いは、スーパー クラスを直接複製するため、サブクラスがスーパー クラスのすべてのプロパティとメソッドを継承することです。特に、このタイプの継承では、コンストラクターを作成し、対応する属性とメソッドを定義するだけで、サブクラス内で属性とメソッドを参照することができます。
C.一般的に使用されるメソッドをより汎用性の高いものにする メソッドは関数内に均一にカプセル化され、次の関数を通じてこれらのメソッドを使用するクラスにディスパッチされます。さまざまなクラスに必要なメソッドを選択的に渡すこともできます。




コードをコピー

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

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

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

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

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

var method = this,

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


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