Submit Search
Upload
JavaScriptでオブジェクト指向(Javascript/OOP)
•
19 likes
•
2,892 views
S
smzk
Follow
2009/06/06 ウェブテコ7発表資料
Read less
Read more
Report
Share
Report
Share
1 of 47
Download now
Download to read offline
Recommended
JavaScriptによるゲーム開発
JavaScriptによるゲーム開発
Hiroaki NAKADA
第2回PHP懇親会発表資料
第2回PHP懇親会発表資料
Masahiko Sakamoto
Web技術勉強会11回目
Web技術勉強会11回目
龍一 田中
Ext Ncs 20081029
Ext Ncs 20081029
Yuki Naotori
JSplash swf to javascript converter(2008/9/30)
JSplash swf to javascript converter(2008/9/30)
gyuque
はてなブックマークのシステムについて
はてなブックマークのシステムについて
Naoya Ito
Perlで圧縮
Perlで圧縮
Naoya Ito
ロックフリーGCLOCKページ置換アルゴリズム
ロックフリーGCLOCKページ置換アルゴリズム
Makoto Yui
Recommended
JavaScriptによるゲーム開発
JavaScriptによるゲーム開発
Hiroaki NAKADA
第2回PHP懇親会発表資料
第2回PHP懇親会発表資料
Masahiko Sakamoto
Web技術勉強会11回目
Web技術勉強会11回目
龍一 田中
Ext Ncs 20081029
Ext Ncs 20081029
Yuki Naotori
JSplash swf to javascript converter(2008/9/30)
JSplash swf to javascript converter(2008/9/30)
gyuque
はてなブックマークのシステムについて
はてなブックマークのシステムについて
Naoya Ito
Perlで圧縮
Perlで圧縮
Naoya Ito
ロックフリーGCLOCKページ置換アルゴリズム
ロックフリーGCLOCKページ置換アルゴリズム
Makoto Yui
XS Japan 2008 App Data Japanese
XS Japan 2008 App Data Japanese
The Linux Foundation
XS Japan 2008 Ganeti Japanese
XS Japan 2008 Ganeti Japanese
The Linux Foundation
Andoroid入門 Open
Andoroid入門 Open
cat sin
Ohp Seijoen H20 03 Seigyobun
Ohp Seijoen H20 03 Seigyobun
sesejun
技術トレンディセミナー JavaScriptフレームワーク活用
技術トレンディセミナー JavaScriptフレームワーク活用
terada
PyTorchLightning ベース Hydra+MLFlow+Optuna による機械学習開発環境の構築
PyTorchLightning ベース Hydra+MLFlow+Optuna による機械学習開発環境の構築
Kosuke Shinoda
090601-dotplot
090601-dotplot
ocha_kaneko
Lets Enjoy C#!
Lets Enjoy C#!
将 高野
PFI会社案内
PFI会社案内
Preferred Networks
sigfpai2009_okanohara
sigfpai2009_okanohara
Hiroshi Ono
Hyper Estraierの設計と実装
Hyper Estraierの設計と実装
Hiroshi Ono
20世紀Ruby
20世紀Ruby
Kentaro Goto
114th
114th
kulibrarians
Swig Tutorial
Swig Tutorial
Nick Chang
5.保护您的互联网应用—Azure权限管理服务
5.保护您的互联网应用—Azure权限管理服务
GaryYoung
Scala Study Session
Scala Study Session
kentaro watanabe
JavaScript再入門
JavaScript再入門
Masakazu Matsushita
Bai Giang 5
Bai Giang 5
nbb3i
徐景春:企业级开源数据库灾备体系
徐景春:企业级开源数据库灾备体系
XMourinho
EclipSky200712
EclipSky200712
Hiroki Kondo
More Related Content
What's hot
XS Japan 2008 App Data Japanese
XS Japan 2008 App Data Japanese
The Linux Foundation
XS Japan 2008 Ganeti Japanese
XS Japan 2008 Ganeti Japanese
The Linux Foundation
Andoroid入門 Open
Andoroid入門 Open
cat sin
Ohp Seijoen H20 03 Seigyobun
Ohp Seijoen H20 03 Seigyobun
sesejun
技術トレンディセミナー JavaScriptフレームワーク活用
技術トレンディセミナー JavaScriptフレームワーク活用
terada
PyTorchLightning ベース Hydra+MLFlow+Optuna による機械学習開発環境の構築
PyTorchLightning ベース Hydra+MLFlow+Optuna による機械学習開発環境の構築
Kosuke Shinoda
090601-dotplot
090601-dotplot
ocha_kaneko
Lets Enjoy C#!
Lets Enjoy C#!
将 高野
PFI会社案内
PFI会社案内
Preferred Networks
sigfpai2009_okanohara
sigfpai2009_okanohara
Hiroshi Ono
Hyper Estraierの設計と実装
Hyper Estraierの設計と実装
Hiroshi Ono
20世紀Ruby
20世紀Ruby
Kentaro Goto
114th
114th
kulibrarians
Swig Tutorial
Swig Tutorial
Nick Chang
5.保护您的互联网应用—Azure权限管理服务
5.保护您的互联网应用—Azure权限管理服务
GaryYoung
Scala Study Session
Scala Study Session
kentaro watanabe
JavaScript再入門
JavaScript再入門
Masakazu Matsushita
Bai Giang 5
Bai Giang 5
nbb3i
徐景春:企业级开源数据库灾备体系
徐景春:企业级开源数据库灾备体系
XMourinho
EclipSky200712
EclipSky200712
Hiroki Kondo
What's hot
(20)
XS Japan 2008 App Data Japanese
XS Japan 2008 App Data Japanese
XS Japan 2008 Ganeti Japanese
XS Japan 2008 Ganeti Japanese
Andoroid入門 Open
Andoroid入門 Open
Ohp Seijoen H20 03 Seigyobun
Ohp Seijoen H20 03 Seigyobun
技術トレンディセミナー JavaScriptフレームワーク活用
技術トレンディセミナー JavaScriptフレームワーク活用
PyTorchLightning ベース Hydra+MLFlow+Optuna による機械学習開発環境の構築
PyTorchLightning ベース Hydra+MLFlow+Optuna による機械学習開発環境の構築
090601-dotplot
090601-dotplot
Lets Enjoy C#!
Lets Enjoy C#!
PFI会社案内
PFI会社案内
sigfpai2009_okanohara
sigfpai2009_okanohara
Hyper Estraierの設計と実装
Hyper Estraierの設計と実装
20世紀Ruby
20世紀Ruby
114th
114th
Swig Tutorial
Swig Tutorial
5.保护您的互联网应用—Azure权限管理服务
5.保护您的互联网应用—Azure权限管理服务
Scala Study Session
Scala Study Session
JavaScript再入門
JavaScript再入門
Bai Giang 5
Bai Giang 5
徐景春:企业级开源数据库灾备体系
徐景春:企业级开源数据库灾备体系
EclipSky200712
EclipSky200712
JavaScriptでオブジェクト指向(Javascript/OOP)
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.
オブジェクト指向の基本1 //<input type=quot;textquot; id=quot;idquot; value=quot;hogequot; /> var element = document.getElementById(quot;idquot;); alert (element.value);
5
8.
オブジェクト指向の基本1 //<input type=quot;textquot; id=quot;idquot; value=quot;hogequot; /> var element = document.getElementById(quot;idquot;); alert (element.value);
getElementById が「メソッド」 5
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.
オブジェクト指向の基本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.
オブジェクト指向の基本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.
オブジェクト指向の基本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.
オブジェクト指向の分類 クラスベース 設計図(クラス)があり、
それをもとに実体(インスタンス)を作成し、 オブジェクトを操作する。 プロトタイプベース 基礎(プロトタイプ)があり、 それをもとに追加や変更をし、 オブジェクトを操作する。 JavaScriptはこちら。 8
14.
JavaScriptのオブジェクト指向 インスタンス(オブジェクト)作成
関数に「new」を付ける function hoge(){} var inst = new hoge( ); でもこれならインスタンスを作る意味がない (だってだたのオブジェクトと同じだから) 9
15.
コンストラクタ1 オブジェクトの初期値(みたいなもの) function hoge(){ this.x = quot;123quot;; this.y = function( ){ alert( this.x ); }; } var inst = new hoge( ); inst.y(); // 123
「this」は呼び出し元オブジェクトを指す「キーワード」 10
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.
イメージ
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の特性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.
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.
オーバーライド
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
Download now