JavaScript 速習チュートリアル

JS オブジェクトコンストラクタ

1. オブジェクトコンストラクタ関数

同じ型(Type)のオブジェクトを大量に作成する必要がある場合があります。 特定のオブジェクト型を作成するには、オブジェクトコンストラクタ関数を使用します。

慣習として、コンストラクタ関数の名前は最初の文字を大文字(パスカルケース)にするのが良いプラクティスとされています。

2. オブジェクト型 Person

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

コンストラクタ関数内では、this にはまだ値がありません。
this の値は、新しいオブジェクトが作成されたときに、その新しいオブジェクト自体になります。

詳細情報:
JavaScriptオブジェクトにおける this

3. new キーワードによるインスタンス作成

new Person() を使用することで、多くの新しい Person オブジェクトを作成できます。

3.1 コード例

const myFather = new Person("ジョン", "ドウ", 50, "ブルー");
const myMother = new Person("サリー", "ラリー", 48, "グリーン");
const mySister = new Person("アンナ", "ラリー", 18, "グリーン");

const mySelf = new Person("ジョニー", "ラリー", 22, "グリーン");

4. プロパティのデフォルト値

プロパティに直接値を割り当てることで、そのコンストラクタから作成されるすべてのオブジェクトのデフォルト値を設定できます。

4.1 コード例

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
  this.nationality = "イギリス"; // デフォルト値
}

5. 個別のオブジェクトへのプロパティ追加

作成済みの特定のオブジェクトにプロパティを追加するのは簡単です。

5.1 コード例

myFather.nationality = "イギリス";

この新しいプロパティは myFather にのみ追加されます。他の Person オブジェクトには追加されません。

6. コンストラクタへのプロパティ追加

オブジェクトコンストラクタ関数に対して、直接新しいプロパティを追加することはできません

6.1 誤った例

Person.nationality = "イギリス";
// これはコンストラクタ関数オブジェクト自体にプロパティを追加するだけで、インスタンスには反映されません

新しくプロパティを追加して全てのインスタンスで共有したい場合は、コンストラクタ関数のプロトタイプ(prototype)に追加する必要があります。

6.2 正しい例(prototypeの使用)

Person.prototype.nationality = "イギリス";

7. コンストラクタ関数のメソッド

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

7.1 コード例

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

8. 個別のオブジェクトへのメソッド追加

作成済みの特定のインスタンスにメソッドを追加することも可能です。

8.1 コード例

myMother.changeName = function (name) {
  this.lastName = name;
}

この新しいメソッドは myMother にのみ追加され、他の Person オブジェクトには影響しません。

9. コンストラクタへのメソッド追加

プロパティと同様、コンストラクタ関数本体に直接メソッドを追加することはできません。以下のコードは TypeError を引き起こします。

9.1 誤った例

Person.changeName = function (name) {
  this.lastName = name;
}

myMother.changeName("ドウ");
// TypeError: myMother.changeName is not a function

コンストラクタに新しいメソッドを追加するには、プロトタイプを使用する必要があります。

9.2 正しい例(prototypeの使用)

Person.prototype.changeName = function (name) {
  this.lastName = name;
}

myMother.changeName("ドウ");

この changeName() 関数は name の値を lastName プロパティに代入します。このとき thismyMother に置き換わります。

10. JavaScriptの組み込みコンストラクタ

JavaScriptには、すべての標準オブジェクトに対応する組み込みコンストラクタが存在します。

new Object()    // 新しい Object オブジェクト
new Array()     // 新しい Array オブジェクト
new Map()       // 新しい Map オブジェクト
new Set()       // 新しい Set オブジェクト
new Date()      // 新しい Date オブジェクト
new RegExp()    // 新しい RegExp オブジェクト
new Function()  // 新しい Function オブジェクト

Math() オブジェクトはこのリストに含まれません。Math はグローバルオブジェクトであり、new キーワードを適用することはできません。

11. 知っていましたか?

パフォーマンスと可読性の観点から、組み込みコンストラクタの代わりにリテラル記法を使用することが強く推奨されます。

  • new Object() の代わりに {} を使用する
  • new Array() の代わりに [] を使用する
  • new RegExp() の代わりに /()/ を使用する
  • new Function() の代わりに function() {} を使用する

11.1 リテラル記法の例

"";            // プリミティブな文字列
0;             // プリミティブな数値
false;         // プリミティブな真偽値

{};            // オブジェクト
[];            // 配列
/()/           // 正規表現
function(){};  // 関数