2009/06/06 ウェブテコ7発表資料

1. JavaScriptで
オブジェクト指向
2009/6/6
t.smzk1982@gmail.com
1

2. アジェンダ
2

3. アジェンダ
自己紹介
オブジェクト指向
JavaScriptのオブジェクト指向
オブジェクトの基本
オブジェクト指向実装
継承
オーバーロード
オーラ-ライド
プライベート変数
2

4. 自己紹介
3

5. 自己紹介
shimazakiです
主な仕事はPHPやってます
JavaScriptに興味を持ったのは去年
（最初は社内勉強会のネタ探しだった）
ついに社外勉強会でも発表することに
ちなみに発表は今回が初めてです
よろしくお願いします
3

6. JavaScriptの
オブジェクト指向
4

7. オブジェクト指向の基本１
//<input type=quot;textquot; id=quot;idquot; value=quot;hogequot; />
var element = document.getElementById(quot;idquot;);
alert (element.value);
5

8. オブジェクト指向の基本１
//<input type=quot;textquot; id=quot;idquot; value=quot;hogequot; />
var element = document.getElementById(quot;idquot;);
alert (element.value);
getElementById が「メソッド」
5

9. オブジェクト指向の基本１
//<input type=quot;textquot; id=quot;idquot; value=quot;hogequot; />
var element = document.getElementById(quot;idquot;);
alert (element.value);
getElementById が「メソッド」
value が「プロパティ」
5

10. オブジェクト指向の基本１
//<input type=quot;textquot; id=quot;idquot; value=quot;hogequot; />
var element = document.getElementById(quot;idquot;);
alert (element.value);
getElementById が「メソッド」
value が「プロパティ」
docucment が「オブジェクト」
5

11. オブジェクト指向の基本２
var obj = {}; // new Object( )のリテラル
obj.prop = quot;hogequot;;
alert( obj.prop ); //hoge
var str = quot;hogequot;;
str.prop = quot;hogequot;;
alert( str.prop ); //エラー
オブジェクトにはプロパティを追加できる
オブジェクトではないならプロパティを追加出来ない
6

12. オブジェクト指向の基本３
var obj = {}; // new Object( )のリテラル
obj.meth = function( ){ alert( quot;hogequot; ); };
obj.meth() //hoge
var str = quot;hogequot;;
str.meth = function( ){ alert( quot;hogequot; ); };
str.meth(); //エラー
オブジェクトにはメソッドを追加できる
オブジェクトではないならメソッドを追加出来ない
7

13. オブジェクト指向の分類
クラスベース
設計図（クラス）があり、
それをもとに実体（インスタンス）を作成し、
オブジェクトを操作する。
プロトタイプベース
基礎（プロトタイプ）があり、
それをもとに追加や変更をし、
オブジェクトを操作する。
JavaScriptはこちら。
8

14. JavaScriptのオブジェクト指向
インスタンス（オブジェクト）作成
関数に「new」を付ける
function hoge(){}
var inst = new hoge( );
でもこれならインスタンスを作る意味がない
（だってだたのオブジェクトと同じだから）
9

15. コンストラクタ１
オブジェクトの初期値（みたいなもの）
function hoge(){
this.x = quot;123quot;;
this.y = function( ){ alert( this.x ); };
}
var inst = new hoge( );
inst.y(); // 123
「this」は呼び出し元オブジェクトを指す「キーワード」
10

16. コンストラクタ２
でも同じことを何度も処理するのは効率が悪い
function hoge(){
this.x = quot;123quot;;
this.y = function(){ alert( this.x ); };
}
var inst1 = new hoge();
inst1.y(); // 123
var inst2 = new hoge();
inst2.x = quot;456quot;;
inst2.y(); //456
yメソッドは全く同じ（個別に所有する必要がない）
11

17. イメージ
inst1 inst2
x y() x y()
123 alert() 456 alert()
12

18. prototypeプロパティ
関数にprototypeプロパティをセットする
function hoge(){}
hoge.prototype.x = quot;123quot;;
var inst = new hoge( );
alert( inst.x ); // 123
インスタンスがprototypeプロパティを参照する
13

19. prototypeプロパティ
関数にprototypeプロパティをセットする
function hoge(){
this.x = quot;123quot;;
}
hoge.prototype.y = function( ){ alert( this.x ); };
var inst = new hoge( );
inst.y(); // 123
メソッドであっても同様に
インスタンスがprototypeプロパティを参照する
14

