JavaScript によるオブジェクト指向プログラミング

はじめに

JavaScript は強力なオブジェクト指向プログラミング言語ですが、従来のプログラミング言語とは異なり、プロトタイプベースの OOP モデルを使用しているため、ほとんどの開発者にとってその構文は理解できません。さらに、JavaScript は関数をプライマリ オブジェクトとして扱うため、言語に詳しくない開発者にとっては大きな混乱を引き起こす可能性があります。そのため、これを簡単な紹介として前面に掲載することにしました。また、JavaScript でのオブジェクト指向プログラミングのリファレンスとしても使用できます。

このドキュメントは、オブジェクト指向プログラミングのルールのプレビューを提供するものではなく、そのインターフェイスの概要を提供します。

名前空間

サードパーティのライブラリ、フレームワーク、および Web 依存関係がますます登場するため、JavaScript の開発では名前空間が不可欠になっています。グローバル名前空間内のオブジェクトと変数の競合を回避する必要があります。

残念ながら、JavaScript は名前空間のコンパイルをサポートしていませんが、オブジェクトを使用して同じ結果を達成することができます。 JavaScript では、名前空間インターフェイスを実装するためのパターンが多数ありますが、ここでは、この分野で最も一般的に使用されるパターンであるネストされた名前空間について説明します。

ネストされた名前空間

ネストされた名前空間パターンは、オブジェクト リテラルを使用して、特定のアプリケーションの特定の名前を持つ機能をバンドルします。

最初にグローバルオブジェクトを作成し、それをMyAppという変数に割り当てます。

上記の構文はMyAppが定義されているかどうかを確認します。すでに定義されている場合は、それを自分自身に割り当てるだけですが、代わりに関数と変数を保持する空のコンテナーを作成します。

同じ手法を使用してサブ名前空間を作成することもできます。例:

コンテナを開始したら、既存の定義と競合する危険を冒さずに、(コンテナ) 内で関数と変数を定義し、グローバル名前空間でそれらを呼び出すことができます。

JavaScript の命名パターンの内部概要は、Goggle の Addy Osmani によって記事「Essential JavaScript Namespacing Patterns」で紹介されました。さまざまなモードを試してみたい場合は、ここから始めるのが最適です。

オブジェクト

JavaScriptのコードを書いたことがある人なら、すでにオブジェクトを使ったことがあるでしょう。 JavaScript には 3 種類のオブジェクトがあります:

ネイティブ オブジェクト

ネイティブ オブジェクトは言語仕様の一部であり、どのような実行環境で実行されても使用できます。ネイティブ オブジェクトには、Array、Date、Math、parseInt などが含まれます。すべてのネイティブ オブジェクトについて詳しくは、JavaScript 組み込みオブジェクト リファレンスを参照してください。

ホスト オブジェクト

ネイティブ オブジェクトとは異なり、ホスト オブジェクトは、JavaScript コードが実行される環境によって作成されます。環境が異なれば、異なるホスト オブジェクトが作成されます。これらのホスト オブジェクトを使用すると、ほとんどの場合、ホスト オブジェクトと対話できます。ブラウザ (実行環境の 1 つ) 上で実行されるコードを作成する場合、ウィンドウ、ドキュメント、場所、履歴などのホスト オブジェクトが存在します。

ユーザーオブジェクト

ユーザーオブジェクト（または埋め込まれたオブジェクト）は、コード内で定義され、実行時に作成されるオブジェクトです。 JavaScript で独自のオブジェクトを作成するには 2 つの方法があります。詳細は以下で説明します。

オブジェクトリテラル

以前に名前空間の作成をデモしたときに、すでにオブジェクトリテラルに触れています。ここで、オブジェクト リテラルの定義を明確にしましょう。オブジェクト リテラルは、中括弧のペアで囲まれた名前と値のペアのコンマ区切りのリストです。オブジェクト リテラルには変数 (プロパティ) と関数 (メソッド) を含めることができます。 JavaScript の他のオブジェクトと同様に、関数のパラメーターまたは戻り値としても使用できます。

次に、オブジェクト リテラルを定義して変数に割り当てます:

このオブジェクト リテラルにプロパティとメソッドを追加し、グローバル スコープでアクセスします:

これは前の名前空間と非常によく似ていますが、これは偶然ではありません。リテラル オブジェクトの最も一般的な使用法は、グローバル スコープ内の変数またはオブジェクトとの競合を避けるために、カプセル化されたパッケージにコードをカプセル化することです。同様の理由で、構成パラメータをプラグインやオブジェクトに渡すためにもよく使用されます。

デザイン パターンに精通している場合、オブジェクト リテラルはある程度シングルトンであり、インスタンスが 1 つだけあるパターンです。オブジェクト リテラルには本質的にインスタンス化および継承する機能がありません。次に、JavaScript でカスタム オブジェクトを作成する別の方法について学ぶ必要があります。

