ホームページ ウェブフロントエンド jsチュートリアル JavaScriptオブジェクト指向プログラミングの基礎_基礎知識

JavaScriptオブジェクト指向プログラミングの基礎_基礎知識

May 16, 2016 pm 03:45 PM
javascript オブジェクト指向

オブジェクト指向を再理解する
JavaScript が完全なオブジェクト指向言語であることを説明するには、まずオブジェクト指向の概念から始めて、オブジェクト指向のいくつかの概念について説明する必要があります。

  1. すべてはオブジェクトです
  2. オブジェクトにはカプセル化と継承の機能があります
  3. オブジェクトはメッセージを使用して相互に通信し、それぞれに情報が隠されています

これら 3 つの点に基づくと、C はクラスのカプセル化、継承、ポリモーフィズムを実装しているものの、非オブジェクトのグローバル関数と変数が存在するため、半オブジェクト指向かつ半手続き型言語です。 Java と C# は完全なオブジェクト指向言語であり、オブジェクトなしでは存在できないように関数と変数をクラスの形式で編成します。しかし、ここでは関数自体がプロセスであり、特定のクラスにアタッチされているだけです。

しかし、オブジェクト指向は単なる概念またはプログラミングのアイデアであり、その存在を特定の言語に依存すべきではありません。たとえば、Java はオブジェクト指向の考え方を使用して言語を構築し、クラス、継承、派生、ポリモーフィズム、インターフェイスなどのメカニズムを実装します。ただし、これらのメカニズムはオブジェクト指向プログラミングを実装するための手段にすぎず、必須ではありません。言い換えれば、言語は、独自の特性に基づいてオブジェクト指向を実装するための適切な方法を選択できます。したがって、ほとんどのプログラマは、最初に Java や C などの高レベルのコンパイル言語を学習または使用するため (Java はセミコンパイルおよびセミインタープリタですが、一般的にはコンパイル言語として説明されます)、「クラス」という用語を先入観で受け入れます。オブジェクト指向の実装方​​法であるため、スクリプト言語を学習する際には、その言語がオブジェクト指向言語であるかどうか、またはオブジェクト指向の特性を備えているかどうかを判断するために、クラスベースのオブジェクト指向言語の概念を使用するのが通例です。これは、プログラマーが JavaScript を深く学習して習得することを妨げる重要な理由の 1 つでもあります。
実際、JavaScript 言語はプロトタイプと呼ばれるメソッドを通じてオブジェクト指向プログラミングを実装します。客観的な世界を構築する 2 つの方法、クラスベースのオブジェクト指向とプロトタイプベースのオブジェクト指向の違いについて説明します。
クラスベースのオブジェクト指向アプローチとプロトタイプベースのオブジェクト指向アプローチの比較
クラスベースのオブジェクト指向アプローチでは、オブジェクトはクラスに基づいて生成されます。プロトタイプベースのオブジェクト指向アプローチでは、オブジェクトはコンストラクターとプロトタイプを使用して構築されます。 2 つの認識方法の違いを説明するために、客観的な世界の例を挙げてください。たとえば、工場で自動車を製造する場合、作業員は設計図を参照する必要があり、その設計によって自動車の製造方法が規定されます。ここでの設計図は言語の授業のようなもので、車はこの授業に基づいて作られますが、作業者や機械(建設業者に相当)はエンジンやタイヤ、ハンドル(部品の各属性に相当)などのさまざまな部品を使用します。プロトタイプ) が車を組み立てます。
実際、2 つの方法のうちどちらがオブジェクト指向のアイデアをより完全に表現しているかについては、まだ議論があります。しかし、著者は、次の理由から、プロトタイプ オブジェクト指向はより徹底したオブジェクト指向のアプローチであると信じています。 まず第一に、客観的な世界におけるオブジェクトの作成は他の物理的なオブジェクトの構築の結果であり、抽象的な「図面」からは「車」を生み出すことはできません。言い換えれば、クラスは実体ではなく抽象的な概念です。オブジェクトの作成はエンティティの作成です。
次に、すべてがオブジェクトであるというオブジェクト指向の最も基本的なルールに従って、クラス自体はオブジェクトではありませんが、プロトタイプ メソッドのコンストラクターとプロトタイプ自体は、構築されたオブジェクトによって別のオブジェクトになります。
第三に、クラスベースのオブジェクト指向言語では、オブジェクトの状態はオブジェクトのインスタンスが保持し、オブジェクトの動作メソッドはオブジェクトを宣言するクラスが保持し、構造とメソッドのみを継承できます。 ; プロトタイプのオブジェクト指向言語では、オブジェクトの動作とステータスはオブジェクト自体に属し、一緒に継承できます (参照リソース)。これは客観的な現実に近いものです。
最後に、Java などのクラスベースのオブジェクト指向言語では、手続き型言語でグローバル関数や変数を使用できない不便さを補うために、クラス内で静的プロパティや静的メソッドを宣言できます。実際、すべてがオブジェクトであるため、客観的な世界にはいわゆる静的な概念は存在しません。プロトタイプのオブジェクト指向言語では、組み込みオブジェクト、グローバル オブジェクト、メソッド、またはプロパティを除いて、存在することは許可されず、静的な概念は存在しません。すべての言語要素 (プリミティブ) は、その存在のためにオブジェクトに依存する必要があります。ただし、関数型言語の特性により、言語要素が依存するオブジェクトは実行時コンテキストの変化に応じて変化し、特に this ポインターの変化に反映されます。この性質は、「すべてのものは何かに属しており、宇宙はすべてのものの生存の基盤である」という自然観に近いものです。


