JS オブジェクト指向プログラミング_JavaScript スキルの簡単な分析

AJAX が台頭する前は、多くの人がまったく構造を持たずに JS を作成し、重複した関数が見つかった場合はそれをコピーする必要がありました。同じ名前です。どこからエラーを探し始めればよいのか本当にわかりません。誰もが常にプロセス指向のプログラミングのアイデアを使用して JS コードを作成しており、インターネットには小さな「賢い」JS コード スニペットが多すぎるためです。その多くは何気なく行われており、非常に不規則であるため、JS は補助的な小さなものであり、より大きなものの開発には適していないと盲目的に考えられています。しかし、AJAX の台頭以来​​、大量の JS コードを記述するには、JAVA のようなコードを記述するのと同じようにオブジェクト指向開発ができる必要があります。

以下では、私自身の経験と学んだことを組み合わせて、JS でオブジェクト指向プログラミングを使用する方法を学習します。実際、JS の各関数は次の関数のようにオブジェクトであるため、オブジェクト指向開発に JS を使用することは難しくありません。

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

function HelloWorld()
{
alert('hello world!')
}

次に、次のテスト関数を使用するなど、使用時にオブジェクトとして使用できます:

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

function _test()
{
var obj = new HelloWorld()
}

次に呼び出します。 _test メソッド すると、Hello World がポップアップ表示されます。プロンプト ボックス、つまり HelloWorld() オブジェクト (関数) が呼び出されます。ここの HelloWorld オブジェクトにはプロパティやメソッドがありません。HelloWorld() というメソッドが 1 つだけあります。 new を使用してオブジェクトを作成すると、それは Its と呼ばれます。施工方法。これは最も単純なオブジェクトでもあります。もちろん、JS では、値を割り当てるために、prototype キーワードを使用します。たとえば、HelloWorld オブジェクトに、sayHello メソッドと name 属性を追加します。

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

HelloWorld.prototype = {
name : 'JavaScript',
sayHello : function() {
alert(this.name)
}
}

次に、HelloWorld にすることができます。 name 属性と SayHello メソッドを追加しました。_test メソッドを次のように変更しましょう:

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

function _test()
{
var obj = new HelloWorld();
obj.sayHello();
_test メソッドを呼び出した後、hello wordl! と JavaScript が連続して出力されます (1 つは構築メソッドのアラートで、もう 1 つはsayHello メソッドのアラートです)。 SayHello メソッドのアラートは this キーワードを参照することに注意してください。このキーワードは HelloWorld オブジェクトを表し、JAVA の this キーワードと同様に、デフォルトでこのオブジェクトを指します。

インスタンス メソッドとプロパティをオブジェクトに追加するには、上記の方法を使用します。つまり、prototype キーワードを使用して値を割り当てます。形式は次のとおりです。

コードをコピー コードは次のとおりです: オブジェクト名.prototype = {

属性 1: 属性値、

属性2: 属性値、
メソッド 1: 関数 (パラメータ リスト) {
メソッド本体;
}、
メソッド 2: 関数 (パラメータ リスト) {
メソッド本体;
}


上記のようにオブジェクトに複数の属性とメソッドを定義できるため、オブジェクトを新規作成した後、インスタンス名、属性、またはメソッドを使用して属性を取得したり、メソッドを実行したりできます。

上記のメソッドでは、オブジェクトの属性に直接アクセスできないことをご存じないかもしれません。たとえば、HelloWorld オブジェクトの name 属性にアクセスするには、obj.name を使用して直接取得できます。これは JAVA の public 属性に似ており、name 属性に値を直接割り当てることもできます。ここで疑問が生じます。プライベート メンバー変数をオブジェクトに割り当てるにはどうすればよいでしょうか?その場合、HelloWorld クラスの宣言方法を変更する必要があるかもしれません。プロトタイプを使用してクラスの属性とメソッドを宣言する代わりに、インライン関数と属性を直接使用して宣言します。変更された HelloWorld は次のようになり、HelloWorld2 と名付けられます。

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

function HelloWorld2()
{
var privateProp = ' hello world 2!';
this.method = function() {
alert(privateProp);
}
}

を参照してください。 HelloWorld2のクラス宣言メソッドは無いのですか？関数のネスト宣言は関数内で直接行われ、プライベート メンバー変数であるローカル変数 privateProp も設定されます。この変数は HelloWorld2 内の関数からのみアクセスできるため、外部アクセスは許可されません。変数のスコープを使用してクラスのプライベート変数を取得します。私たちのアプリケーションは次のとおりです:

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

function _test2( )
{
var obj2 = new HelloWorld2();
obj2.method(); // このメソッドを呼び出すと 'hello world 2!
alert(obj2.privateProp); print unknown
}

上記は、クラスの定義方法と、クラスの属性とメソッドの定義方法についてです。プロトタイプ メソッドを使用すると定義が明確になるため、これを行います。メソッドは通常、クラスの定義に使用され、同様のクラス宣言メソッドが多くの AJAX フレームワークで使用されています。さらに、クラスのプライベート メンバ変数には、クラスの構築メソッド内の関数からしかアクセスできません。このように、クラスのプロトタイプで宣言されたメソッドはプライベート メンバ変数にアクセスできず、可読性が劣ります。プロトタイプメソッドとして。

わかりました。上記はすべて、クラスのインスタンス メソッドと属性の定義に関するものです。 JAVA では、クラスはインスタンスのメソッドとプロパティ、およびクラスのメソッドとプロパティに分割されます。いわゆるクラス属性とメソッドは、クラスのすべてのインスタンスが、インスタンスごとにセットを保持するのではなく、クラス属性とクラス メソッドのコピーのみを保持することを意味します。これは、インスタンス属性やインスタンス メソッドとは異なります。では、JS でクラスの静的クラス メソッドとクラス属性を定義するにはどうすればよいでしょうか?静的属性と静的メソッドをクラスに直接追加できます。たとえば、age 静的属性と hello 静的メソッドを HelloWorld クラスに追加すると、宣言は次のようになります。
コードをコピーします

コードは次のとおりです: HelloWorld.age = 22; HelloWorld.hello = function() {

alert (HelloWorld.age);

}


次に、クラス HelloWorld に対して静的属性 age と静的メソッド hello が宣言されます。これを使用する場合、クラス名を使用して直接アクセスできますが、インスタンスを使用してアクセスすることはできません。テストは次のとおりです。

コードをコピーします

コードは次のとおりです: function _test() {

var obj = new HelloWorld(); SayHello(); // 正しい、インスタンス メソッド。インスタンスを通じてアクセスできます。

HelloWorld.hello() // 正しい、静的メソッド。クラス名を通じて直接アクセスできます。
obj.hello();エラー。インスタンスの静的メソッドを通じてアクセスできません。 JS エラーが報告されます。
}


上記の説明を通して、皆さんは JS を使用したオブジェクト指向プログラミングについてある程度の理解があり、それを実行する準備ができているはずです (笑)。それ (ヒント: 上記のコードはすべてテストに合格しました!)