コンストラクター

コンストラクターを定義します

関数は JavaScript の第一級市民であり、他のエンティティによってサポートされるすべての操作関数がサポートされることを意味します。 JavaScript の世界では、関数を実行時に動的に構築したり、パラメーターとして使用したり、他の関数の戻り値として使用したり、変数に代入したりすることができます。さらに、関数は独自のプロパティやメソッドを持つこともできます。 JavaScript の関数の性質により、関数はインスタンス化および継承できるものになります。

コンストラクターを使用してカスタム オブジェクトを作成する方法を見てみましょう:

コンストラクターの作成は、自発性とメソッドを定義するために this キーワードを使用するという 1 つの例外を除いて、通常の関数の作成と似ています。関数を作成したら、new キーワードを使用してインスタンスを作成し、変数に割り当てることができます。新しいキーワードが使用されるたびに、これは新しいインスタンスを指します。

コンストラクター関数のインスタンス化は、従来のオブジェクト指向プログラミング言語におけるクラスのインスタンス化と完全に異なるわけではありませんが、ここには気づきにくい問題があります。

newキーワードを使用して新しいオブジェクトを作成すると、関数ブロックが繰り返し実行され、実行されるたびにメソッドを定義する新しい匿名関数が生成されます。これは新しいオブジェクトを作成するようなもので、プログラムがより多くのメモリを消費します。この問題は、最新のブラウザで実行されるプログラムでは顕著ではありません。しかし、アプリケーション ルールが拡大するにつれて、古いブラウザ、コンピュータ、または低電力デバイスではパフォーマンスの問題が発生する可能性があります。ただし、心配しないでください。メソッドをコンストラクターにアタッチする、より良い方法があります (グローバル環境を汚染することはありません)。

メソッドとプロトタイプ

前の紹介で述べたように、JavaScript はプロトタイプに基づいたプログラミング言語です。 JavaScript では、プロトタイプをオブジェクト テンプレートのように使用できます。プロトタイプは、オブジェクトをインスタンス化するときに冗長な匿名関数や変数の作成を回避します。

JavaScript では、プロトタイプはオブジェクトに新しいプロパティやメソッドを追加できるようにする非常に特別な属性です。次に、プロトタイプを使用して上記の例を書き直します。

この例では、sayHey メソッドは各 Person インスタンスに対して定義されなくなりましたが、このメソッドはプロトタイプ テンプレートを通じて各インスタンス間で共有されます。

継承

プロトタイプ チェーンを通じて、プロトタイプをインスタンスの継承に使用できます。 JavaScript のすべてのオブジェクトにはプロトタイプがあり、そのプロトタイプは独自のプロトタイプを持つ別のオブジェクトであり、サイクルは何度も始まります...プロトタイプ オブジェクトのプロトタイプが null になるまで、プロトタイプ チェーンはここで終了します。

JavaScriptはメソッドやプロパティにアクセスする際、まずオブジェクトに定義されているかどうかを確認し、定義されていない場合はプロトタイプに定義されているかどうかを確認します。プロトタイプ内で見つからない場合は、見つかるかプロトタイプ チェーンの最後に到達するまで、プロトタイプ チェーンに沿って検索を続けます。

それでは、コードがどのように実装されるかを見てみましょう。前の例の Person オブジェクトから始めて、Employee という追加のオブジェクトを作成できます。

現在、従業員の属性は 1 つだけです。しかし、従業員も人であるため、人から他のプロパティを継承する必要があります。これを実現するには、Employee オブジェクトで Person コンストラクターを呼び出し、プロトタイプ チェーンを構成します。

プロトタイプ継承に慣れるまでには時間がかかりますが、これはよく理解しておく必要がある重要な概念です。プロトタイプの継承モデルは JavaScript の弱点と考えられがちですが、実際には従来のモデルよりも強力です。たとえば、プロトタイプモデルをマスターした後に従来のモデルを作成するのは非常に簡単です。

ECMAScript 6 では、クラスを実装するための新しいキーワードのセットが導入されています。新しい設計は従来のクラスベースの開発言語に非常に似ていますが、同じではありません。 JavaScript はまだプロトタイプに基づいています。

結論

JavaScriptは長い時間をかけて進化してきましたが、その過程で、今日の標準では使用すべきではないメソッドが多数の開発者によって使用されてきました。 ES2015 の導入によると、この状況は徐々に変わり始めていますが、多くの開発者は依然として古いプログラミング手法に固執しており、コードの関連性が損なわれています。オブジェクト指向プログラミング手法を理解し、それを JavaScript プロジェクトに適用することは、持続可能なコードを記述するために非常に意味があります。

この簡単な紹介がこの目標の達成に役立つことを願っています。

上記は JavaScript によるオブジェクト指向プログラミングの内容です。その他の関連内容については、PHP 中国語 Web サイト (www.php.cn) をご覧ください。