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

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

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

コードをコピー

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

var myInfo = "私の名前は" 名前 "私は" 年齢 "歳";

return{
showInfo:function(){
alert( myInfo);
}
}
ioldFish("老鱼",27).showInfo();
// ]] 🎜>

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

コードをコピー

コードは次のとおりです。}; ioldFish.func = ioldFish.プロトタイプ ={

init:function(name,age){

this.name = name;
this.age = age;
},
showInfo:function (){
var info = "私の名前は "this.name " 私は " this.age " 歳です"
}
ioldFish; .func.init.prototype = ioldFish.func;
ioldFish("老鱼",27).showInfo();
//var oldFish("老鱼",27); //alert (oldFish.name);
// ]]>


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

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

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

コードをコピー

コードは次のとおりです。return new F(); }; var Name = {

name:"誰の名前",

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




コードをコピー


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

if(arguments[2]){
var len = argument.length
for(i=2;ireceveClass.prototype[arguments[i]] = giveClass.prototype[arguments[i]];

} } else{ for(giveClass のメソッド) .prototype) { if(!receveClass.prototype[メソッド]){ receveClass.prototype[メソッド] = giveClass.prototype[メソッド] }

}

}
};
var Name = function(){};
Name.prototype ={
sayLike:function(){
alert("私は oldfish が好きです"); >sayLove: function(){
alert("i love oldfish");
}
}
var Fish = function(){};
var ioldFish = new Fish();
agument(Fish,Name,"sayLove");
ioldFish.sayLove();
// ]> 🎜>
ポリモーフィズム: 個人的には、これは比較的抽象的で言葉で説明するのが難しいと思うので、オーバーロードと上書きの 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 のデザイン パターンについて説明します。ご期待ください。