【初心者向け】JavaScriptのprototypeとthisとは?基本事項から使い方まで詳しく解説!

こんにちは、大学院でIT系の研究を専攻している、ひらりんです。

JavaScriptは、Webページにて様々な機能を搭載したり、操作する際に使用されるプログラミング言語です。JavaScriptによって、ゲーム作成やサイトを動的にすることができ、フロントエンジニアを始めとした、プログラミング初学者など、多くの人におすすめしたい言語のひとつです!

本記事では、JavaScriptのprototypeとthisについて説明します。プログラミングに少し慣れてくると、「継承」を使うことでプログラムが冗長化するのを防ぐことができ、JavaScriptではprototypeを用いることで様々なメリットがあります。しかし、他の言語と継承の仕方や記述法が異なったりするので、使いこなすのは難しいですよね。

JavaScriptのprototypeとthisについて、メソッドの使い方や基本構文に加えて、実際のプログラム使用例まで説明するので、JavaScriptの学習を始めた方や、プログラムを書く予定の人はぜひ読んでみてください!

そもそも「継承」とは?

簡単に「継承」についておさらいしておきましょう。継承とは、オブジェクト指向の言語にて登場する概念です。オブジェクトとは、属性と付随するデータが一緒になっているものを指します。このオブジェクトに持たせたい機能を、同じ機能を持っている他のオブジェクトから引き継いだり利用したいときに、継承を理解しておくととても便利です。

また、オブジェクト毎にいちいち新しく定義していると、いざ変更点が生じたときにすべて直す必要がありますし、その分エラーも発生しやすくなります。継承を使って書かれているプログラムは、継承元を直してしまえば、すべてに反映されるので、エラー発生率も抑えられるうえに、プログラムの冗長化を防げます!

thisの役割

続いて、thisについて説明します。thisは、JavaScriptに用意されている変数の1つで、様々な場面で用いられます。このthisは、コンストラクタ・メソッド・関数で呼び出されます。ここでは、コンストラクタでthisを呼び出す場面について簡単に見ていきましょう。なお、「コンストラクタって何?」という方は、次の記事等を参考にしてください!

参考 【初心者向け】JavaScriptでのクラス定義を徹底図解|定義方法&使い方ウェブカツ ブログ

オブジェクトの元からコピーした「インスタンス」は、new演算子を使って作成することができ、このインスタンスに目的・種類ごとに手を加えます。このインスタンスのプロパティを、thisを使うことで作成できるのです。実際に見てみましょう!

コンストラクタでthisを呼び出す例

ここでは、コンストラクタの「Profile」をはじめに定義しています。3~5行目でそれぞれ、thisを用いてプロパティを設定しています。これによって作成されたコンストラクタ「Profile」を参照して、インスタンス「teacher_A」と「teacher_B」をそれぞれ作成しています。その結果が、11,12行目で表示されていますね。

このように、thisは「Profile」内で使われているので、コンストラクタ自体を指していることにもなるうえ、インスタンスのプロパティの役割も担うという性質があります。

JavaScriptのprototype

ここからは、prototypeについて見ていきます。というものの、JavaScriptではprototypeを元としてすべてのオブジェクトが書かれていますので、そこまで身構える必要はありません。(笑)

このprototypeでメソッドを定義することで、効率的なプログラムを作成することができます。メリットなどについては後ほど説明するので、まずは書き方やプログラム例について確認しましょう。

prototypeの記述方法

prototypeの記述法は、このようになっています。先ほどの説明で、new演算子を使ったインスタンス作成は「コピー」だと説明しましたよね。しかし、prototypeはコピーではなく、「参照」しているにすぎないのです。

プログラム初心者のうちは、そこまで煩雑な内容ではないので、prototypeでなくnew演算子ですべて書いても、そこまで影響ありませんが、メソッドを数百・数千持つようなオブジェクトから、何個もインスタンスを作成しようとすると、メモリをたくさん使うことになります。インスタンスを作成するたびにメソッドをコピーしているので、余計なメモリを浪費していることになります。

その点、prototypeで書くと、コピーするのではなくあくまで「参照」なので、メモリの消費を防ぐことができます。では、実際のプログラム例を見てみましょう。

プログラム例

それでは、prototypeで書かれたプログラムの例を説明します。ここでは、まずはprototypeを用いてないプログラムを書き、その後にprototypeで書かれたプログラムを説明し、違いやメリットについて言及します。

prototypeを用いていない例

先ほどと同様に、prototypeを記述していないプログラム例です。ここでは、コンストラクタの「Greeting」を継承して、インスタンスのjapaneseが作成されています。

ここで、コンストラクタのGreeting内の処理についてですが、new演算子を用いるたびに、毎回空のオブジェクトが作成されてしまいます。さらに、毎回aisatsu関数を定義してしまうため、無駄なメモリを消費してしまう原因となります。

prototypeを用いた例

では、prototypeを用いたプログラムを見てみましょう。ここでは先ほどと同じ結果を表示するプログラムとなっています。コンストラクタのGreeting内から、aisatsu関数を取り出し、prototypeを用いて宣言しています。

親のプロパティより、this.wordを受け取り、それを表示する関数aisatsuを定義しています。こう書くことで、関数を無駄に定義することがなくなり、メモリの使用量も抑えられます!

まとめ

いかがでしたでしょうか?今回は、JavaScriptのprototypeとthisについて説明しました。

JavaScriptには、このように他の言語と少し異なる「参照」という役割を果たすprototypeなどが用意されています。これと、継承のcallなどを組み合わせることで、エラーの少ない効率的なプログラムを作れます。ぜひ、JavaScriptの文字列の抽出の仕方について理解し、Webサービス作成やシステム構築に活かしてください。