JavaScriptでオブジェクト指向クラスを実現するための簡単な説明_基礎知識

オブジェクトとは、最も単純な整数から複雑な飛行機に至るまで、人々が研究したいあらゆるものであり、特定のものを表すだけでなく、抽象的なルール、計画、またはイベントを表すこともできます。 --百度百科事典より引用

オブジェクト指向プログラミングは、現在最も人気のあるプログラミング モデルです。しかし、もどかしいのは、最も広く使用されているフロントエンド アプリケーションである JavaScript がオブジェクト指向プログラミングをサポートしていないことです。

JavaScript にはアクセス制御文字がありません。クラスを定義するキーワード class もありません。継承のための extend やコロンもサポートされていません。また、仮想関数をサポートするために virtual を使用しません。ただし、JavaScript は柔軟です。言語に従ってみましょう。 class というキーワードを持たない Javascript がどのようにクラス定義を実装し、オブジェクトを作成するかを見てみましょう。

クラスを定義し、クラスのインスタンス オブジェクトを作成します

JavaScript では、次のように関数を使用してクラスを定義します。

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

関数 Shape()
{
var x=1;
var y=2;
}

疑うかもしれませんね?これは決定的な機能ではないでしょうか?はい、これは定義関数です。Shape 関数を定義し、x と y を初期化します。しかし、別の見方をすると、これは x と y の 2 つの属性を持つ Shape クラスを定義することになり、初期値はそれぞれ 1 と 2 になります。ただし、その定義に使用するキーワードは次のとおりです。 class はクラスではなく関数です。

次に、次のように、Shape クラスのオブジェクト aShape を作成できます。

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

var aShape = 新しい Shape();

パブリック プロパティとプライベート プロパティを定義する

aShape オブジェクトを作成しましたが、そのプロパティにアクセスしようとすると、次のようなエラーが発生します:

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

aShape.x=1;

これは、var で定義されたプロパティがプライベートであることを示しています。このキーワードを使用してパブリック プロパティを定義する必要があります。

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

関数 Shape()
{
This.x=1;
This.y=2;
}

このようにして、次のような Shape の属性にアクセスできます。

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

aShape.x=2;

上記のコードに基づいて要約すると、var を使用してクラスのプライベート属性を定義し、this を使用してクラスのパブリック属性を定義します。

パブリック メソッドとプライベート メソッドを定義する

JavaScript では、関数は Function クラスのインスタンスであるため、関数はオブジェクトでもあります。したがって、代入メソッドを使用して関数を作成することもできます。関数をクラスに割り当てると、この属性変数は実行可能な関数であるため、メソッドを呼び出すことができます。コードは次のとおりです:

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

関数 Shape()

{
var x=0;
var y=1;
This.draw=function()
{
//print;
};
}

上記のコードで描画を定義し、それに関数を割り当てました。次に、次のように、OOP ではパブリック メソッドと呼ばれる aShape を通じてこの関数を呼び出すことができます。

コードをコピーします コードは次のとおりです: aShape.draw();

var で定義されている場合、この描画はプライベートになります。これは、OOP ではプライベート メソッドと呼ばれます。

コードをコピー

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

関数 Shape()
{
var x=0;
var y=1;
vardraw=function()
{
//print;
};
}

この方法では、aShape.draw を使用してこの関数を呼び出すことはできません。

コンストラクター

JavaScript は OOP をサポートしておらず、もちろんコンストラクターはありません。ただし、コンストラクターを自分でシミュレートし、オブジェクトの作成時に自動的に呼び出すことができます。コードは次のとおりです。

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

関数 Shape()
{
var init = function()
{
//コンストラクターコード
};
init();
}

Shape の最後に、init 関数を人工的に呼び出しました。その後、Shape オブジェクトが作成されると、常に init が自動的に呼び出され、コンストラクターをシミュレートできます。

パラメータを持つコンストラクター

コンストラクターにパラメーターを取得させるにはどうすればよいですか?実際、これは非常に簡単です。

のように、関数のパラメーター リストに渡すパラメーターを記述するだけです。

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