JavaScript オブジェクト指向の基礎知識

JavaScript 自体にはクラスの概念はありませんが、一般的なオブジェクト指向言語とは異なりますが、依然としてオブジェクト指向の特徴を持っています。

オブジェクトを作成する簡単な方法は次のとおりです:

function myObject() {

};

JavaScript 中创建对象的方法一般来说有两种:函数构造法和字面量法,上面这种属函数构造法。下面是一个字面量法的例子:

var myObject = {

};

ログイン後にコピー

オブジェクトが 1 つだけ必要で、そのオブジェクトの他のインスタンスが必要ない場合は、リテラル メソッドを使用することをお勧めします。オブジェクトの複数のインスタンスが必要な場合は、関数コンストラクターをお勧めします。
プロパティとメソッドを定義する

関数構築方法:

function myObject() {
 this.iAm = 'an object';

 this.whatAmI = function() {
 console.log('I am ' + this.iAm);
 };
};

ログイン後にコピー

リテラルメソッド:

var myObject = {
 iAm : 'an object',

 whatAmI : function() {
 console.log('I am ' + this.iAm);
 }
};

ログイン後にコピー

上記の 2 つのメソッドで作成されたオブジェクトには、「iAm」という名前のプロパティと「whatAmI」という名前のメソッドがあります。プロパティはオブジェクト内の変数であり、メソッドはオブジェクト内の関数です。

属性を取得してメソッドを呼び出す方法:

var w = myObject.iAm;

myObject.whatAmI();

ログイン後にコピー

メソッドを呼び出すときは、メソッドの後にかっこを追加する必要があります。かっこを追加しない場合は、メソッドへの参照が返されるだけです。
オブジェクトを作成する 2 つの方法の違い

  • 関数コンストラクターでプロパティとメソッドを定義するときは、接頭辞 this を使用する必要がありますが、リテラル メソッドでは必要ありません。
  • 関数コンストラクターはプロパティとメソッドに値を割り当てるときに = を使用し、リテラル メソッドは : を使用します。
  • 複数のプロパティまたはメソッドがある場合は、関数コンストラクターでは ; で、リテラル メソッドでは , で区切る必要があります。

リテラル メソッドで作成されたオブジェクトの場合、オブジェクトの参照を使用してそのプロパティまたはメソッドを直接呼び出すことができます。

myObject.whatAmI();

ログイン後にコピー

関数コンストラクターの場合、そのプロパティまたはメソッドを呼び出す前に、オブジェクトのインスタンスを作成する必要があります。

var myNewObject = new myObject();
myNewObject.whatAmI();

ログイン後にコピー

コンストラクターを使用する

ここで、前の関数構築方法に戻りましょう:

