JavaScript オブジェクト・プロトタイプ

❮ 前章へ 次章へ ❯

すべての JavaScript オブジェクトにはプロトタイプがあります。プロトタイプもオブジェクトです。

すべての JavaScript オブジェクトは、プロパティとメソッドをプロトタイプから継承します。

JavaScript のプロトタイプ

すべての JavaScript オブジェクトは、プロトタイプからプロパティとメソッドを継承します。

オブジェクト・リテラルまたは new Object() を使用して作成されたオブジェクトは、 Object.prototype というプロトタイプを継承します。

new Date() で作成されたオブジェクトは、Date.prototype を継承します。

Object.prototype は、プロトタイプチェーンの最上位におかれます。

全ての JavaScript オブジェクト (Date, Array, RegExp, Function, ....) は、Object.prototype を継承します。

プロトタイプの作成

オブジェクト・プロトタイプを作成するための標準的な方法は、オブジェクトのコンストラクタ関数を使用することです：

例

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
}

コンストラクタ関数を使用すると、同じプロトタイプから新しいオブジェクトを作成するために、 new キーワードを使用することができます：

例

var myFather = new Person("John", "Doe", 50, "blue");
var myMother = new Person("Sally", "Rally", 48, "green");
Try it Yourself »

コンストラクタ関数は、Person オブジェクトのプロトタイプです。
コンストラクタ関数名の最初の文字を大文字にするのは優れた慣習でお勧めします。

オブジェクトへプロパティとメソッドを追加する

時に、既存のオブジェクトに新しいプロパティ（またはメソッド）を追加したい場合があります。

時に、指定したタイプの全ての既存オブジェクトに、新しいプロパティ（またはメソッド）を追加したい場合があります。

時に、オブジェクト・プロトタイプに新しいプロパティ（またはメソッド）を追加したい場合があります。

オブジェクトへのプロパティ追加

既存のオブジェクトに、新しいプロパティを追加するのは簡単です：

例

myFather.nationality = "English";
Try it Yourself »

プロパティは、myFather に追加されます。myMother でも、他の person オブジェクトでもありません。

オブジェクトへのメソッド追加

既存のオブジェクトに、新しいメソッドを追加するのも簡単です：

例

myFather.name = function () {
    return this.firstName + " " + this.lastName;
};
Try it Yourself »

このメソッドは、myMother ではなく myFather に追加されます。

プロトタイプへのプロパティの追加

プロトタイプは、既存のオブジェクトではないので、既存のオブジェクトに新しいプロパティを追加するのと同じ方法で、 プロトタイプに新しいプロパティを追加することはできません。

例

Person.nationality = "English";
Try it Yourself »

コンストラクタに新しいプロパティを追加するには、そのプロパティをコンストラクタ関数に追加しなければなりません：

例

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
    this.nationality = "English";
}
Try it Yourself »

Prototype プロパティは、プロトタイプ値（デフォルト値）を持つことができます。

プロトタイプへのメソッドの追加

コンストラクタ関数は、メソッドを定義することもできます：

例

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
    this.name = function() {return this.firstName + " " + this.lastName;};
}
Try it Yourself »

prototype プロパティの使用

JavaScript の prototype プロパティを使用すると、既存のプロトタイプに新しいプロパティを追加することができます：

例

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
}
Person.prototype.nationality = "English";
Try it Yourself »

JavaScript の prototype プロパティは、既存のプロトタイプに新しいメソッドを追加することもできます：

例

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
}
Person.prototype.name = function() {
    return this.firstName + " " + this.lastName;
};
Try it Yourself »

自分のプロトタイプだけを変更してください。標準の JavaScript オブジェクトのプロトタイプは、決して変更しないでください。


❮ 前章へ 次章へ ❯