20. prototypeプロパティモデル
自分がプロパティを
持っていない場合は
prototypeプロパティを
hoge
参照する
[prototype]
x:123
inst1 inst2
x:456
123 456
x
15

21. JavaScriptの
オブジェクト指向の
実装
16

22. 継承
17

23. 継承
prototypeプロパティにnewで代入
function hoge(){}
hoge.prototype.x = quot;123quot;;
function foo(){}
foo.prototype = new hoge( );
var inst = new foo( );
alert( inst.x ); // 123
instはhogeのprototypeと
fooのprototypeの両方を参照する
18

24. 継承時のprototypeプロパティモデル
hoge
[prototype]
x:123
foo
inst1
x
19

25. 継承時のprototypeプロパティモデル
hoge プロパティが出現するまで、
prototypeプロパティを
さかのぼる
[prototype] →プロトタイプチェーン
x:123
foo
123
inst1
x
19

26. オブジェクトと
prototypeの
特性
20

27. オブジェクトの特性
instanceofでチェックできる
function hoge(){}
var inst = new hoge( );
alert( inst instanceof hoge );// true
alert( inst instanceof Array );// false
alert( inst instanceof Object ); // true
Objectは全てのオブジェクトが暗黙的に参照している
21

28. prototypeの特性１
hasOwnPropertyメソッドでチェックできる
function hoge(){}
hoge.prototype.x = quot;123quot;;
var inst = new hoge( );
alert( hoge.hasOwnProperty( quot;xquot; ) ); // false
inst.x = quot;456quot;;
alert( hoge.hasOwnProperty( quot;xquot; ) ); // true
22

29. prototypeの特性２
for in では取得できる
function hoge(){}
hoge.prototype.x = quot;123quot;;
var inst = new hoge( );
inst.y = quot;456quot;;
for( var i inst ){
alert( i ); // x , y を走査することが出来る
}
23

30. オーバーライド
24

31. オーバーライド
不可
（だって同じメソッド名だと上書きされちゃう）
25

32. オーバーライド
不可
（だって同じメソッド名だと上書きされちゃう）
でも方法はあるよ！
25

33. オーバーライドの実現方法
function hoge(){
this.a = quot;Aquot;;
this.b = quot;Bquot;;
}
hoge.prototype.x = function( ){ alert(this.a); };
var inst = new hoge( );
inst.x = function(){ alert(this.b); };
inst.x(); // B
hoge.prototype.x.apply( inst ); // A
applyは呼び出し元オブジェクトを明示的に指定できる
26

34. 補足：applyの説明
普通のメソッドの図式
オブジェクト メソッド
オブジェクトが主体（オブジェクトがメソッドを呼ぶ）
applyの図式
メソッド オブジェクト
メソッドが主体（メソッドがオブジェクトを指定する）
27

35. オーバーロード
28

36. オーバーロード
不可
（だって同じメソッド名だと以下略）
29

37. オーバーロード
不可
（だって同じメソッド名だと以下略）
でも方法はあるよ！
29

38. オーバーロードの実現方法
function hoge(){}
hoge.prototype.meth = function( ){
if( arguments.length == 1 ){
this.meth1( arguments[0] );
}else if( arguments.length == 2 ){
this.meth2( arguments[0], arguments[1] );
}
};
hoge.prototype.meth1 = function(arg1){};
hoge.prototype.meth2 = function(arg1, arg2){};
arguments配列には引数が入っている
30

39. プライベート
変数
31

40. プライベート変数
不可
（全部publicなので）
32

41. プライベート変数
不可
（全部publicなので）
でも方法はあるよ！
（でも参考程度で！）
32

42. プライベート変数の実現方法
function hoge(){
var x;
function setX(_x){
x = _x;
}
function getX(){
return x;
}
return {setX:setX,getX:getX};
}
var obj = hoge();
obj.setX(quot;123quot;);
alert(obj.getX()); //123
xはプロパティではない（関数の中のローカル変数）ので、
obj.xという方法ではアクセスできない
33

43. まとめ
34

44. まとめ
35

45. まとめ
メリット
prototypeを使用することでメモリ消費量
を減らせる。
オブジェクトに機能を集約させることで、
スコープを限定できる。
（→）保守しやすい。
デメリット
難しい
35

46. 質疑応答
36

47. ご静聴
ありがとう
ございました
37