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

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

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

<script type="text/javascript">
function myInfo (){ var name ="老鱼",age =27;
var myInfo = "私の名前は" 名前 "私は" 年齢 "歳";
function showInfo(){
alert(myInfo) ;
}
return showInfo;
var oldFish = myInfo()


見覚えがあるように見えますか？そうです、これは実際には単純なクロージャ アプリケーションです。簡単な説明: 上記の関数 myInfo で定義された変数は、その埋め込み関数 showInfo でアクセスできます (これは理解しやすいです)。しかし、この埋め込み関数の戻り参照を変数 oldFish に代入すると、この時点で関数はshowInfo は myInfo 関数の本体の外で呼び出されますが、関数本体で定義された変数にもアクセスできます。そうそう!
クロージャの原則を要約しましょう。関数は呼び出されるスコープではなく、定義されたスコープで実行されます。実際、インライン関数を返すことは、クロージャを作成する最も一般的な方法でもあります。
上記の説明が抽象的すぎると思われる場合は、上記の関数を再構成して、より階層的かどうかを確認してみましょう:

コードをコピー

コードは次のとおりです: <script type="text/javascript"> var ioldFish = function(name,age){

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

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


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

コードをコピー

コードは次のとおりです: <script type="text/javascript "> 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) ;
</script>


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

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

<script type="text/javascript">
var Name = function(name){
this.name = name; };
名前.prototype.getName = function(){
alert(this.name)
};
var Fish = function(name,age){
Name.call( this,name );
this.age = 年齢;
Fish.prototype.constructor = Fish; = function( ){
alert(this.age);
var ioldFish = new Fish("老鱼",27);
ioldFish.getName(); /script>


上記のサブクラス Fish では getName メソッドが定義されていませんが、サブクラス Fish のインスタンス オブジェクト ioldFish は引き続きこのメソッドを呼び出します。これは、サブクラス Fish が で定義された getName メソッドを継承しているためです。スーパークラス名。説明すると、ここでのサブクラス Fish のプロトタイプはスーパークラスのインスタンスを指しており、サブクラス Fish 内では getName メソッドが宣言されていませんが、プロトタイプチェーンの原則に従って、プロトタイプが指す上位オブジェクトが検索されます。そのようなメソッドがあるかどうかを確認します。メソッドが見つからない場合は、元のプロトタイプ オブジェクトが検索されます。これは実際には継承の原則です。ここでは特別な説明があり、Fish.prototype.constructor = Fish; です。デフォルトのサブクラスのプロトタイプはそれ自体を指す必要がありますが、プロトタイプは以前にスーパークラスのインスタンス オブジェクトを指していたため、ここで設定し直す必要があります。 。もちろん、拡張を偽装する関数を使用して、関連するコードをここで整理できます。次のコードを参照してください。

コードをコピー

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

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




コードをコピー

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

<script type="text/javascript "> function clone(object){ var F = function(){}; F.prototype = object; return new F(); };

var Name = {

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


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




コードをコピー

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

<script type="text/javascript">
関数 agument(receveClass,giveClass){
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("私はオールドフィッシュが好きです");
},
sayLove:function(){
alert("i love oldfish");
}
}
var Fish = function(){};
var ioldFish = new Fish();
agument(Fish,Name,"sayLove");
ioldFish.sayLike();


ポリモーフィズム: 個人的には比較的抽象的で言葉で説明するのが難しいと思うので、オーバーロードと上書きの 2 つの側面から簡単に説明します。

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

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

<script type ="text/javascript">

var Name = function(name) {
this.name = name;
this.getName = function () {
alert(this. name);
}
};
var ioldFish = new Name("老鱼"),
btn = document.getElementById('btn'); getName;
//btn.onclick = function(){ioldFish.getName.call(ioldFish)};
</script>


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

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

var method = this,

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


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