JavaScriptで
オブジェクト指向


       2009/6/6
 t.smzk1982@gmail.com




                        1
アジェンダ




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

            ...
自己紹介




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


               4
オブジェクト指向の基本1

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

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

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

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

var
obj
=
{};
//
new
Object( )のリテラル
obj.prop
=
quot;hogequot;;
alert(
obj.prop
);
//hoge

var
str
=
quot;hog...
オブジェクト指向の基本3

var
obj
=
{};
//
new
Object( )のリテラル
obj.meth
=
function( ){
alert(
quot;hogequot;
);
};
obj.meth()
//hoge

v...
オブジェクト指向の分類
 クラスベース
 設計図(クラス)があり、
 それをもとに実体(インスタンス)を作成し、
 オブジェクトを操作する。

 プロトタイプベース
 基礎(プロトタイプ)があり、
 それをもとに追加や変更をし、
 オブジェクト...
JavaScriptのオブジェクト指向
インスタンス(オブジェクト)作成
   関数に「new」を付ける



function
hoge(){}
var
inst
=
new
hoge( );




   でもこれならインスタンスを作る意味...
コンストラクタ1
オブジェクトの初期値(みたいなもの)


function
hoge(){



this.x
=
quot;123quot;;



this.y
=
function( ){
alert(
this.x
);
};
}
v...
コンストラクタ2
でも同じことを何度も処理するのは効率が悪い

function
hoge(){



this.x
=
quot;123quot;;



this.y
=
function(){
alert(
this.x
);
};
}
...
イメージ


       inst1                   inst2



  x              y()      x              y()
 123           alert()   456  ...
prototypeプロパティ
関数にprototypeプロパティをセットする


function
hoge(){}
hoge.prototype.x
=
quot;123quot;;
var
inst
=
new
hoge( );
alert...
prototypeプロパティ
関数にprototypeプロパティをセットする

