JavaScript オブジェクト指向プログラミング入門： new キーワードとコンストラクタ関数

2024-04-02

JavaScript の new キーワードとは？

コンストラクタ関数を呼び出す

new キーワードと関数名を組み合わせることで、その関数を コンストラクタ関数 として呼び出すことができます。コンストラクタ関数は、オブジェクト生成時に実行される特別な関数です。

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const person1 = new Person("山田太郎", 30);
const person2 = new Person("佐藤花子", 25);

console.log(person1.name, person1.age); // 山田太郎 30
console.log(person2.name, person2.age); // 佐藤花子 25

上記の例では、Person というコンストラクタ関数を定義し、new キーワードを使って person1 と person2 というオブジェクトを生成しています。

コンストラクタ関数の利点:

オブジェクト生成時に共通の処理をまとめられる
オブジェクトにプロパティとメソッドを自由に設定できる
オブジェクトの初期化を簡単に行える

プロトタイプチェーンを利用する

JavaScript のオブジェクトは プロトタイプチェーン という仕組みを利用して、プロパティやメソッドを継承することができます。

new キーワードを使ってオブジェクトを生成すると、そのオブジェクトは コンストラクタ関数のプロトタイプ を継承します。

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayHello = function() {
  console.log(`こんにちは、私の名前は${this.name}です。`);
};

const person1 = new Person("山田太郎", 30);

person1.sayHello(); // こんにちは、私の名前は山田太郎です。

上記の例では、Person コンストラクタ関数のプロトタイプに sayHello メソッドを追加しています。person1 オブジェクトは Person コンストラクタ関数のプロトタイプを継承しているので、sayHello メソッドを呼び出すことができます。

プロトタイプチェーンの利点:

コードの冗長性を減らせる
オブジェクトの機能を拡張しやすい
メモリ使用量を削減できる

その他の利点

オブジェクトの型を安全にチェックできる
拡張性のあるコードを書きやすい

new キーワードは、JavaScript でオブジェクトを生成する際に非常に便利な演算子です。コンストラクタ関数と組み合わせることで、オブジェクト生成時に共通の処理を実行したり、プロトタイプチェーンを利用してオブジェクトの機能を拡張したりすることができます。

new キーワードを理解することで、より効率的で堅牢な JavaScript コードを書くことができます。

コンストラクタ関数と new キーワード

function Person(name, age) {
  this.name = name;
  this.age = age;

  this.sayHello = function() {
    console.log(`こんにちは、私の名前は${this.name}です。`);
  };
}

const person1 = new Person("山田太郎", 30);
const person2 = new Person("佐藤花子", 25);

console.log(person1.name, person1.age); // 山田太郎 30
console.log(person2.name, person2.age); // 佐藤花子 25

person1.sayHello(); // こんにちは、私の名前は山田太郎です。
person2.sayHello(); // こんにちは、私の名前は佐藤花子です。

プロトタイプチェーン

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayHello = function() {
  console.log(`こんにちは、私の名前は${this.name}です。`);
};

const person1 = new Person("山田太郎", 30);

person1.sayHello(); // こんにちは、私の名前は山田太郎です。

// Person.prototype オブジェクトに直接プロパティを追加することもできます
Person.prototype.favoriteColor = "青";

console.log(person1.favoriteColor); // 青

その他の例

new キーワードを使って、組み込みオブジェクトを生成することもできます。

const date = new Date();
console.log(date.toString()); // 2023-11-14T07:27:53.524Z

const error = new Error("エラーが発生しました");
console.log(error.message); // エラーが発生しました

オブジェクト生成の他の方法

オブジェクトリテラルは、最もシンプルで直感的な方法です。

const person = {
  name: "山田太郎",
  age: 30,
  sayHello: function() {
    console.log(`こんにちは、私の名前は${this.name}です。`);
  },
};

console.log(person.name, person.age); // 山田太郎 30
person.sayHello(); // こんにちは、私の名前は山田太郎です。

Object.create() メソッドは、指定されたオブジェクトをプロトタイプとして、新しいオブジェクトを作成します。

const personPrototype = {
  sayHello: function() {
    console.log(`こんにちは、私の名前は${this.name}です。`);
  },
};

const person = Object.create(personPrototype);
person.name = "山田太郎";
person.age = 30;

console.log(person.name, person.age); // 山田太郎 30
person.sayHello(); // こんにちは、私の名前は山田太郎です。

クラス

ES6 以降では、クラスを使ってオブジェクトを生成することができます。

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(`こんにちは、私の名前は${this.name}です。`);
  }
}

const person = new Person("山田太郎", 30);

console.log(person.name, person.age); // 山田太郎 30
person.sayHello(); // こんにちは、私の名前は山田太郎です。