7
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

【JavaScript】prototypeの利用

Posted at

こんにちは。

プロトタイプ(prototype)の学習をしたのでメモ。

コンストラクタにprototypeを使ってメソッドを定義すると
そのコンストラクタから定義されたオブジェクトは、そのメソッドを使うことができる

何度も定義し直さなくても使えるという便利。

function Tomato() { 
  this.color = ""; 
  this.taste = "美味しい" 
}
var tomato = new Tomato(); 
tomato.data = function() { 
  return "トマトの色は" + this.color + "で、味は" + this.taste + "です。"; 
}

tomato.data() ;
output(tomato.data()) ;

こうすると、次にTomatoコンストラクタを使うときに
.data()が使えないので、再定義をしなければいけなくなる。

そこでprototypeを利用。

function Tomato() { 
  this.color = ""; 
  this.taste = "美味しい" 
}

Tomato.prototype.data = function() {
  return "トマトの色は" + this.color + "で、味は" + this.taste + "です。";
}

var tomato1 = new Tomato();
var tomato2 = new Tomato();

alert(tomato1.data());
alert(tomato2.data());

Tomato.prototype.data = function() {
return "トマトの色は" + this.color + "で、味は" + this.taste + "です。";
}

ここでdataメソッドを定義しています。

そして、このTomato.prototype.data

【コンストラクタ】.prototype.【プロパティ/メソッド名

の様に書くだけで、.dataも再度コンストラクタを生成した際に使えるようになります。

alert(tomato1.data());
alert(tomato2.data());

上記でしっかり値がかえってくることも確認。

prototypeを指定しない場合、tomato2はエラーでかえってきます。

余談ですが、prototypeは

原型、試作品などの意味を持つ英単語。ITの分野では、ハードウェア開発の際の量産前の試作品や、動作や機能を検証するために最小限の規模で試作されたソフトウェアなどのことを意味する。

プログラミング言語の分野では、関数などの呼び出し方を既定する宣言文(プロトタイプ宣言)や、オブジェクトの雛形の定義などの意味で用いられる。

e-Wordsより

コンストラクタに機能を追加させて、新たに生成した際に
再度呼び出し可能になるってイメージでしょうかね。

それでは、これからも宜しくお願いいたします。

(問題は前回同様、CodeStudyを利用しています。)

7
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?