function
hoge(){



this.x
=
quot;123quot;;
}
hoge.prototype.y
=
function( ){
aler...
prototypeプロパティモデル
 自分がプロパティを
持っていない場合は
prototypeプロパティを
                           hoge
 参照する
                          [pr...
JavaScriptの
オブジェクト指向の
     実装

               16
継承



     17
継承
prototypeプロパティにnewで代入

function
hoge(){}
hoge.prototype.x
=
quot;123quot;;
function
foo(){}
foo.prototype
=
new
hoge( )...
継承時のprototypeプロパティモデル

     hoge
   [prototype]
      x:123



      foo




     inst1




                 x

          ...
継承時のprototypeプロパティモデル

     hoge              プロパティが出現するまで、
                           prototypeプロパティを
                   ...
オブジェクトと
prototypeの
    特性

             20
オブジェクトの特性
instanceofでチェックできる

function
hoge(){}
var
inst
=
new
hoge( );
alert(
inst
instanceof
hoge
);//
true
alert(
inst
...
prototypeの特性1
hasOwnPropertyメソッドでチェックできる

function
hoge(){}
hoge.prototype.x
=
quot;123quot;;
var
inst
=
new
hoge( );
aler...
prototypeの特性2
for
in
では取得できる

function
hoge(){}
hoge.prototype.x
=
quot;123quot;;
var
inst
=
new
hoge( );
inst.y
=
quot;45...
オーバーライド



          24
オーバーライド
不可
(だって同じメソッド名だと上書きされちゃう)




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



でも方法はあるよ!




                         25
オーバーライドの実現方法

function
hoge(){


this.a
=
quot;Aquot;;


this.b
=
quot;Bquot;;
}
hoge.prototype.x
=
function( ){
alert(thi...
補足:applyの説明
普通のメソッドの図式

    オブジェクト       メソッド

    オブジェクトが主体(オブジェクトがメソッドを呼ぶ)


applyの図式

     メソッド       オブジェクト

    メソッドが...
オーバーロード



          28
オーバーロード
不可
(だって同じメソッド名だと以下略)




                    29
オーバーロード
不可
(だって同じメソッド名だと以下略)



でも方法はあるよ!




                    29
オーバーロードの実現方法
function
hoge(){}
hoge.prototype.meth
=
function( ){


if(
arguments.length
==
1
){





this.meth1(
argument...
プライベート
  変数


         31
プライベート変数
不可
(全部publicなので)




                32
プライベート変数
不可
(全部publicなので)



でも方法はあるよ!
 (でも参考程度で!)



                32
プライベート変数の実現方法
function
hoge(){


var
x;


function
setX(_x){




x
=
_x;


}


function
getX(){




return
x;


}


return...
まとめ



      34
まとめ




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


 デメリット
  難しい

             ...
質疑応答




       36
ご静聴
ありがとう
ございました

         37
Upcoming SlideShare
Loading in …5
×

JavaScriptでオブジェクト指向(Javascript/OOP)

6,827 views

Published on

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

1 Comment
19 Likes
Statistics
Notes
  • safari5.1.7で試してみました。11ページ。
    var str = 'hoge';
    str.prop = 'hoge'; // ここではエラーでない
    alert(str.prop); // undefinedだったがエラーにはならなかった

    エラーにはならなかったですが、str.propで追加できないことは確かみたいですね。
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
6,827
On SlideShare
0
From Embeds
0
Number of Embeds
28
Actions
Shares
0
Downloads
63
Comments
1
Likes
19
Embeds 0
No embeds

No notes for slide

JavaScriptでオブジェクト指向(Javascript/OOP)

  1. 1. JavaScriptで オブジェクト指向 2009/6/6 t.smzk1982@gmail.com 1
  2. 2. アジェンダ 2
  3. 3. アジェンダ 自己紹介 オブジェクト指向 JavaScriptのオブジェクト指向 オブジェクトの基本 オブジェクト指向実装 継承 オーバーロード オーラ-ライド プライベート変数 2
  4. 4. 自己紹介 3
  5. 5. 自己紹介 shimazakiです 主な仕事はPHPやってます JavaScriptに興味を持ったのは去年 (最初は社内勉強会のネタ探しだった) ついに社外勉強会でも発表することに ちなみに発表は今回が初めてです よろしくお願いします 3
  6. 6. JavaScriptの オブジェクト指向 4
  7. 7. オブジェクト指向の基本1 //<input
type=quot;textquot;
id=quot;idquot;
value=quot;hogequot;
/> var
element
=
document.getElementById(quot;idquot;); alert
(element.value); 5
  8. 8. オブジェクト指向の基本1 //<input
type=quot;textquot;
id=quot;idquot;
value=quot;hogequot;
/> var
element
=
document.getElementById(quot;idquot;); alert
(element.value); getElementById
が「メソッド」 5
  9. 9. オブジェクト指向の基本1 //<input
type=quot;textquot;
id=quot;idquot;
value=quot;hogequot;
/> var
element
=
document.getElementById(quot;idquot;); alert
(element.value); getElementById
が「メソッド」 value
が「プロパティ」 5
  10. 10. オブジェクト指向の基本1 //<input
type=quot;textquot;
id=quot;idquot;
value=quot;hogequot;
/> var
element
=
document.getElementById(quot;idquot;); alert
(element.value); getElementById
が「メソッド」 value
が「プロパティ」 docucment
が「オブジェクト」 5
  11. 11. オブジェクト指向の基本2 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. 12. オブジェクト指向の基本3 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. 13. オブジェクト指向の分類 クラスベース 設計図(クラス)があり、 それをもとに実体(インスタンス)を作成し、 オブジェクトを操作する。 プロトタイプベース 基礎(プロトタイプ)があり、 それをもとに追加や変更をし、 オブジェクトを操作する。 JavaScriptはこちら。 8
  14. 14. JavaScriptのオブジェクト指向 インスタンス(オブジェクト)作成 関数に「new」を付ける function
hoge(){} var
inst
=
new
hoge( ); でもこれならインスタンスを作る意味がない (だってだたのオブジェクトと同じだから) 9
  15. 15. コンストラクタ1 オブジェクトの初期値(みたいなもの) function
hoge(){ 


this.x
=
quot;123quot;; 


this.y
=
function( ){
alert(
this.x
);
}; } var
inst
=
new
hoge( ); inst.y();
//
123 「this」は呼び出し元オブジェクトを指す「キーワード」 10
  16. 16. コンストラクタ2 でも同じことを何度も処理するのは効率が悪い 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. 17. イメージ inst1 inst2 x y() x y() 123 alert() 456 alert() 12
  18. 18. prototypeプロパティ 関数にprototypeプロパティをセットする function
hoge(){} hoge.prototype.x
=
quot;123quot;; var
inst
=
new
hoge( ); alert(
inst.x
);
//
123 インスタンスがprototypeプロパティを参照する 13
  19. 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. 20. prototypeプロパティモデル 自分がプロパティを 持っていない場合は prototypeプロパティを hoge 参照する [prototype] x:123 inst1 inst2 x:456 123 456 x 15
  21. 21. JavaScriptの オブジェクト指向の 実装 16
  22. 22. 継承 17
  23. 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. 24. 継承時のprototypeプロパティモデル hoge [prototype] x:123 foo inst1 x 19
  25. 25. 継承時のprototypeプロパティモデル hoge プロパティが出現するまで、 prototypeプロパティを さかのぼる [prototype] →プロトタイプチェーン x:123 foo 123 inst1 x 19
  26. 26. オブジェクトと prototypeの 特性 20
  27. 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. 28. prototypeの特性1 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. 29. prototypeの特性2 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. 30. オーバーライド 24
  31. 31. オーバーライド 不可 (だって同じメソッド名だと上書きされちゃう) 25
  32. 32. オーバーライド 不可 (だって同じメソッド名だと上書きされちゃう) でも方法はあるよ! 25
  33. 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. 34. 補足:applyの説明 普通のメソッドの図式 オブジェクト メソッド オブジェクトが主体(オブジェクトがメソッドを呼ぶ) applyの図式 メソッド オブジェクト メソッドが主体(メソッドがオブジェクトを指定する) 27
  35. 35. オーバーロード 28
  36. 36. オーバーロード 不可 (だって同じメソッド名だと以下略) 29
  37. 37. オーバーロード 不可 (だって同じメソッド名だと以下略) でも方法はあるよ! 29
  38. 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. 39. プライベート 変数 31
  40. 40. プライベート変数 不可 (全部publicなので) 32
  41. 41. プライベート変数 不可 (全部publicなので) でも方法はあるよ!  (でも参考程度で!) 32
  42. 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. 43. まとめ 34
  44. 44. まとめ 35
  45. 45. まとめ メリット prototypeを使用することでメモリ消費量 を減らせる。 オブジェクトに機能を集約させることで、 スコープを限定できる。 (→)保守しやすい。 デメリット 難しい 35
  46. 46. 質疑応答 36
  47. 47. ご静聴 ありがとう ございました 37

×