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

JS でオブジェクト指向の設計アイデアを完全に使用すると、コードの再利用が大幅に改善され、モジュール間の結合が減少し、より優れた論理階層化と並列開発が実現できます。以下、いくつかのステップに分けて私の理解を簡単に説明します。

1. データ型とパッケージ化クラス

パッケージ化クラス... 型名... 共通値... 分類

番号.. .nu​​mber... 123.123 …… 基本データ型

Boolean …… true、false …… 基本データ型

String …… string …… 「hello world!」基本データ型

オブジェクト …… オブジェクト …… {}、[] …… 複合データ型

関数 …… function …… function(){} …… 特殊型

なし……未定義...未定義、未定義...小さなデータ型

なし... null... null... 小さなデータ型

の組み込み型には、この記事とはほとんど関係がないため、リストには記載されていません。

2. 参照型と値の型

参照型: オブジェクト関数

値の型: 数値、ブール値、文字列、null、未定義

3. 新しい関数(コンストラクター)とプロトタイプ(プロトタイプ)

プロトタイプの設計パターンについては、インターネット上にたくさん紹介されています。 new を使用してオブジェクトを構築するプロセスを例とともに紹介します。

function classname(){this.id=0;} var v=new classname();

function を使用してオブジェクトを構築する場合、次のプロセスが実行されます:

1 、クラス名のプロトタイプを見つけて浅いコピーを作成します。

2. このポインターをコピーしたオブジェクトにバインドします。

3. this.constructor プロパティを classname に設定します。

[注: 実際には、classname.prototype.constructor の値も classname に設定されます。これについては第 6 回で説明します]

4. ユーザー {} でコードを実行します。

5. this ポインターを返し、左辺値 v に代入します。

4. オブジェクト指向実装の 3 つの基本特性

1. カプセル化

js では、カプセル化に重点が置かれています。権限。ネイティブにサポートされている他のオブジェクト指向言語では、アクセス許可を制御するために public、protected、private の 3 つのキーワードが一般にサポートされていますが、js では、複雑なスコープ関係に依存して制御することしかできません:

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

function classname(a){

var uid=a; / /uin プライベートをシミュレートするには、スコープは {} であり、外部からは使用できません

this.getuid=function(){return a;} //uid の外部読み取り専用インターフェイスを提供します obj.getuid() ;

this.setuid=function(val){a=val} // uid に書き込み可能な外部インターフェイスを提供します

this.id=uid; id はシミュレーションです public obj.id uses

}

classname.prototype.func=function(){}; //
classname.stafunc =function(){}; //

var obj=new classname(1); を呼び出す静的メソッド classname.stafunc() をシミュレートします。
[!] function は参照型であるため、classname.prototype.func はすべてのオブジェクトで共有される関数オブジェクト (各オブジェクトは参照のみを持つ) であるため、オブジェクトのサイズは大きくないことに注意することが非常に重要です。 this.getuid と this.setuid を使用すると、関数を定義することになるため、オブジェクト インスタンスごとにコピーが保存されます。このメソッドをむやみに使用すると、オブジェクトのサイズが大きくなり、パフォーマンスに影響を及ぼします。個人的には、プライベート変数をシミュレートすることにほとんど意味がないと思います。

[!] どうしても this.xxx=function(){} を多用する必要がある場合は、function(){} の this ポインタを一番外側の this ポインタとは別に追加するのが最善です。 var _this=this; をクラス定義の最初の行に追加すると、バインドされたポインタが this.xxx=function(){} で便利に使用できるようになります。

2. 継承

継承を実装するには主に 2 つの方法があります。1 つは、JavaScript 自体のプロトタイプ モデルを使用し、プロトタイプに値を代入し、そのコンストラクター属性を変更することです。 2 番目の方法は、プロトタイプを使用せずに、親オブジェクトのすべての属性メソッドを子オブジェクトに手動でディープ コピーすることです。たとえば、A が B を継承する必要がある場合、最初の記述方法は次のようになります。 A.prototype=new B();A.prototype.constructor=A; 2 番目の記述方法は、再帰を記述するか、 jQueryのextendメソッド。さらに、多重継承を実装したい場合、プロトタイプは非常に面倒です (複数のクラスを順番に作成し、それらを接続する空のオブジェクトを作成する必要があります)。2 番目の方法は、それらを順番にコピーするだけで比較的簡単です。一般に、このタイプの継承で親クラスを見つけやすくするために、親クラスを参照する属性をオブジェクトに追加できます。

3. ポリモーフィズム

関数のオーバーロードについては説明しません。パラメータを確認するだけですべて完了です。非常に柔軟です。非表示属性には、未定義が直接割り当てられます。クラス B のプロトタイプを継承する場合は、それを受け取るために空のオブジェクトを作成する必要があることに注意してください。それ以外の場合は、クラスにメソッドを記述する場合でも、プロトタイプを直接変更するのと同じになります。最終的にコンストラクターを変更するときにメソッドを記述しないと、継承チェーンで混乱が生じます。

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

function temp(){};

var obj=new; temp();


このようにして B を継承する必要があります。.prototype クラスは obj を継承でき、プロトタイプが変更されても B には影響しません。また、 new B() の継承のように多くのスペースを無駄にすることもありません。

5. 深いコピーと浅いコピー
これは他の言語と変わりません。浅いコピーは直接コピーであり、参照に遭遇しても深くは入りません。タイプまたはクラスタイプ。ディープコピーは、型判定に基づいて再帰的にコピーを行います。


6.prototype.constructor

この値は主に、継承されたプロトタイプ チェーンを維持するために使用されます。詳細については記事が書かれています。 http://bbs.51js.com/thread-84148-1-1.html

7. JS のオブジェクト指向開発
私はフロントエンド開発者ではなく、限られたプロジェクトしか見ていないため、私自身の経験についてしか話すことができません。

私が開発した B/S は通常 2 つのアーキテクチャを使用します。1 つは CGI に基づいており、バックグラウンド言語で HTML を生成し、JS は一部のユーザー操作や Ajax 通信などを実行するだけです。もう 1 つは、MVC を使用する方法です。バックグラウンド言語は JSON のみを生成し、ビュー層は JS コンポーネントによって完全にクライアント側に実装されます。後者は通常、プログラミングにオブジェクト指向のアイデアを使用し、コンポーネントをクラスにカプセル化し、JSON をコンストラクターに渡し、コントローラーまたはレイアウト コンポーネントから JSON を追加します。コンポーネントを再利用できるため、バックエンド管理システムや JS ゲームの開発効率は非常に優れています。