function myObject() {
 this.iAm = 'an object';
 this.whatAmI = function() {
 console.log('I am ' + this.iAm);
 };
};

ログイン後にコピー

実際は関数のように見えますが、関数なのでパラメータを渡すことはできますか?コードを少し変更します:

function myObject(what) {
 this.iAm = what;
 this.whatAmI = function(language) {
 console.log('I am ' + this.iAm + ' of the ' + language + ' language');
 };
};

ログイン後にコピー

次に、オブジェクトをインスタンス化し、パラメーターを渡します。

var myNewObject = new myObject('an object');
myNewObject.whatAmI('JavaScript');

ログイン後にコピー

プログラムの最終出力は、「私は JavaScript 言語のオブジェクトです」です。
オブジェクトを作成するには 2 つの方法がありますが、どちらを使用すればよいですか?

リテラル メソッドの場合、インスタンス化が必要ないため、オブジェクトの値が変更されると、そのオブジェクトの値は永続的に変更され、その他のアクセスは変更された値になります。関数コンストラクターの場合、値を変更すると、そのインスタンスの値が変更され、N 個のオブジェクトをインスタンス化でき、各オブジェクトは相互に干渉することなく独自の異なる値を持つことができます。次のコード スニペットを比較してください。

まずリテラルメソッドを見てみましょう:

var myObjectLiteral = {
 myProperty : 'this is a property'
};

console.log(myObjectLiteral.myProperty); // log 'this is a property'

myObjectLiteral.myProperty = 'this is a new property';

console.log(myObjectLiteral.myProperty); // log 'this is a new property'

ログイン後にコピー

このオブジェクトを指すように新しい変数が作成された場合でも、結果は同じです:

var myObjectLiteral = {
 myProperty : 'this is a property'
};

console.log(myObjectLiteral.myProperty); // log 'this is a property'

var sameObject = myObjectLiteral;

myObjectLiteral.myProperty = 'this is a new property';

console.log(sameObject.myProperty); // log 'this is a new property'

ログイン後にコピー

関数の構築方法をもう一度見てください:

// 用函数构造法
var myObjectConstructor = function() {
   this.myProperty = 'this is a property'
};

// 实例化一个对象
var constructorOne = new myObjectConstructor();

// 实例化第二个对象
var constructorTwo = new myObjectConstructor();

// 输出
console.log(constructorOne.myProperty); // log 'this is a property'

// 输出
console.log(constructorTwo.myProperty); // log 'this is a property'

和预期一样,两个对象的属性值是一样的。如果修个其中一个对象的值呢?

// 用函数构造法
var myObjectConstructor = function() {
 this.myProperty = 'this is a property';
};

// 实例化一个对象
var constructorOne = new myObjectConstructor();

// 修改对象的属性
constructorOne.myProperty = 'this is a new property';

// 实例化第二个对象
var constructorTwo = new myObjectConstructor();

// 输出
alert(constructorOne.myProperty); // log 'this is a new property'

// 输出
alert(constructorTwo.myProperty); // log 'this is a property'

ログイン後にコピー

ご覧のとおり、関数コンストラクターを使用してインスタンス化されたさまざまなオブジェクトは互いに独立しており、それぞれが異なる値を持つことができます。したがって、どの方法でオブジェクトを作成するかは、実際の状況によって異なります。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 Jan 05, 2024 pm 06:08 PM

JavaScript チュートリアル: HTTP ステータス コードを取得する方法、特定のコード例が必要です 序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータス コードを取得して操作が成功したかどうかを判断し、さまざまなステータス コードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用

Go でオブジェクト指向プログラミングを探索する Go でオブジェクト指向プログラミングを探索する Apr 04, 2024 am 10:39 AM

Go 言語は、型定義とメソッドの関連付けを通じてオブジェクト指向プログラミングをサポートします。従来の継承はサポートされていませんが、合成を通じて実装されます。インターフェイスは型間の一貫性を提供し、抽象メソッドを定義できるようにします。実際の事例では、顧客操作の作成、取得、更新、削除など、OOP を使用して顧客情報を管理する方法を示します。

