JavaScript - オブジェクトコンストラクタ
こんにちは、将来のプログラマーたち!今日は、JavaScriptのオブジェクトコンストラクタの魅力的な世界に飛び込みます。あなたの近所の親切なコンピュータサイエンスの先生として、この旅を案内するのが楽しみです。では、仮想のヘルメットをかぶり、オブジェクトの構築を始めましょう!
オブジェクトコンストラクタ
想象的して、魔法のペットショップを経営しています。あなたにはさまざまな動物がいて、それぞれ独自の特徴を持っています。それぞれの動物を個別に書き出す代わりに、動物たちの青写真を作成することはできないでしょうか?それがまさにJavaScriptのオブジェクトコンストラクタがやることです!
オブジェクトコンストラクタは、類似したプロパティとメソッドを持つオブジェクトを生成する工場のようです。まず、私たちの魔法のペットのための簡単なコンストラクタを作成してみましょう:
function MagicalPet(name, species, specialPower) {
this.name = name;
this.species = species;
this.specialPower = specialPower;
this.introduce = function() {
console.log(`こんにちは、私は${this.name}です。${this.species}で${this.specialPower}の力を持っています!`);
};
}
これを分解してみましょう:
-
MagicalPet
という関数を定義し、名前、種族、特別な力をパラメータとして受け取ります。 - 関数内で、
this
を使用してこれらのパラメータをオブジェクトのプロパティとして割り当てます。 -
introduce
というメソッドも定義し、自己紹介をプリントします。
新しい魔法のペットを作成するには、new
キーワードを使用します:
let fluffy = new MagicalPet("Fluffy", "龍", "火を吐く");
fluffy.introduce(); // 出力: こんにちは、私はFluffyです。龍で火を吐く力を持っています!
これで、オブジェクトコンストラクタを使用して最初の魔法のペットを作成しました。素晴らしいですね?
コンストラクタにプロパティまたはメソッドを追加する
時々、コンストラクタを作成した後で、重要なプロパティやメソッドを追加するのを忘れたことに気づくかもしれません。心配しないでください!プロトタイプを使用して後から追加することができます。
私たちのMagicalPet
にage
プロパティとbirthday
メソッドを追加してみましょう:
MagicalPet.prototype.age = 0;
MagicalPet.prototype.birthday = function() {
this.age++;
console.log(`${this.name}は今${this.age}歳になりました!`);
};
これで、すべての魔法のペットは年齢(0から始まる)を持ち、誕生日を祝えるようになります:
fluffy.birthday(); // 出力: Fluffyは今1歳になりました!
fluffy.birthday(); // 出力: Fluffyは今2歳になりました!
JavaScript オブジェクトプロトタイプ
「プロトタイプ」という刚刚使ったやつについて、何か気になりますか?それでは、それをすべてのオブジェクトが持ち歩く共有のバックパックのように考えてください。このバックパックに入れたものは、すべてのオブジェクトにアクセス可能です。
プロトタイプにプロパティやメソッドを追加すると、それらを個々のオブジェクトに直接追加するよりもメモリ効率が高くなります。多くのオブジェクトを持っている場合に特に効果的です。
以下は視覚的な表現です:
MagicalPet コンストラクタ
|
v
プロトタイプ (共有のバックパック)
- age
- birthday()
|
v
個々の MagicalPet オブジェクト
- name
- species
- specialPower
- introduce()
JavaScriptのビルトインオブジェクトコンストラクタ
JavaScriptには、コードの冒険でよく使用するいくつかのビルトインオブジェクトコンストラクタがあります。いくつか見てみましょう:
コンストラクタ | 説明 | 例 |
---|---|---|
String() | 文字列オブジェクトを作成 | let greeting = new String("Hello"); |
Number() | 数値オブジェクトを作成 | let age = new Number(25); |
Boolean() | ボOLEANオブジェクトを作成 | let isAwesome = new Boolean(true); |
Array() | 配列オブジェクトを作成 | let fruits = new Array("apple", "banana", "cherry"); |
Object() | 一般的なオブジェクトを作成 | let emptyObj = new Object(); |
Date() | 日付オブジェクトを作成 | let today = new Date(); |
これらのコンストラクタは利用可能ですが、文字列、数値、ブール値などのプリミティブな型では、リテラルを使用する方が一般的で効率的です:
let greeting = "Hello"; // new String("Hello") よりも推奨
let age = 25; // new Number(25) よりも推奨
let isAwesome = true; // new Boolean(true) よりも推奨
let fruits = ["apple", "banana"]; // new Array("apple", "banana") よりも推奨
しかし、Date()
などのコンストラクタは以下のように一般的に使用されます:
let birthday = new Date("1990-01-01");
console.log(birthday.getFullYear()); // 出力: 1990
そして、あなたたち若い魔法の代码の魔法使いたち!私たちはJavaScriptのオブジェクトコンストラクタの領域を旅しました。魔法のプロパティやメソッドを追加し、不思議なプロトタイプを探求し、いくつかのビルトインコンストラクタをのぞきました。
思い出してください、練習は完璧に近づけます。自分でコンストラクタを作成してみてください。もしかしたら、さまざまな魔法の呪文や魔法の生物のためのものかもしれません。これらの概念を遊びながら、自然なものになるまで続けましょう。
コードを続け、学び続け、そして最も重要なのは、楽しみ続けましょう!次のレッスンまで、あなたのコードがバグフリーでコンパイルが早いことを祈っています!
Credits: Image by storyset