オブジェクト指向プログラミングのアイデアを JavaScript に応用する パート _js オブジェクト指向

実際、オブジェクト指向の考え方はプログラミング言語から独立しています。たとえば、C# では、静的クラスの静的メソッド内で、一連の静的関数が手続き型開発に従って呼び出されます。逆に、jquery や extjs などの優れた JavaScript ライブラリがオブジェクト指向の設計思想を随所に体現しているようなものです。この記事では、JavaScript がオブジェクト指向プログラミング言語としてみなされるかどうかを議論するつもりはありません。この問題は、中国語形式の試験を重視する人が注目すべき問題です。オブジェクト指向プログラミングの考え方を簡単に説明します。 JavaScriptで。
オブジェクト指向にはまずオブジェクトが必要です。 JavaScript でオブジェクトを作成するのは非常に簡単です:

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

var o= {};

これによりオブジェクトが作成され、このオブジェクトにプロパティとメソッドを簡単に追加できます:

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

o.name="オブジェクト名";
o.showName=function(){
alert(o. name);
}

しかし、ほとんどの人は、オブジェクトを定義する {} のペアの中にオブジェクトのプロパティとメソッドを置くことにまだ慣れています:

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

var o = {
name: "オブジェクト名",
showName: function() {
alert(o.name);
}
}

プロパティとメソッドにアクセスするには 2 つの方法があります。1 つ目は次のとおりです。 >

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

alert(o.name); .showName();


この書き方は非常に一般的で、C# でオブジェクトのプロパティやメソッドを呼び出す場合も同じです。 JavaScript には、アクセスするためのインデックスとして属性またはメソッドの名前を使用する特別なものもあります:

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

alert(o["name"])

o["showName"]();


のようです。 Kong Yiji の「フェンネル」に少し似ています。 「フェンネル」という言葉を書く方法はいくつかあります。実際、オブジェクトのプロパティやメソッドを呼び出すためにインデックスを使用する人はほとんどいません。

カスタム プロパティとメソッドに加えて、オブジェクトにはコンストラクター プロパティと toString() およびその他のメソッドもあります。これらのプロパティとメソッドは Object 組み込みオブジェクトから取得され、すべてのオブジェクトがこれらのプロパティとメソッドを持ちます。 constructor 属性は、オブジェクトを構築したコンストラクターを指します。実際、オブジェクトの作成にはコンストラクターを使用しませんでした。実際には、js インタープリターは Object コンストラクターを使用します。コンストラクターを自分で定義すると、コンストラクターを通じてオブジェクトを作成できるため、作成されたオブジェクトは同じプロパティとメソッドを持つようになり、少しオブジェクト指向のように感じられます。さて、コンストラクターの作成方法を確認する簡単な例から始めましょう:

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

関数 人(名前、性別、年齢) {

this.name = 名前;
this.sex = 性別
this.age = 年齢; showInfo = function() {
alert("名前: " this.name " 性別: " this.sex " 年齢: " this.age);
}
}


us コンストラクターには 3 つの属性と 1 つのメソッドが定義されています。

Copy のようにオブジェクトを生成し、メソッドを呼び出すのは非常に簡単です。コード コードは次のとおりです。 var zhangsan = new Person("張三", "男性", 18);

zhangsan.showInfo( );

実行後、ダイアログ ボックスがポップアップ表示され、Zhang San という名前の人の情報が表示されます。

コンストラクター プロパティも確認できます。 zhangsan のコンストラクターが定義した Person であるかどうかを確認します。

コードをコピーします コードは次のとおりです。 🎜> alert(zhangsan.constructor)

;
結果は次の図に示すようになります。

ご覧のとおり、これは Person コンストラクターです。
ただし、ここにはまだ問題があります。オブジェクトを構築するたびに、メモリ領域がプロパティとメソッドに割り当てられます。実際、すべてのオブジェクトは同じメソッドを使用でき、複数のメソッドを使用する必要はありません。メソッドをコピーします。これはメモリ領域の無駄です。この問題を認識したので、それを解決する方法を考えてみましょう。メソッドにメモリ領域を割り当てたいのは 1 回だけであるため、メソッドのメモリ領域が割り当てられているかどうかを識別する値を設定できるという自然な考え方に従い、コンストラクタに次の変更を加えます。

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

関数 人(名前、性別、年齢) {
this.name = 名前;
this.age = 年齢;
if (typeof Person._initialized) {
this.showInfo = function() {
alert("名前: " this.name " 性別: " this.sex " 年齢: " this.age);
person._initialized = true;
}


ここでは、メンバー _initialized を使用して、メソッドにメモリ空間が割り当てられているかどうかを示します。最初のオブジェクトが構築されるとき、_initialized は定義されていないため、この時点でメソッドが定義され、メモリ空間が割り当てられ、メソッドのメモリ空間を示すために _initialized の値が true に設定されます。が割り当てられました。 2 番目のオブジェクトが構築されるとき、判定は入力されないため、メモリ空間が再度割り当てられることはありません。実行してみると、Zhang San の情報が正常に表示されていることがわかります。難しい作業ではありませんが、小さな問題が解決したので、回鍋肉を楽しみましょう。食事が始まる前に、Li Si という名前の女の子も、自分の個人情報をコンピューターにポップアップ表示したいと考えていました。 OK、非常に簡単です。オブジェクトを構築して showInfo メソッドを呼び出すだけです。

コードをコピーします コードは次のとおりです。 🎜> var lisi = new Person("李思", "女", 28); lisi.showInfo();

MM、この段落も張三の前に置きます。 MM の情報は正しく表示されますが、Zhang San の情報が表示されません。今回、張三はMMの後ろにランクされたことは問題ありませんでしたが、それでも名前が必要でした。これはプログラマとしては大変です。回鍋肉は食べられないようです。まずバグを修正しましょう。 firebug を開くと、MM 情報が表示されると、「zhangsan.showInfo は関数ではありません」というエラーが表示されます。ブレークポイントを設定して見てみると、zhangsi オブジェクトを構築した後、showInfo メソッドがないことがわかりました。 showInfo メソッドは 1 つだけですが、最初のオブジェクトに存在し、2 番目のオブジェクトからはアクセスできないことがわかります。では、同じコンストラクターによって生成されたオブジェクトに同じ機能を共有させるにはどうすればよいでしょうか? JavaScript のプロトタイプはこの機能を提供します。 JavaScript 仕様によれば、各コンストラクターには継承と属性共有のためのプロトタイプ属性があります。 showInfo メソッドは、関数への参照を指すプロパティとして見ることもできます。ここで、プロトタイプを使用してメソッドを共有可能にします。コードの変更は非常に簡単です。変更後のコードは次のとおりです。
コードをコピー

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

function person(name, sex, age) { this.name = name; >this .sex = 性別; this.age = 年齢; if (typeof Person._initialized == "未定義") { person.prototype.showInfo = function() { alert( "名前: " this.name " 性別: " this.sex " 年齢: " this.age);

}

person._initialized = true;
このコンストラクターを使用して 2 つのオブジェクトを生成します:




コードをコピー


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


var lisi = 新しい人("李Si", "女性", 28);

lisi.showInfo();
var zhangsan = 新しい人("張三", "男性", 18);
zhangsan .showInfo();

実行後、最初に John Si の情報が表示され、次に Zhang San の情報が表示されます。これで二人とも満足しましたが、残念ながら回鍋肉はすでに冷めてしまっていました。