PHP の高度な機能: オブジェクト指向プログラミングのベスト プラクティス PHP の高度な機能: オブジェクト指向プログラミングのベスト プラクティス Jun 05, 2024 pm 09:39 PM

PHP における OOP のベスト プラクティスには、命名規則、インターフェイスと抽象クラス、継承とポリモーフィズム、依存関係の注入が含まれます。実際のケースには、ウェアハウス モードを使用してデータを管理する場合や、ストラテジー モードを使用して並べ替えを実装する場合などがあります。

JavaScript で HTTP ステータス コードを簡単に取得する方法 JavaScript で HTTP ステータス コードを簡単に取得する方法 Jan 05, 2024 pm 01:37 PM

JavaScript で HTTP ステータス コードを取得する方法の紹介: フロントエンド開発では、バックエンド インターフェイスとの対話を処理する必要があることが多く、HTTP ステータス コードはその非常に重要な部分です。 HTTP ステータス コードを理解して取得すると、インターフェイスから返されたデータをより適切に処理できるようになります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法と、具体的なコード例を紹介します。 1. HTTP ステータス コードとは何ですか? HTTP ステータス コードとは、ブラウザがサーバーへのリクエストを開始したときに、サービスが

Golang にはクラスのようなオブジェクト指向機能はありますか? Golang にはクラスのようなオブジェクト指向機能はありますか? Mar 19, 2024 pm 02:51 PM

Golang (Go 言語) には伝統的な意味でのクラスの概念はありませんが、構造体と呼ばれるデータ型が提供され、これによってクラスと同様のオブジェクト指向機能を実現できます。この記事では、構造体を使用してオブジェクト指向機能を実装する方法を説明し、具体的なコード例を示します。構造体の定義と使用法 まず、構造体の定義と使用法を見てみましょう。 Golang では、type キーワードを通じて構造を定義し、必要に応じて使用できます。構造には属性を含めることができます

Go言語のオブジェクト指向機能の分析 Go言語のオブジェクト指向機能の分析 Apr 04, 2024 am 11:18 AM

Go 言語は、オブジェクト指向プログラミング、構造体によるオブジェクトの定義、ポインター レシーバーを使用したメソッドの定義、インターフェイスによるポリモーフィズムの実装をサポートしています。オブジェクト指向の機能は、Go 言語でのコードの再利用、保守性、カプセル化を提供しますが、クラスや継承、メソッド シグネチャ キャストといった従来の概念が欠如しているなどの制限もあります。

WebSocketとJavaScriptを使ったオンライン電子署名システムの実装方法 WebSocketとJavaScriptを使ったオンライン電子署名システムの実装方法 Dec 18, 2023 pm 03:09 PM

WebSocket と JavaScript を使用してオンライン電子署名システムを実装する方法の概要: デジタル時代の到来により、電子署名は従来の紙の署名に代わってさまざまな業界で広く使用されています。 WebSocketは全二重通信プロトコルとしてサーバーとリアルタイム双方向のデータ通信が可能で、JavaScriptと組み合わせることでオンライン電子署名システムを実現できます。この記事では、WebSocket と JavaScript を使用して簡単なオンライン アプリケーションを開発する方法を紹介します。

PHP オブジェクト指向プログラミングの深い理解: オブジェクト指向プログラミングのデバッグ手法 PHP オブジェクト指向プログラミングの深い理解: オブジェクト指向プログラミングのデバッグ手法 Jun 05, 2024 pm 08:50 PM

オブジェクトのステータスの追跡、ブレークポイントの設定、例外の追跡を習得し、xdebug 拡張機能を利用することで、PHP オブジェクト指向プログラミング コードを効果的にデバッグできます。 1. オブジェクトのステータスを追跡する: var_dump() と print_r() を使用して、オブジェクトの属性とメソッドの値を表示します。 2. ブレークポイントの設定: 開発環境にブレークポイントを設定すると、実行がブレークポイントに到達するとデバッガが一時停止するため、オブジェクトのステータスを簡単に確認できます。 3. 例外のトレース: try-catch ブロックと getTraceAsString() を使用して、例外発生時のスタック トレースとメッセージを取得します。 4. デバッガーを使用します。xdebug_var_dump() 関数は、コードの実行中に変数の内容を検査できます。

See all articles