これは、オンラインプログラミング学習サービス「ウェブカツ!!」にて、
javascript・jQuery部中級のオンライン学習で使用しているコードになります。
3.5. プロトタイプ
jsにはクラスという概念がない(ES6ではあるけど)
クラスの代わりになるのがプロトタイプ
プロトタイプとはprototypeプロパティのこと
prototypeに何か入れておけば、インスタンス化した時に引き継げる(オブジェクト指向でいう、staticプロパティやstaticメソッドが作れる)
3.5.1 staticなメンバ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
// 前に作ったやつ var Monster = function(name, hp, attack){ this.name = name; this.hp = hp; this.attack = attack; this.doAttack = function(){ console.log(this.name + 'は' + this.attack + 'のダメージを与えた'); } } var babaa = new Monster('ババァ', 9999, 8000); var jijii = new Monster('ジジィ', 100, 1); console.log(babaa.doAttack()); console.log(jijii.doAttack()); // これでは、メソッドもコピーされて別別になっている! // 後からメソッドの中身を変更しようとするとそれぞれのインスタンスのメソッドを修正する必要がある // prototypeを使った場合 var Monster = function(name, hp, attack){ this.name = name; this.hp = hp; this.attack = attack; } Monster.prototype.doAttack = function(){ console.log(this.name + 'は' + this.attack + 'のダメージを与えた'); } var babaa = new Monster('ババァ', 9999, 8000); var jijii = new Monster('ジジィ', 100, 1); babaa.doAttack(); jijii.doAttack(); // インスタンスごとにメソッドを増やさないので、メモリの節約になる!! |
3.5.2 後から追加できる
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// インスタンス化した後にprototypeに追加しても、全部のインスタンスに反映される var Monster = function(name, hp, attack){ this.name = name; this.hp = hp; this.attack = attack; } var babaa = new Monster('ババァ', 9999, 8000); var jijii = new Monster('ジジィ', 100, 1); Monster.prototype.doAttack = function(){ console.log(this.name + 'は' + this.attack + 'のダメージを与えた'); } babaa.doAttack(); jijii.doAttack(); |
3.5.3 プロトタイプチェーン
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
// prototypeを使ってオブジェクト指向でいう「継承」ができる仕組みのこと // prototypeの中に別のインスタンスを入れておけば、そのインスタンスのプロパティやメソッドが利用できる。 // 継承元のインスタンスが変われば、継承先にも反映される var Creature = function(){}; Creature.prototype = { doAttack : function(){ console.log(this.name + 'は' + this.attack + 'のダメージを与えた'); } }; var Monster = function(name, hp, attack, cry){ this.name = name; this.hp = hp; this.attack = attack; this.doCry = function(){ console.log(cry); } }; var Human = function(name, hp, attack){ this.name = name; this.hp = hp; this.attack = attack; this.doRun = function(){ console.log(this.name + 'は全速力で逃げた'); } }; Monster.prototype = new Creature(); Human.prototype = new Creature(); var babaa = new Monster('ババァ', 9999, 8000, 'ケャァァッァァァ!!!'); var human = new Human('じじぃ', 100, 1); babaa.doCry(); babaa.doAttack(); human.doAttack(); human.doRun(); |