関数 Shape(ax,ay)
{
var x=0;
var y=0;
var init = function()
{
//コンストラクター
x=ax;
y=ay;
};
init();
}

このようにして、次のようなオブジェクトを作成できます:

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

var aShape = 新しい形状(0,1)
;

静的プロパティと静的メソッド

JavaScript で静的プロパティとメソッドを定義するにはどうすればよいですか?以下に示すように:

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

関数 Shape(ax,ay)
{
var x=0;
var y=0;
var init = function()
{
//コンストラクター
x=ax;
y=ay;
};
init();
}
Shape.count=0; //この属性はオブジェクトではなくクラスに属します。
Shape.staticMethod=function(){};//静的メソッドを定義します

静的プロパティとメソッドを使用すると、次のようにクラス名を使用してアクセスできます。

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

アラート ( aShape.count );
aShape.staticMethod();

注: 静的プロパティとメソッドはパブリックです。今のところ、静的プロパティとメソッドをプライベートにする方法がわかりません~

。
メソッド

でこのクラスのパブリック プロパティとプライベート プロパティにアクセスします クラス メソッドで独自のプロパティにアクセスするには、JavaScript にはパブリック プロパティとプライベート プロパティに異なるアクセス メソッドがあります。

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

関数 Shape(ax,ay)
{
var x=0;
var y=0;
This.gx=0;
This.gy=0;
var init = function()
{
x=ax;//プライベート プロパティにアクセスするには、変数名を直接記述するだけです
y=ay;
This.gx=ax;//パブリック プロパティにアクセスするには、変数名の前に this.
を追加する必要があります This.gy=ay;
};
init();
}

これに関する注意事項

著者の経験によれば、クラス内のこれは必ずしもオブジェクト自体を指すわけではありません。その主な理由は、JavaScript が OOP 言語ではないためです。さらに、関数とクラスは関数で定義されているため、当然何らかの問題が発生します。小さな問題。

このポインターがエラーを指す状況は、通常、オブジェクトのメンバー関数がイベントに応答するようにする必要がありますが、イベントがトリガーされると、システムは受信したメンバー関数を呼び出します。 this ポインターは独自のオブジェクトではなくなりました。もちろん、これをメンバー関数で呼び出すと必ずエラーが発生します。

解決策は、クラス定義の最初にこれをプライベート属性に保存することです。将来、この属性を使用してこれを置き換えることができます。私はこのポインターを使用するためにこの方法を使用しています。これは非常に安全で心配のないものです~

この問題を解決するためにコードを変更しましょう。パート 6 のコードを比較すると、次のことがわかります:

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

関数 Shape(ax,ay)
{
var _this=this; // これで混乱しないように、これを保存し、将来 _this に置き換えます
var x=0;
var y=0;
_this.gx=0;
_this.gy=0;
var init = function()
{
x=ax;//プライベート プロパティにアクセスするには、変数名を直接記述するだけです
y=ay;
_this.gx=ax;//パブリックプロパティにアクセスするには、変数名の前に this.
を追加する必要があります _this.gy=ay;
};
init();
}

上記では、JavaScript でクラスを定義する方法、クラスのオブジェクトを作成する方法、パブリックおよびプライベートのプロパティとメソッドを作成する方法、静的プロパティとメソッドを作成する方法、コンストラクターをシミュレートする方法について説明し、エラーが発生しやすいことについて説明しました。

JavaScript での OOP 実装については以上です。一般に、JavaScript はクラスの定義に使用され、オブジェクトの作成には上記のコードで十分です。もちろん、mootools またはプロトタイプを使用してクラスを定義し、オブジェクトを作成することもできます。私は mootools フレームワークを使用しましたが、これはより完全な Javascript クラス シミュレーションを備えており、クラスの継承をサポートしているので、興味のある方は試してみてください。もちろん、フレームワークを使用する場合は、関連する js ヘッダー ファイルを Web ページに含める必要があります。そのため、読者がフレームワークを使用せずにクラスを作成できることを願っています。この方法では、コードがより効率的になり、また、クラスを作成することもできます。ほら、簡単なクラスを作るのは面倒じゃないよ~