JavaScriptコンストラクタ入門!6つのポイントで完全理解

JavaScriptコンストラクタの理解に役立つイメージ図JS
この記事は約7分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、JavaScriptコンストラクタを使いこなすことができるようになります。

コンストラクタの基本概念から、使い方、注意点、カスタマイズ方法、そして実用的な応用例を学んでいきましょう。

JavaScriptコンストラクタとは

JavaScriptコンストラクタは、オブジェクト指向プログラミングにおいて、オブジェクトを生成・初期化するための特殊な関数です。

コンストラクタを使うことで、同じ構造を持つオブジェクトを簡単に生成できます。

コンストラクタの作り方

○基本構文

JavaScriptのコンストラクタは、通常の関数と同じく、functionキーワードを使って定義しますが、関数名の先頭は大文字で始めるのが慣習です。

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

○初期化処理

コンストラクタ内では、thisキーワードを使ってインスタンスにプロパティやメソッドを追加できます。

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

コンストラクタの使い方

○サンプルコード1:簡単なオブジェクト生成

コンストラクタを使ってオブジェクトを生成する際は、new演算子を用いてインスタンス化します。

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

var person1 = new Person("Taro", 25);
console.log(person1.name); // Output: Taro
console.log(person1.age); // Output: 25

○サンプルコード2:継承を利用したオブジェクト生成

コンストラクタを使って、既存のオブジェクトを継承した新しいオブジェクトを生成することができます。

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

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

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

var student1 = new Student("Hanako", 20, 3);
console.log(student1.name); // Output: Hanako
console.log(student1.age); // Output: 20
console.log(student1.grade); // Output: 3

注意点と対処法

○thisについて

コンストラクタ内でthisを使用する際、意図しないオブジェクトを参照することがあります。

そのため、コンストラクタを実行する際は、new演算子を使うことが重要です。

○new演算子について

new演算子を忘れてしまうと、コンストラクタが通常の関数として実行されてしまいます。

これを防ぐために、コンストラクタの先頭でインスタンスの生成をチェックすることができます。

function Person(name, age) {
  if (!(this instanceof Person)) {
    return new Person(name, age);
  }
  this.name = name;
  this.age = age;
}

カスタマイズ方法

○プロトタイプを利用したカスタマイズ

JavaScriptのオブジェクトはプロトタイプベースの継承を持っており、プロトタイプを使ってコンストラクタの振る舞いをカスタマイズできます。

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

Person.prototype.introduce = function() {
  console.log("My name is " + this.name + " and I am " + this.age + " years old.");
};

var person1 = new Person("Taro", 25);
person1.introduce(); // Output: My name is Taro and I am 25 years old.

応用例とサンプルコード

○サンプルコード3:ショッピングカートの実装

コンストラクタを使ってショッピングカートを管理するオブジェクトを実装してみましょう。

function ShoppingCart() {
  this.items = [];
}

ShoppingCart.prototype.addItem = function(item, quantity) {
  this.items.push({item: item, quantity: quantity});
};

ShoppingCart.prototype.getTotalPrice = function() {
  return this.items.reduce(function(total, currentItem) {
    return total + (currentItem.item.price * currentItem.quantity);
  }, 0);
};

var cart = new ShoppingCart();
cart.addItem({name: 'Apple', price: 100}, 3);
cart.addItem({name: 'Orange', price: 80}, 5);
console.log(cart.getTotalPrice()); // Output: 700

○サンプルコード4:イベント管理の実装

コンストラクタを用いて、イベント管理の機能を持つオブジェクトを作成します。

function EventEmitter() {
  this.events = {};
}

EventEmitter.prototype.on = function(eventName, callback) {
  if (!this.events[eventName]) {
    this.events[eventName] = [];
  }
  this.events[eventName].push(callback);
};

EventEmitter.prototype.emit = function(eventName) {
  var callbacks = this.events[eventName];
  if (callbacks) {
    callbacks.forEach(function(callback) {
      callback();
    });
  }
};

var eventEmitter = new EventEmitter();
eventEmitter.on('testEvent', function() {
  console.log('testEvent triggered');
});
eventEmitter.emit('testEvent'); // Output: testEvent triggered

まとめ

この記事では、JavaScriptコンストラクタについて初心者向けに詳しく解説しました。

コンストラクタの基本概念から使い方、注意点、カスタマイズ方法、そして実用的な応用例まで学ぶことができました。

これであなたもJavaScriptコンストラクタのエキスパートとなり、より高度なプログラミングに挑戦できるでしょう。