JavaScript オブジェクト指向プログラミング入門チュートリアル_基礎知識

オブジェクト指向 JavaScript と他の言語の間には相違点があり、それがいくつかの議論を引き起こしていますが、JavaScript が強力なオブジェクト指向プログラミング機能を備えていることは疑いの余地がありません

この記事はオブジェクト指向の概要から始まります。指向プログラミング まず JavaScript オブジェクト モデルを確認し、最後に JavaScript でのオブジェクト指向プログラミングの概念を示します。

JavaScript のレビュー

変数、型、関数、スコープなどの JavaScript の概念についてよくわからない場合は、「JavaScript でのこれらのトピックの再紹介」を参照してください。 JavaScript 1.5 コア ガイド

オブジェクト指向プログラミング

もご覧ください。

オブジェクト指向プログラミングは、抽象化を使用して現実世界に基づいたモデルを作成するプログラミング パラダイムです。これは、モジュール性、ポリモーフィズム、カプセル化など、以前に確立されたいくつかのパラダイム技術を使用します。現在、多くの一般的なプログラミング言語 (Java、JavaScript、C#、C、Python、PHP、Ruby、Objective-C など) がオブジェクト指向プログラミング (OOP) をサポートしています。

オブジェクト指向プログラミングは、プログラムを関数の集合として、またはコンピューター命令のリストに還元するという従来の見方とは対照的に、協調するオブジェクトの集合を使用してソフトウェアを設計するものとみなすことができます。オブジェクト指向プログラミングでは、各オブジェクトにはメッセージの受信、データの処理、他のオブジェクトへのメッセージの送信という機能があります。各オブジェクトは、異なる役割や責任を持つ独立した小さな機械として見ることができます。
オブジェクト指向プログラミングは、プログラミングの柔軟性と保守性を高めることを目的としており、大規模なソフトウェア エンジニアリングで広く普及しています。モジュール性に重点を置いているため、オブジェクト指向コードは、開発がよりシンプルになり、後で理解しやすくなるように設計されており、モジュール化されていないプログラミング手法に比べて、複雑な状況や手順の分析、コーディング、理解が容易になります。

特別規約

クラス
~ オブジェクトの特性を定義します。
オブジェクト
~ クラスのインスタンス。
プロパティ
~ 色などのオブジェクトの特性。
メソッド
~ 歩行などのオブジェクトの能力。
コンストラクター
~ インスタンス化中に呼び出されるメソッド。
継承
~ クラスは別のクラスから特性を継承できます。
カプセル化
~ クラスはオブジェクトの特性のみを定義し、メソッドはメソッドの実行方法のみを定義します。
抽象化
~ オブジェクトの複雑な継承、メソッド、プロパティを結合し、特定の現実モデルをシミュレートできなければなりません。
ポリモーフィズム
~ 異なるクラスが同じメソッドまたはプロパティを定義する場合があります。
オブジェクト指向プログラミングの詳細については、Wikipedia のオブジェクト指向プログラミングに関するエントリを参照してください。

プロトタイプベースのプログラミング

プロトタイプベースのプログラミングとは、クラスが存在せず、プロトタイプに見せかけた動作の再利用(クラスベース言語では継承と呼ばれます)を既存のオブジェクトを利用して行うオブジェクト指向プログラミングのスタイルです。このパターンは、クラスレス、プロトタイプ指向、またはインスタンスベースのプログラミングとも呼ばれます。
プロトタイプベースの言語の元の (そして非常に標準的な) 例は、David Ungar と Randall Smith によって開発された Self プログラミング言語です。ただし、このスタイルのクラスレス プログラミングは最近ますます人気が高まっており、JavaScript、Cecil、NewtonScript、Io、MOO、REBOL、Kevo、Squeak などのいくつかのプログラミング言語で採用されています (Viewer フレームワークを使用して Morphic コンポーネントを操作する場合) 、その他いくつかの言語。

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

コアオブジェクト

JavaScript のコアには、Math、Object、Array、String オブジェクトなどの複数のオブジェクトが含まれています。次の例は、Math オブジェクトのrandom() メソッドを使用して乱数を取得する方法を示しています。

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

alert(Math.random());

ヒント: この例と他のすべての例では、関数名alertがグローバルに定義されていることを前提としています(alertはWebブラウザに含まれているため)。アラート関数は実際には JavaScript 自体の一部ではありません。

JavaScript コア オブジェクトのリストについては、「JavaScript 1.5 コア リファレンス: グローバル オブジェクト」を参照してください。

JavaScript のすべてのオブジェクトは Object オブジェクトのインスタンスであるため、そのすべてのプロパティとメソッドを継承します。

カスタムオブジェクト

クラス

JavaScript は、C や Java のようなクラス ステートメントを含まないプロトタイプ ベースの言語です。これにより、class ステートメントを使用する言語に慣れているプログラマが混乱することがあります。ただし、JavaScript は関数をクラスとして使用します。クラスの定義は関数を定義するのと同じくらい簡単です。次の例では、Person という新しいクラスを定義します。

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

function Person() { }

オブジェクト (クラス インスタンス)

obj オブジェクトの新しいインスタンスを作成するには、ステートメント new obj を使用し、結果 (タイプは obj) を割り当てます。変数に保存しておくと、後でアクセスできるようになります。
次の例では、まず person という名前のクラスを定義し、次に 2 つのインスタンス (person1 と person2) を作成します。

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

function Person() {}
var person1 =新しい人( );
var person2 = 新しい人();

新しいインスタンス化の代替手段 Object.create も参照してください。

コンストラクター

コンストラクターはインスタンス化時 (オブジェクト インスタンスが作成された瞬間) に呼び出されます。コンストラクターはクラスのメソッドです。 JavaScript では、関数がオブジェクトのコンストラクターとして使用されるため、コンストラクター メソッドを明示的に定義する必要はありません。クラス内で宣言されたすべての動作は、インスタンス化されたときに実行されます。

コンストラクターは、オブジェクトのプロパティを設定したり、メソッドを呼び出してオブジェクトの使用を準備したりするために使用されます。この記事の後半では、別の構文を使用してクラス メソッドとその定義を追加する方法を学習します。

次の例では、パーソンがインスタンス化されると、パーソン クラスのコンストラクターによってアラート ボックスが表示されます。

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

function Person() {
alert ('インスタンス化された人物');
}
var person1 = new Person();
var person2 = new Person();

プロパティ (オブジェクト属性)

プロパティはクラス内に含まれる変数であり、各オブジェクト インスタンスにはこれらのプロパティがあります。継承が正しく機能するためには、クラス (関数) のプロトタイプ属性にプロパティを設定する必要があります。
クラス内の属性の操作は、現在のオブジェクトを参照する this キーワードを通じて行われます。クラスの外部からプロパティにアクセス (読み取りまたは書き込み) するには、InstanceName.Property という構文を使用します。これは、C、Java、およびその他の言語で使用される構文と同じです。 (プロパティ値を取得または設定するには、クラス内で this.Property 構文を使用します)。

次の例では、Person クラスの性別属性を定義し、初期化中にその属性を定義します。

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

function person(gender) {
this.gender = 性別;
alert('インスタンス化された人');
}
var person1 = new Person('男性') // 男性: 男性
var person2 = 新しい人('女性'); ; // 女性: 女
​​// person1 の性別
alert('person1 is a ' person1.gender) // person1 は男性です

メソッド

メソッドはプロパティと同じロジックに従いますが、違いは、メソッドが関数であり、関数として定義されることです。メソッドの呼び出しはプロパティへのアクセスと似ていますが、引数を指定できるメソッド名の末尾に () を追加します。メソッドを定義するとは、クラスのプロトタイプ属性の名前付き属性に関数を割り当てることです。関数に割り当てられた名前は、オブジェクト上でメソッドが呼び出される名前になります。
次の例では、Person クラスの SayHello() メソッドを定義して使用します。

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

function person(gender) {
this.gender = 性別;
alert('インスタンス化された人');
}
person.prototype.sayHello = function() {
alert('hello');
};
var person1 = new Person(' Male');
var person2 = new Person(' Female'); // Person の SayHello メソッドを呼び出します。
person1.sayHello(); // こんにちは

JavaScript では、メソッドはプロパティとしてクラス/オブジェクトにバインドされる通常の関数オブジェクトです。これは、メソッドを「コンテキスト外」で呼び出すことができることを意味します。次のサンプル コードを考えてみましょう。

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

function person (性別) {
this.gender = 性別;
}
person.prototype.sayGender = function() {
alert(this.gender);
};
var person1 = new Person(' Male');
var genderTeller = person1.sayGender;
person1.sayGender(); // '男性' に警告
genderTeller() // 未定義の警告
alert(ジェンダーテラー === person1 .sayGender); // アラート true
alert(genderTeller === person.prototype.sayGender); // アラート true

この例では、複数の概念を一度に示します。これは、JavaScript には「オブジェクトごとのメソッド」が存在しないことを示しています。メソッドへの参照はすべて、プロトタイプで最初に定義したものとまったく同じ関数を指しているからです。関数がメソッド (正確にはプロパティ) として呼び出される場合、JavaScript は現在の「オブジェクト コンテキスト」を特定の「this」変数に「バインド」します。これは、次のように関数オブジェクトの「call」メソッドを呼び出すことと同じです。

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

genderTeller.call(person1) // '男性' に警告します

詳細については、Function.call および Function.apply

を参照してください。

継承

継承は、1 つ以上のクラスの特殊バージョンであるクラスを作成するためのメソッドです。 (JavaScript は単一クラスの継承のみをサポートします)。この特殊なクラスは子と呼ばれることが多く、他のクラスは親と呼ばれることがよくあります。 JavaScript で継承を完了するには、親クラスのインスタンスをサブクラスに割り当ててから、サブクラスを特殊化する必要があります。

ヒント: JavaScript はサブクラスのprototype.constructor (プロトタイプのコンストラクター) を検出しないため、Core JavaScript 1.5 Core Reference: Global Objects:Object:prototype 属性を参照してください。そのため、この値を手動で指定する必要があります。 。

次の例では、Student クラスを Person のサブクラスとして定義します。次に、sayHello() メソッドを再定義し、sayGoodBye() メソッドを追加します。

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

// Person クラスを定義します
function Person() {}
person.prototype.walk = function() {
alter('I am walk!');
} ;
person.prototype.sayHello = function() {
alert('hello');
};
// Student クラスを定義します
function Student() {
/ / 親クラスのコンストラクターを呼び出します
Person.call(this);
}
// Inherit Person
Student.prototype = new Person() // コンストラクター ポインターを修正します。 Person
Student.prototype.constructor = Student; //sayHello メソッドを置き換えます
Student.prototype.sayHello = function() {
alert('こんにちは、私は学生です');
}
//sayGoodBye メソッドを追加します
Student.prototype.sayGoodBye = function() {
alert('goodBye');
}
varstudent1 = new Student();
student1 .sayHello( );
student1.walk();
student1.sayGoodBye(); // 継承を確認します
alert(student1 instanceof Person) // true
alert(student1 instanceof Student); // true

梱包

上記の例では、Student は Person クラスの walk() メソッドがどのように実装されているかを知る必要はありませんが、それでもこのメソッドを使用できます。特に必要がない限り、Student クラスはこのメソッドを明示的に定義する必要はありません。それを変えてください。これはカプセル化と呼ばれ、各クラスはその親クラスのメソッドを継承し、変更する内容のみを定義します。

要約

抽象化は、対処されている問題の現在の部分のモデル化を可能にするメカニズムです。これは、継承 (特殊化) または合成によって実現できます。 JavaScript は、クラスのインスタンスを他のオブジェクトのプロパティ値にすることで、継承と合成による特殊化を実現します。
JavaScript の Function クラスは Object クラスから継承し (これはモデルの特殊化を示します)、Function.prototype プロパティは Object のインスタンスです (これは合成を示します)。

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

var foo = function() {};
alert(' foo は関数です: ' (foo instanceof Function));
alert(' foo.prototype はオブジェクトです: ' (foo.prototype instanceof Object));

ポリモーフィック

すべてのメソッドとプロパティがプロトタイプ属性内で定義されるのと同様に、異なるクラスでも同じ名前のメソッドを定義できます。メソッドのスコープは、それらが定義されているクラスに限定されます。これは、2 つのクラス間に親子関係がない場合 (継承チェーン内の 1 つのクラスが他のクラスから継承していない場合) にのみ当てはまります。

ヒント

この記事で紹介するオブジェクト指向プログラミングの実装テクニックは、オブジェクト指向プログラミングの実行方法に関して非常に柔軟であるため、JavaScript にのみ適用できるわけではありません。
繰り返しますが、ここで紹介する手法は言語ハックを使用したり、他の言語でのオブジェクト理論の実装を模倣したりするものではありません。
JavaScript には他にも高度なオブジェクト指向プログラミング手法がありますが、それらはこの入門記事の範囲を超えています。