Prototype

（オブジェクト指向）

意味元のオブジェクト

Prototypeとは？

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

Prototypeの具体的な使い方

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

<button onclick="const obj = new Obj(); obj.sayHello();">Prototypeの使用例</button>
<script>
function Obj() {}
Obj.prototype.sayHello = function() {
  alert('こんにちは！Prototypeを使っています。');
};
</script>

`Obj`のプロトタイプに`sayHello`メソッドを追加し、`Obj`を通じて作成されたすべてのオブジェクトがこのメソッドにアクセスできる例です。ボタンをクリックすると、追加したメソッドが呼び出されます。

プロトタイプを使用したメソッド継承例

function Animal(name) {
  this.name = name;
}

Animal.prototype.speak = function() {
  return `${this.name}が鳴きました。`;
};

const dog = new Animal('犬');
const cat = new Animal('猫');

console.log(dog.speak());
console.log(cat.speak());

// speakメソッドがプロトタイプに存在することを確認
console.log(dog.hasOwnProperty('speak'));
console.log('speak' in dog);

👇出力結果

犬が鳴きました。
猫が鳴きました。
false
true

Animalのプロトタイプにspeakメソッドを追加し、すべてのAnimalインスタンスで使用できるようにする例です。また、hasOwnPropertyとinを使用して、メソッドの存在を確認しています。

Prototypeに関するよくある質問

Q. プロトタイプとは何ですか？

A. プロトタイプは、JavaScriptオブジェクトが継承元となる別のオブジェクトを参照するための仕組みです。メソッドや属性を共有するために使用されます。

Q. プロトタイプの利点は？

A. メモリ効率が良い、動的に機能を追加できる、すべてのインスタンスで共有される、などの利点があります。

Q. クラスとの違いは？

A. クラスは構文の違いであり、内部的にはプロトタイプベースで動作します。プロトタイプはより柔軟ですが、クラスの方が直感的に書けることがあります。

JavaScriptを勉強するのにおすすめな問題集アプリの紹介

楽しくプログラミングを学ぶことで、プログラミングの理解度が深まります。『JavaScript問題集』は、楽しくJavaScriptを学ぶのに最適なアプリです。AIが出題する問題に答えていくことで、自然とJavaScriptの理解度が深まります。

AppStoreからダウンロード：https://apps.apple.com/jp/app/id6737941570

JavaScriptのPrototypeについても学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのPrototypeやプロトタイプチェーン、カプセル化、プロパティ、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。