ちょっと詳しくJavaScript 第3回【prototype】2011年06月24日+2011年07月01日                                   株式会社ランチェスター                     ...
ちょこっとだけ今までのおさらいJavaScriptではすべてが実体を持っている。var f = function() { … };var v = "val";最も基本となる Object もその名前で(内部的に)しっかりと存在している。aler...
プロトタイプベースJavaは「クラスベース」の言語であり、「クラス」という概念的な存在をインスタンス化(実体化)したり、継承して別のクラスを生成することでプログラミングしていく。対してJavaScriptは「プロトタイプベース」の言語である。ク...
特殊な関数の実行方法、new作成された関数を実行する際にnew演算子を付加すると、その動作が変わる仕組みとなっている。function F(){};var a = new F();var b = F();alert(a);     // 何も返...
new演算子は何をしているのかfunction F(){};のような関数がnew演算子付きで実行された場合、以下のような動作をするようにECMAScriptにて定義されていますが・・・1.   新しいオブジェクトが作成される2.   Fが持つプ...
ひとまずprototypeのことは忘れてthisfunction F(str) {                        // このようなnewで呼ばれることを        this.name = str;              ...
ひとまずprototypeのことは忘れてthis、その2function F(str) {        this.name = str;        this.show = function() { alert(this.name); }}...
prototypeを忘れていた弊害、それはvar a = new F("Yamama");                                             avar b = new F("Edogawa");      ...
そしてprototypeの出番function F(str) {        this.name = str;        F.prototype.show = function() {                           ...
prototypeチェインという仕組み                                                            理解を助けるため、実はちょっとF                           ...
Javaとかのクラスと違うところJava等の場合クラスで定義された形でしかインスタンスを作れないが、JavaScriptではインスタンス化した後に形を変えることができる。var a = new F("Yamama");var b = new F...
とあるインスタンスだけ動作を変えるfunction F(str) {        this.name = str;        F.prototype.show = function() { alert(this.name); }}var ...
内部的には・・・                    F                    prototype.show: function() { … } a                                       ...
おまけprototypeには関数だけじゃなく値を持たせることも当然可能。function Person() {        Person.prototype.name = "Gonbe";        Person.prototype.sh...
おまけ(続き)var p = new Person();p.name = "Yamama";p.show();                                               // Yamamaalert(p.has...
株式会社ランチェスター株式会社ランチェスターTEL: 03-5775-3395 Fax:03-5775-3396URL: http://www.lanches.co.jp/
Upcoming SlideShare
Loading in...5
×

ちょっと詳しくJavaScript 第3回【prototype】

1,435

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,435
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
22
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

ちょっと詳しくJavaScript 第3回【prototype】

  1. 1. ちょっと詳しくJavaScript 第3回【prototype】2011年06月24日+2011年07月01日 株式会社ランチェスター 株式会社ランチェスター TEL: 03-5775-3395 Fax:03-5775-3396 URL: http://www.lanches.co.jp/
  2. 2. ちょこっとだけ今までのおさらいJavaScriptではすべてが実体を持っている。var f = function() { … };var v = "val";最も基本となる Object もその名前で(内部的に)しっかりと存在している。alert(typeof(Object)); // functionと表示される関数を実行するには「実行可能なプロパティ」に()をつけてやる。「実行可能なプロパティ」とはFunctionオブジェクトやfunction式を使って作成されたものが代入されているもの。var f = function() { … };f(); Proprietary and Confidential to Lanchester Co.,LTD. Page 1
  3. 3. プロトタイプベースJavaは「クラスベース」の言語であり、「クラス」という概念的な存在をインスタンス化(実体化)したり、継承して別のクラスを生成することでプログラミングしていく。対してJavaScriptは「プロトタイプベース」の言語である。クラスベースのように概念的なものは存在せず、すべてがインスタンス化(実体化)されている。新しいインスタンスはすべて、原形(プロトタイプ)を基本(ベース)として作成される。なんか難しいこと書いてみたけど「(似てるけど)Javaとは違うんだよ、Javaとは!」ってことです。 Proprietary and Confidential to Lanchester Co.,LTD. Page 2
  4. 4. 特殊な関数の実行方法、new作成された関数を実行する際にnew演算子を付加すると、その動作が変わる仕組みとなっている。function F(){};var a = new F();var b = F();alert(a); // 何も返されていないはずなのに[object Object]alert(b); // 何も返されていないのでundefined Proprietary and Confidential to Lanchester Co.,LTD. Page 3
  5. 5. new演算子は何をしているのかfunction F(){};のような関数がnew演算子付きで実行された場合、以下のような動作をするようにECMAScriptにて定義されていますが・・・1. 新しいオブジェクトが作成される2. Fが持つプロトタイププロパティ(F.prototype)を取得する 1. これがオブジェクトであれば1で作成されたオブジェクトの内部的仮想プロパティ [[prototype]] (JavaScript的な実装では__proto__プロパティ)にセット 2. オブジェクトでなければ(最上位である)Objectオブジェクトのプロトタイププロパティを [[prototype]]プロパティにセット3. 通常通り関数に引数を設定し実行するが、1で作られたオブジェクトをthisとして扱う 1. 関数の返り値がオブジェクトであればそのオブジェクトを返す 2. オブジェクトでなければ1で作られたオブジェクトを返す難しいので良く分からなくても大した問題はありません!いくつかのポイントをこの後に説明します。 Proprietary and Confidential to Lanchester Co.,LTD. Page 4
  6. 6. ひとまずprototypeのことは忘れてthisfunction F(str) { // このようなnewで呼ばれることを this.name = str; // 前提とした関数を俗に「クラス」} // と呼ぶことがあるvar a = new F("Yamama"); // new付きでFが実行され、その中でオブジェクトが作られ、 // そのオブジェクトがthisとなり、そのnameにセットされ、 // そのオブジェクトがaに返されるので・・・alert(a.name); // a.nameはYamamaとなるnewなしの場合、thisは(関数の中とかじゃない場合)グローバルオブジェクト(ここではwindow)を指しているのでF("Hoge"); // this.name→window.nameとなりalert(name); // 意図しない変数としてセットされてしまう Proprietary and Confidential to Lanchester Co.,LTD. Page 5
  7. 7. ひとまずprototypeのことは忘れてthis、その2function F(str) { this.name = str; this.show = function() { alert(this.name); }}var a = new F("Yamama");a.show(); // aはプロパティとして関数を持っているので実行可能 // この、あるインスタンスが持っている「関数プロパティ」を // 俗に「メソッド」と呼ぶことがあるF("Hoge");show(); // this.show→window.showなので実行できちゃう // こうならない作り方もあるけど難しいので割愛 Proprietary and Confidential to Lanchester Co.,LTD. Page 6
  8. 8. prototypeを忘れていた弊害、それはvar a = new F("Yamama"); avar b = new F("Edogawa"); name: "Yamama" : show: function() { … }と、いっぱいインスタンス化すると、var a = { b name: "Yamama", name: "Edogawa" show: function(){ alert(this.name); } show: function() { … }};のように作られていることと同じになり、すべてのインスタンス(aやbなど)がすべて「show」というメソッドを持っていることになる。この調子でインスタンスを増やしていくとメモリ的にちょっと勿体無い。alert(a.hasOwnProperty("show")); // aがshowというプロパティを // 持っているか? // true ←当然よね Proprietary and Confidential to Lanchester Co.,LTD. Page 7
  9. 9. そしてprototypeの出番function F(str) { this.name = str; F.prototype.show = function() { // 関数名.prototype alert(this.name); // は丸暗記でおk }}var a = new F("Yamama");a.show();alert(a.hasOwnProperty("show"); // falseなんで持ってないプロパティを参照(実行)できるのか? Proprietary and Confidential to Lanchester Co.,LTD. Page 8
  10. 10. prototypeチェインという仕組み 理解を助けるため、実はちょっとF 仕様と違うところがあります。prototype.show: function() { … } 1. Fがnew付きで呼ばれ、aのイ 1 2 ンスタンスが作られる 2. aのインスタンスがこっそり持a つ[[prototype]]に元となっname: "Yamama" 4 たFへの参照が張られる←こ[[prototype]] こがちょっと違う 3. a.show()を実行したときにa 3 のインスタンスにはshowがな いので 4. [[prototype]]を参照し、そa.show(); を実行 っちのprototype.showを実行 Proprietary and Confidential to Lanchester Co.,LTD. Page 9
  11. 11. Javaとかのクラスと違うところJava等の場合クラスで定義された形でしかインスタンスを作れないが、JavaScriptではインスタンス化した後に形を変えることができる。var a = new F("Yamama");var b = new F("Edogawa");a.age = 17; // 年齢の項目をaのインスタンスだけに追加alert(a.age); // 17alert(b.age); // undefined Proprietary and Confidential to Lanchester Co.,LTD. Page 10
  12. 12. とあるインスタンスだけ動作を変えるfunction F(str) { this.name = str; F.prototype.show = function() { alert(this.name); }}var a = new F("Yamama");var b = new F("Edogawa");a.show = function() { alert("I am " + this.name); }a.show(); // I am Yamamab.show(); // Edogawadelete a.show; // aが(直接)持ってるshowを削除a.show(); // Yamama(元のようにprototypeチェインを辿る) Proprietary and Confidential to Lanchester Co.,LTD. Page 11
  13. 13. 内部的には・・・ F prototype.show: function() { … } a b show: function() { … } a.show()が呼ばれる b.show()が呼ばれる 自分の持っているshowメソッド bはshowメソッドを持っていな を実行 い [[prototype]]を辿りメソッド を実行 Proprietary and Confidential to Lanchester Co.,LTD. Page 12
  14. 14. おまけprototypeには関数だけじゃなく値を持たせることも当然可能。function Person() { Person.prototype.name = "Gonbe"; Person.prototype.show = function() { alert(this.name); }}(続く) Proprietary and Confidential to Lanchester Co.,LTD. Page 13
  15. 15. おまけ(続き)var p = new Person();p.name = "Yamama";p.show(); // Yamamaalert(p.hasOwnProperty("name")); // truealert(p.hasOwnProperty("show")); // falsevar q = new Person();q.show(); // Gonbealert(q.hasOwnProperty("name")); // falsealert(q.hasOwnProperty("show")); // false Proprietary and Confidential to Lanchester Co.,LTD. Page 14
  16. 16. 株式会社ランチェスター株式会社ランチェスターTEL: 03-5775-3395 Fax:03-5775-3396URL: http://www.lanches.co.jp/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×