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

ちょっと詳しくJavaScript 第3回【prototype】
2011年06月24日＋2011年07月01日

株式会社ランチェスター
TEL: 03-5775-3395 Fax:03-5775-3396
URL: http://www.lanches.co.jp/

ちょこっとだけ今までのおさらい
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

プロトタイプベース
Javaは「クラスベース」の言語であり、「クラス」という概念的な存在をイ
ンスタンス化（実体化）したり、継承して別のクラスを生成することでプ
ログラミングしていく。

対してJavaScriptは「プロトタイプベース」の言語である。
クラスベースのように概念的なものは存在せず、すべてがインスタンス
化（実体化）されている。
新しいインスタンスはすべて、原形（プロトタイプ）を基本（ベース）として
作成される。

なんか難しいこと書いてみたけど「（似てるけど）Javaとは違うんだよ、
Javaとは！」ってことです。


特殊な関数の実行方法、new
作成された関数を実行する際にnew演算子を付加すると、その動作が
変わる仕組みとなっている。

function F(){};

var a = new F();
var b = F();

alert(a); // 何も返されていないはずなのに[object Object]
alert(b); // 何も返されていないのでundefined


new演算子は何をしているのか
function F(){};
のような関数がnew演算子付きで実行された場合、以下のような動作
をするようにECMAScriptにて定義されていますが・・・

1. 新しいオブジェクトが作成される
2. Fが持つプロトタイププロパティ（F.prototype）を取得する
1. これがオブジェクトであれば1で作成されたオブジェクトの内部的仮想プロパティ
[[prototype]] （JavaScript的な実装では__proto__プロパティ）にセット
2. オブジェクトでなければ（最上位である）Objectオブジェクトのプロトタイププロパティを
[[prototype]]プロパティにセット
3. 通常通り関数に引数を設定し実行するが、1で作られたオブジェクトをthisとして扱う
1. 関数の返り値がオブジェクトであればそのオブジェクトを返す
2. オブジェクトでなければ1で作られたオブジェクトを返す

難しいので良く分からなくても大した問題はありません！
いくつかのポイントをこの後に説明します。


ひとまずprototypeのことは忘れてthis
function 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); // 意図しない変数としてセットされてしまう


ひとまずprototypeのことは忘れてthis、その２
function F(str) {
this.name = str;
this.show = function() { alert(this.name); }
}

a.show();
// aはプロパティとして関数を持っているので実行可能
// この、あるインスタンスが持っている「関数プロパティ」を
// 俗に「メソッド」と呼ぶことがある

F("Hoge");
show(); // this.show→window.showなので実行できちゃう
// こうならない作り方もあるけど難しいので割愛


prototypeを忘れていた弊害、それは
a
var 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 ←当然よね

そしてprototypeの出番
function F(str) {
this.name = str;
F.prototype.show = function() { // 関数名.prototype
alert(this.name); // は丸暗記でおｋ
}
}

a.show();

alert(a.hasOwnProperty("show"); // false

なんで持ってないプロパティを参照（実行）できるのか？


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を実行


Javaとかのクラスと違うところ
Java等の場合クラスで定義された形でしかインスタンスを作れないが、
JavaScriptではインスタンス化した後に形を変えることができる。


a.age = 17; // 年齢の項目をaのインスタンスだけに追加

alert(a.age); // 17
alert(b.age); // undefined


とあるインスタンスだけ動作を変える
function F(str) {
this.name = str;
F.prototype.show = function() { alert(this.name); }
}


a.show = function() { alert("I am " + this.name); }

a.show(); // I am Yamama
b.show(); // Edogawa

delete a.show; // aが（直接）持ってるshowを削除
a.show(); // Yamama（元のようにprototypeチェインを辿る）

内部的には・・・
F
prototype.show: function() { … }

a b
show: function() { … }

a.show()が呼ばれる b.show()が呼ばれる
自分の持っているshowメソッド bはshowメソッドを持っていな
を実行い
[[prototype]]を辿りメソッド
を実行

おまけ
prototypeには関数だけじゃなく値を持たせることも当然可能。

function Person() {
Person.prototype.name = "Gonbe";
Person.prototype.show = function() {
alert(this.name);
}
}

（続く）


おまけ
（続き）

var p = new Person();
p.name = "Yamama";
p.show(); // Yamama
alert(p.hasOwnProperty("name")); // true
alert(p.hasOwnProperty("show")); // false

var q = new Person();
q.show(); // Gonbe
alert(q.hasOwnProperty("name")); // false
alert(q.hasOwnProperty("show")); // false


TEL: 03-5775-3395 Fax:03-5775-3396
URL: http://www.lanches.co.jp/

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

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

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

Semelhante a ちょっと詳しくJavaScript 第3回【prototype】 (20)

Mais de 株式会社ランチェスター

Mais de 株式会社ランチェスター (20)

Último

Último (10)

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