職案人

求職・歴史・仏教などについて掲載するつもりだが、自分の思いつきが多いブログだよ。適当に付き合って下さい。

Javascriptの超入門編25--プロトタイプ

2018年11月09日 | JavaScript
--プロトタイプを利用しよう--


【開発環境】
OS;Window10
Webブラウザ:Google Chrome
テキストエディタ:Brackets

【プロトタイプとは】


■メソッドを追加するには
・Javascriptには、prototypeプロパティという特殊なプロパティが用意されている。これを利用する事によって、コンストラクタのメソッドを、インスタンスから利用出来る。

書式
コンストラクタ.prototypeプロパティ.メソッド名 = メソッド用の関数();
Customer.prototype.showInfo = function(){

処 理
};

■プロトタイプベースのオブジェクト指向
1)Javascriptのオブジェクト指向のイメージ
オブジェクト指向の特徴は、プログラムの再利用が簡単


2)クラスベースのオブジェクト指向のイメージ
新たなオブジェクトを作る際に、既存のオブジェクトの機能を継承し、更に新たな機能を追加することも出来る。←クラス


3)プロトタイプチェーン
Javascriptには”基本的に”クラスは用意されてない代わりに、プロトタイプという仕組みを使って、別なオブジェクトの機能を継承する事が出来る。その機能をプロトタイプチェーンと言う。すべてのオブジェクトの祖先となるのが、objectオブジェクトである。


■prototypeプロパティでメソッドを追加してみる
例えば、Customerコンストラクタにprototypeでメソッドを追加してみると
<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>JavaScriptのテスト</title>
</head>

<body>

<script>
function Customer(num, name) {
 // プロパティ
 this.number = num;
 this.name = name;
}

// CustomerにshowInfo()メソッドを追加
Customer.prototype.showInfo = function () {
 console.log("番号:", this.number,
 " 名前:", this.name);
};

 //インスタントc1の生成
 var c1 = new Customer(1, "桜田一郎");
 c1.showInfo();
 //インスタントc2の生成
 var c2 = new Customer(2, "山田花子");
 c2.showInfo();
</script>

</body>
</html>
動作結果


◆プロトタイプチェーンの基本を理解する
なぜ、コンストラクタの「prototype.メソッド名」に関数を代入すると、それがメソッドとして使用できるのでしょうか?それを可能にしているが、プロトタイプベースのオブジェクト指向言語に特有の、プロトタイプチェーンと呼ばれる仕組みです。

1)prototypeプロパティの確認方法

Customerコンストラクタのprototypeは、3つのプロパティから構成されている事が確認出来る。
・Customerは、コンストラクタ関数
・showlnfoは、追加したメソッド
・__proto__は、継承元のオブジェクトのprototypeを参照する値で、これにより、継承元のprototypeに用意されてるメソッドを利用出来るようになります。

2)インスタンスのプロパティを確認



◆prototypeプロパティにメソッドを動的に追加する
<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>JavaScriptのテスト</title>
</head>

<body>

<script>
function Customer(num, name) {
  // プロパティ
  this.number = num;
  this.name = name;
}

 // CustomerにshowInfo()メソッドを追加
 Customer.prototype.showInfo = function () {
  console.log("番号:", this.number,
  " 名前:", this.name);
 };

  var c1 = new Customer(1, "桜田一郎");
  c1.showInfo();

 // CustomerにshowName()メソッドを追加
 Customer.prototype.showName = function () {
  console.log("名前は" + this.name + "です");←無関数
 }

 c1.showName();
 </script>


</body>
</html>
実行






コメント    この記事についてブログを書く
  • Twitterでシェアする
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする
« Javascriptの超入門編24--ユ... | トップ | Javascriptの超入門編26--プ... »
最新の画像もっと見る

コメントを投稿

JavaScript」カテゴリの最新記事