JSのprototype_初心者覚書

初心者が記事などを見てメモをしています。
（記事を理解しようとしてメモをしているだけなので、下記の記事を見た方がわかりやすいです。すみません、、）

参考：
【JavaScript入門】プロトタイプ

###「prototype」とは？
「プロトタイプ」と呼ばれる最小テンプレートがあり、それをコピーして新しいオブジェクトを作るようなイメージ
オブジェクト同士の繋がりを保持する機能もあるため「継承」も簡単に行えるわけです。JavaScriptはプロトタイプベースのオブジェクト指向言語

###「prototype」の使い方

基本的なコンストラクタの作成方法

var User = function(name,age){
  this.name = name;
  this.age = age;
}
var taro = new User('太郎','12');
console.log(taro);

console.js

User {name: "太郎", age: "12"}
age: "12"
name: "太郎"
__proto__: Object

prototypeを使ってメソッド定義

• プロパティだけでなく、メソッドも一緒に定義する場合、プロトタイプでメソッドを効率的に定義することができます。

オブジェクト名.prototype.メソッド名＝function（）{}

• メソッドはどのインスタンス先でも内容は同じなので、一緒にコピーするのは無駄
• 「参照」であれば、大量のメソッドがあってもインスタンス化する度にメモリが圧迫されない

var User = function(name,age){
  this.name = name;
  this.age = age;
}
User.prototype.getName = function(){
  return this.name;
}

var User = function(name,age){
  this.name = name;
  this.age = age;

  this.getName = function(){
    return this.name;
  }
}

• 参照されないので、毎回メソッドがコピーされてメモリを無駄遣い

複雑な書き方.js

var User = function(name, age) {
    this.name = name;
    this.age = age;
}


User.prototype.getName = function() {
    return this.name;
}

User.prototype.getAge = function() {
    return this.age;
}

• オブジェクト形式でメソッドを定義すると簡潔に書ける

完結な書き方.js

var User = function(name, age) {
    this.name = name;
    this.age = age;
}

User.protptype = {
  getName: function(){
    return this.name;
  },
  getAge: function(){
    return this.age;
  }
}

プロトタイプチェーンの仕組み

var User = function() {};
var MemberA = function() {};
var MemberB = function() {};

MembarA.prototype = new User():

• 「User」と「MemberA」のプロトタイプはそれぞれ参照できる状態に

MemberB.prototype = new MemberA();

• 「MemberB」と「User」も同じように参照関係

var User = function() {};
var Member = function() {};

User.prototype.hello = function() {
    return 'こんにちは！';
}

Member.prototype = new User();

Member.prototype.hello();
"こんにちは！"