Enviar pesquisa
Carregar
[A 3]SSJSでも使える!Javascriptでオブジェクト指向プログラミング入門
•
Transferir como PPT, PDF
•
5 gostaram
•
13,338 visualizações
Kazunori Tatsuki
Seguir
XPagesDay 2014 (2014/11/18) 【A-3】「SSJSでも使える!Javascriptでオブジェクト指向プログラミング入門」で使用したスライドになります。
Leia menos
Leia mais
Tecnologia
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 98
Baixar agora
Recomendados
JavaScript入門-基礎編
JavaScript入門-基礎編
mactkg
JavaScript超入門 基礎
JavaScript超入門 基礎
tetsu6
最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!
Yuji Nojima
JavaScriptの落とし穴
JavaScriptの落とし穴
ikdysfm
JavaScriptことはじめ
JavaScriptことはじめ
Yuki Ishikawa
⑲jQueryをおぼえよう!その5
⑲jQueryをおぼえよう!その5
Nishida Kansuke
ノンプログラマーでも明日から使えるJavaScript簡単プログラム 先生:柳井 政和
ノンプログラマーでも明日から使えるJavaScript簡単プログラム 先生:柳井 政和
schoowebcampus
モテる JavaScript
モテる JavaScript
Osamu Monoe
Recomendados
JavaScript入門-基礎編
JavaScript入門-基礎編
mactkg
JavaScript超入門 基礎
JavaScript超入門 基礎
tetsu6
最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!
Yuji Nojima
JavaScriptの落とし穴
JavaScriptの落とし穴
ikdysfm
JavaScriptことはじめ
JavaScriptことはじめ
Yuki Ishikawa
⑲jQueryをおぼえよう!その5
⑲jQueryをおぼえよう!その5
Nishida Kansuke
ノンプログラマーでも明日から使えるJavaScript簡単プログラム 先生:柳井 政和
ノンプログラマーでも明日から使えるJavaScript簡単プログラム 先生:柳井 政和
schoowebcampus
モテる JavaScript
モテる JavaScript
Osamu Monoe
クライアントサイドjavascript簡単紹介
クライアントサイドjavascript簡単紹介
しくみ製作所
Ecmascript2015とその周辺について
Ecmascript2015とその周辺について
豊明 尾古
Start!! Ruby
Start!! Ruby
mitim
「Html sql」で図書館hpにアクセスしてみよう
「Html sql」で図書館hpにアクセスしてみよう
Kentaro Matsui
20120327 phpstudy58-phake
20120327 phpstudy58-phake
Katsuhiro Ogawa
Javascripでオブジェクト指向
Javascripでオブジェクト指向
1000 VICKY
TypeScript 1.0 オーバービュー
TypeScript 1.0 オーバービュー
Akira Inoue
大(中)規模Java script開発について
大(中)規模Java script開発について
Yuki Tanaka
Ruby test double
Ruby test double
Naotoshi Seo
探検!SwiftyJSON
探検!SwiftyJSON
Yuka Ezura
Prophecyを使ったユニットテスト
Prophecyを使ったユニットテスト
Akio Ishida
Ajax 応用
Ajax 応用
Katsuyuki Seino
PHP5.5新機能「ジェネレータ」初心者入門
PHP5.5新機能「ジェネレータ」初心者入門
kwatch
⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1
Nishida Kansuke
⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1
Nishida Kansuke
仕事の手離れを良くする手段としての、静的検査のあるテンプレートエンジン (YATT::Lite talk at 2014 テンプレートエンジンNight)
仕事の手離れを良くする手段としての、静的検査のあるテンプレートエンジン (YATT::Lite talk at 2014 テンプレートエンジンNight)
Hiroaki KOBAYASHI
Doma SQLテンプレートのしくみ
Doma SQLテンプレートのしくみ
Toshihiro Nakamura
Algorithm 速いアルゴリズムを書くための基礎
Algorithm 速いアルゴリズムを書くための基礎
Kenji Otsuka
Kanazawa.js.Next
Kanazawa.js.Next
dynamis
マクロでBASEを操作しよう BASE Let's operate with macros
マクロでBASEを操作しよう BASE Let's operate with macros
koutarou watanabe
Objc lambda
Objc lambda
matuura_core
JavaScriptクイックスタート
JavaScriptクイックスタート
Shumpei Shiraishi
Mais conteúdo relacionado
Mais procurados
クライアントサイドjavascript簡単紹介
クライアントサイドjavascript簡単紹介
しくみ製作所
Ecmascript2015とその周辺について
Ecmascript2015とその周辺について
豊明 尾古
Start!! Ruby
Start!! Ruby
mitim
「Html sql」で図書館hpにアクセスしてみよう
「Html sql」で図書館hpにアクセスしてみよう
Kentaro Matsui
20120327 phpstudy58-phake
20120327 phpstudy58-phake
Katsuhiro Ogawa
Javascripでオブジェクト指向
Javascripでオブジェクト指向
1000 VICKY
TypeScript 1.0 オーバービュー
TypeScript 1.0 オーバービュー
Akira Inoue
大(中)規模Java script開発について
大(中)規模Java script開発について
Yuki Tanaka
Ruby test double
Ruby test double
Naotoshi Seo
探検!SwiftyJSON
探検!SwiftyJSON
Yuka Ezura
Prophecyを使ったユニットテスト
Prophecyを使ったユニットテスト
Akio Ishida
Ajax 応用
Ajax 応用
Katsuyuki Seino
PHP5.5新機能「ジェネレータ」初心者入門
PHP5.5新機能「ジェネレータ」初心者入門
kwatch
⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1
Nishida Kansuke
⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1
Nishida Kansuke
仕事の手離れを良くする手段としての、静的検査のあるテンプレートエンジン (YATT::Lite talk at 2014 テンプレートエンジンNight)
仕事の手離れを良くする手段としての、静的検査のあるテンプレートエンジン (YATT::Lite talk at 2014 テンプレートエンジンNight)
Hiroaki KOBAYASHI
Doma SQLテンプレートのしくみ
Doma SQLテンプレートのしくみ
Toshihiro Nakamura
Algorithm 速いアルゴリズムを書くための基礎
Algorithm 速いアルゴリズムを書くための基礎
Kenji Otsuka
Kanazawa.js.Next
Kanazawa.js.Next
dynamis
マクロでBASEを操作しよう BASE Let's operate with macros
マクロでBASEを操作しよう BASE Let's operate with macros
koutarou watanabe
Mais procurados
(20)
クライアントサイドjavascript簡単紹介
クライアントサイドjavascript簡単紹介
Ecmascript2015とその周辺について
Ecmascript2015とその周辺について
Start!! Ruby
Start!! Ruby
「Html sql」で図書館hpにアクセスしてみよう
「Html sql」で図書館hpにアクセスしてみよう
20120327 phpstudy58-phake
20120327 phpstudy58-phake
Javascripでオブジェクト指向
Javascripでオブジェクト指向
TypeScript 1.0 オーバービュー
TypeScript 1.0 オーバービュー
大(中)規模Java script開発について
大(中)規模Java script開発について
Ruby test double
Ruby test double
探検!SwiftyJSON
探検!SwiftyJSON
Prophecyを使ったユニットテスト
Prophecyを使ったユニットテスト
Ajax 応用
Ajax 応用
PHP5.5新機能「ジェネレータ」初心者入門
PHP5.5新機能「ジェネレータ」初心者入門
⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1
⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1
仕事の手離れを良くする手段としての、静的検査のあるテンプレートエンジン (YATT::Lite talk at 2014 テンプレートエンジンNight)
仕事の手離れを良くする手段としての、静的検査のあるテンプレートエンジン (YATT::Lite talk at 2014 テンプレートエンジンNight)
Doma SQLテンプレートのしくみ
Doma SQLテンプレートのしくみ
Algorithm 速いアルゴリズムを書くための基礎
Algorithm 速いアルゴリズムを書くための基礎
Kanazawa.js.Next
Kanazawa.js.Next
マクロでBASEを操作しよう BASE Let's operate with macros
マクロでBASEを操作しよう BASE Let's operate with macros
Semelhante a [A 3]SSJSでも使える!Javascriptでオブジェクト指向プログラミング入門
Objc lambda
Objc lambda
matuura_core
JavaScriptクイックスタート
JavaScriptクイックスタート
Shumpei Shiraishi
Web技術勉強会 20110528
Web技術勉強会 20110528
龍一 田中
Java オブジェクトの内部構造
Java オブジェクトの内部構造
Taku Miyakawa
named_scope more detail
named_scope more detail
Kyosuke MOROHASHI
夏だからJava再入門
夏だからJava再入門
Katsumi Honda
JavaScript入門
JavaScript入門
Ryo Maruyama
JavaのGenericsとは?
JavaのGenericsとは?
Kenji Nakamura
ClassLoader Leak Patterns
ClassLoader Leak Patterns
nekop
前期講座08
前期講座08
Takenori Nakagawa
TypeScript と Visual Studio Code
TypeScript と Visual Studio Code
Akira Inoue
ちょっと詳しくJavaScript 特別編【悪霊の神々】
ちょっと詳しくJavaScript 特別編【悪霊の神々】
株式会社ランチェスター
An Internal of LINQ to Objects
An Internal of LINQ to Objects
Yoshifumi Kawai
Enumはデキる子 ~ case .Success(let value): ~
Enumはデキる子 ~ case .Success(let value): ~
Takaaki Tanaka
TypeScript 言語処理系ことはじめ
TypeScript 言語処理系ことはじめ
Yu Nobuoka
"Hello World!" から始める Calc で LibreOffice Basic
"Hello World!" から始める Calc で LibreOffice Basic
78tch
pi-15. カプセル化, MVCモデル, オブジェクトのマッピング
pi-15. カプセル化, MVCモデル, オブジェクトのマッピング
kunihikokaneko1
わかるコードを書くために For writing clean code
わかるコードを書くために For writing clean code
Eyes, JAPAN
C++勉強会
C++勉強会
mitsutaka_takeda
JavaScriptCore.framework の普通な使い方 #cocoa_kansai
JavaScriptCore.framework の普通な使い方 #cocoa_kansai
Tomohiro Kumagai
Semelhante a [A 3]SSJSでも使える!Javascriptでオブジェクト指向プログラミング入門
(20)
Objc lambda
Objc lambda
JavaScriptクイックスタート
JavaScriptクイックスタート
Web技術勉強会 20110528
Web技術勉強会 20110528
Java オブジェクトの内部構造
Java オブジェクトの内部構造
named_scope more detail
named_scope more detail
夏だからJava再入門
夏だからJava再入門
JavaScript入門
JavaScript入門
JavaのGenericsとは?
JavaのGenericsとは?
ClassLoader Leak Patterns
ClassLoader Leak Patterns
前期講座08
前期講座08
TypeScript と Visual Studio Code
TypeScript と Visual Studio Code
ちょっと詳しくJavaScript 特別編【悪霊の神々】
ちょっと詳しくJavaScript 特別編【悪霊の神々】
An Internal of LINQ to Objects
An Internal of LINQ to Objects
Enumはデキる子 ~ case .Success(let value): ~
Enumはデキる子 ~ case .Success(let value): ~
TypeScript 言語処理系ことはじめ
TypeScript 言語処理系ことはじめ
"Hello World!" から始める Calc で LibreOffice Basic
"Hello World!" から始める Calc で LibreOffice Basic
pi-15. カプセル化, MVCモデル, オブジェクトのマッピング
pi-15. カプセル化, MVCモデル, オブジェクトのマッピング
わかるコードを書くために For writing clean code
わかるコードを書くために For writing clean code
C++勉強会
C++勉強会
JavaScriptCore.framework の普通な使い方 #cocoa_kansai
JavaScriptCore.framework の普通な使い方 #cocoa_kansai
Mais de Kazunori Tatsuki
「dominoワークフローはここまで進化した!v12クラウドネイティブがもたらす新たなアプリ運用」ケートリックウェビナー2021.06.25
「dominoワークフローはここまで進化した!v12クラウドネイティブがもたらす新たなアプリ運用」ケートリックウェビナー2021.06.25
Kazunori Tatsuki
Xpagesからさらにその先へ、最新Dominoアプリケーション開発で企業のノーツアプリはこう生まれ変わる
Xpagesからさらにその先へ、最新Dominoアプリケーション開発で企業のノーツアプリはこう生まれ変わる
Kazunori Tatsuki
XPagesDay 2016 「xpagesでjava開発するぞ!」
XPagesDay 2016 「xpagesでjava開発するぞ!」
Kazunori Tatsuki
20151118パートナーソリューションセミナー2015プレゼンテーション public
20151118パートナーソリューションセミナー2015プレゼンテーション public
Kazunori Tatsuki
IBM Connect Japan 2016 「ドミノアプリをカンタンWEB化!業務アプリ作成ツール 「Aveedo」のご紹介」
IBM Connect Japan 2016 「ドミノアプリをカンタンWEB化!業務アプリ作成ツール 「Aveedo」のご紹介」
Kazunori Tatsuki
20150225 テクテクlotus技術者夜会 ibm connect ed2015フィードバック 公開用
20150225 テクテクlotus技術者夜会 ibm connect ed2015フィードバック 公開用
Kazunori Tatsuki
[A 3]Javascript oop for xpages developers - public
[A 3]Javascript oop for xpages developers - public
Kazunori Tatsuki
【C-3】ジャンボフェリー 予約システムの事例からみるXPagesを使った提案・開発の概要
【C-3】ジャンボフェリー 予約システムの事例からみるXPagesを使った提案・開発の概要
Kazunori Tatsuki
Mais de Kazunori Tatsuki
(8)
「dominoワークフローはここまで進化した!v12クラウドネイティブがもたらす新たなアプリ運用」ケートリックウェビナー2021.06.25
「dominoワークフローはここまで進化した!v12クラウドネイティブがもたらす新たなアプリ運用」ケートリックウェビナー2021.06.25
Xpagesからさらにその先へ、最新Dominoアプリケーション開発で企業のノーツアプリはこう生まれ変わる
Xpagesからさらにその先へ、最新Dominoアプリケーション開発で企業のノーツアプリはこう生まれ変わる
XPagesDay 2016 「xpagesでjava開発するぞ!」
XPagesDay 2016 「xpagesでjava開発するぞ!」
20151118パートナーソリューションセミナー2015プレゼンテーション public
20151118パートナーソリューションセミナー2015プレゼンテーション public
IBM Connect Japan 2016 「ドミノアプリをカンタンWEB化!業務アプリ作成ツール 「Aveedo」のご紹介」
IBM Connect Japan 2016 「ドミノアプリをカンタンWEB化!業務アプリ作成ツール 「Aveedo」のご紹介」
20150225 テクテクlotus技術者夜会 ibm connect ed2015フィードバック 公開用
20150225 テクテクlotus技術者夜会 ibm connect ed2015フィードバック 公開用
[A 3]Javascript oop for xpages developers - public
[A 3]Javascript oop for xpages developers - public
【C-3】ジャンボフェリー 予約システムの事例からみるXPagesを使った提案・開発の概要
【C-3】ジャンボフェリー 予約システムの事例からみるXPagesを使った提案・開発の概要
[A 3]SSJSでも使える!Javascriptでオブジェクト指向プログラミング入門
1.
【A-3】 SSJSでも使える!Javascriptで www.ktrick.com
オブジェクト指向プログラミング入門 KTrick 合同会社代表田付和慶
2.
自己紹介 • 田付和慶(たつきかずのり)
• ケートリック合同会社代表 • 米国で7年間、IBM Connect (旧Lotusphere) の オンラインソリューションをXPages で開発してきました。 • 会社のスローガン 「若い力を集結させたIBM 技術者集団をめざす!」(特にICS)
3.
XPagesでの開発を難しく感じる 原因って何でしょう?
4.
1つはやっぱりJavascript? しかも クライアントサイド?
サーバーサイド? いきなり2つも覚えろとか・・・(T_T)
5.
最近ではネットでJavascriptのサンプル 漁ってみると、 こんなんだったり、
var func1 = function(){ alert("hello!"); } こんなんだったり、 var myButton = new Button({ label: "Show me!", onClick: function(){ myDialog.set("content", “Hello!"); myDialog.show(); } }, "progbutton").startup();
6.
Javascriptっていえば、 function func1(param){
alert(param); } こうじゃないの? なんでfunction が後ろに来ちゃうの?
7.
他にも、こういったの見たことありませんか? ( function
() { //関数の中身・・・ }() ); おいおいちょっと、、、カッコ多くないか? これ、最後のカッコ本当にいるの???
8.
お作法だからしかたないんだ… で諦めていませんか?
9.
このセッションでは そういった Javascriptの構造を少し紐解いて
言語への理解を深くしてもらえたらと思っています。
10.
オブジェクト指向プログラミング そもそも、オブジェクト指向プログラミング(OOP)をすると なんのメリットがあるのでしょうか?
11.
OOPの概念や仕組みについて触れだすとこのセッションをフルに使っても時間が足らないので割愛しますが、 主なメリットとして ・プログラムの可読性が高まる
・プログラムの再利用がしやすい ・拡張や仕様変更に強くなる 結果、 テストにかかる時間を減らせ、デスマーチの確率を減らせる。 あと、オブジェクト指向が分かっているとなんだかカッコいい、という風潮がある などなど
12.
オブジェクト指向 この言葉から なにを思い浮かべますか?
13.
クラス移譲 オブジェクト指向プログラミング オーバーロード
ポリモーフィズム Java C++ 抽象クラス C# オーバーライド 継承 派生クラス インスタンス UML
14.
オブジェクト指向プログラミングの経験者なら 「クラス」 を真っ先に思いうかべた人もいると思います。
15.
では、 Javascriptにもクラスってあるの?
16.
ないです。 諸説あり
17.
クラスがなくてどうやって オブジェクト指向プログラミング(OOP)するの?
18.
その答えは…
19.
プロトタイプチェイン
20.
そもそも、Javascriptにあるのは オブジェクトのみ
21.
オブジェクト指向なんだから、 オブジェクトがあればいいのです!(強気) クラスなんて飾りです!
クラスベースの言語にはそれがわからんのです! (錯乱)
22.
そもそも、クラスってこんなの 親Class (型)
子Class (型) Object (実体) Object (実体) Object (実体) NEW NEW NEW クラスでオブジェクトの「型」をあ らかじめ定義しておき、そのクラス をもとに実体を生成して利用する。 こうすることで、クラスがもつ機能 (関数)や属性(変数)を持った実 体が量産出来る。
23.
クラスを持たない Javascriptでは…
24.
こんなイメージ Object (実体)
Object (実体) Object (実体) Object (実体) Dele gate Dele gate Dele gate プロトタイプチェイン オブジェクト(実体)を数珠つな ぎのように繋げて、 オブジェクト自身が知らない関数 や変数への呼び出しがあれば、繋 がりのある別のオブジェクトに移 譲(Delegate)することで見つか るまで遡っていくイメージ。 Dele gate Object (実体)
25.
このように、 Javascriptではクラスではなくプロトタイプチェインという機構を使い オブジェクト指向プログラミングを実装しているので、
プロトタイプベースオブジェクト指向言語 なんて呼ばれています。
26.
それでは、 ここからは実際のコードで説明をしていきます。 ※基本的にクライアントサイドJavascriptとして考えて下さい。
サーバーサイドJavascriptではalert() 等できないためですが、基本の考え方は同じです。
27.
まずは基本。
28.
Objectの作り方 var obj
= { }; 空っぽのオブジェクトが出来ました。
29.
Objectの構造 var obj
= { key: value }; プロパティ(キーと値の組み合わせ) 単純ですがこれだけです。 var obj = { name : “Apple”, size : 500 }; alert(obj.name); (例)
30.
Javascriptでは関数も「値」(第一級オブジェクト) var obj
= { func1 : function( ) {alert(“hoge”); } }; obj.func1(); // Output “hoge” var func = function( ){}; だから変数に代入できます。 そして変数から変数へコピー などの操作もできます。 (例)オブジェクトのプロパティにも代入できます。
31.
どんどんいきましょう。 いよいよプロトタイプチェインの説明です。 JavascriptのOOPの真骨頂
32.
Javascriptのプロトタイプチェインを学ぼうとするとき しばしば以下の2つのキーワードが登場します。 ➲
__proto__ ➲prototype この2つの意味の違いをしっかりと理解することが Javascript OOPを理解する上でとても重要になります
33.
➲ __proto__
34.
__proto__ ・Javascriptでは全てのオブジェクトは 内部プロパティ[[Prototype]]を持つ
という仕様があります。 内部プロパティと言っているので、本来 は外から参照出来ない性質のもの とは言いつつ、実際には__proto__というプロパティでプログラム から扱える実装が多い。(ChromeやFirefox)
35.
こんなイメージ Object (実体)
Object (実体) Object (実体) Object (実体) Dele gate Dele gate Dele gate __proto__ __proto__ __proto__ __proto__
36.
コードで確認(__proto__が使えるchrome,firefoxで動きます) 「It is
Apple」 が出力されます var obj = { name : “none”, callMe : function() { alert(“It is ” + this.name); } }; var objApple = { name : “Apple”}; objApple.__proto__ = obj; var objBlackbox = { }; objBlackbox.__proto__ = objApple; objBlackbox.callMe(); 空っぽなのに
37.
コードを順番に確認(1) 「It is
Apple」 が出力されます オブジェクトを生成。 name, callMe のプロパティを持つ objApple オブジェクトを生成。 nameプロパティに”Apple”を持つ objBlackbox オブジェクトを生成。 プロパティはなにも持たない。 var obj = { name : “none”, callMe : function() { alert(“It is ” + this.name); } }; var objApple = { name : “Apple”}; objApple.__proto__ = obj; var objBlackbox = { }; objBlackbox.__proto__ = objApple; objBlackbox.callMe();
38.
コードを順番に確認(2) オブジェクトを生成。 name,
callMe のプロパティを持つ objApple オブジェクトを生成。 nameプロパティに”Apple”を持つ objBlackbox オブジェクトを生成。 プロパティはなにも持たない。 var obj = { name : “none”, callMe : function() { alert(“It is ” + this.name); } }; objApple.__proto_ _にobjを代入 var objApple = { name : “Apple”}; objApple.__proto__ = obj; var objBlackbox = { }; objBlackbox.__proto__ = objApple; objBlackbox.callMe();
39.
コードを順番に確認(2) オブジェクトを生成。 name,
callMe のプロパティを持つ objApple オブジェクトを生成。 nameプロパティに”Apple”を持つ objBlackbox オブジェクトを生成。 プロパティはなにも持たない。 objApple.__proto_ _にobjを代入 objBlackbox.__proto__に objAppleを代入 var obj = { name : “none”, callMe : function() { alert(“It is ” + this.name); } }; var objApple = { name : “Apple”}; objApple.__proto__ = obj; var objBlackbox = { }; objBlackbox.__proto__ = objApple; objBlackbox.callMe();
40.
コードで確認(メソッドの確認) var obj
= { name : “none”, callMe : function() { alert(“It is ” + this.name); } }; var objApple = { name : “Apple”}; objApple.__proto__ = obj; var objBlackbox = { }; objBlackbox.__proto__ = objApple; objBlackbox.callMe();
41.
コードで確認(メソッドの確認) var obj
= { name : “none”, callMe : function() { alert(“It is ” + this.name); } }; var objApple = { name : “Apple”}; objApple.__proto__ = obj; var objBlackbox = { }; objBlackbox.__proto__ = objApple; (1) objBlackboxには callMe() メソッドがない objBlackbox.callMe();
42.
コードで確認(メソッドの確認) (2)__proto__にあるオブジェクトを検索(objApple) var
obj = { name : “none”, callMe : function() { alert(“It is ” + this.name); } }; var objApple = { name : “Apple”}; objApple.__proto__ = obj; var objBlackbox = { }; objBlackbox.__proto__ = objApple; (1) objBlackboxには callMe() メソッドがない objBlackbox.callMe();
43.
コードで確認(メソッドの確認) (1) objBlackboxには
callMe() メソッドがない (3) objAppleにもcallMe() メソッ ドがない (2)__proto__にあるオブジェクトを検索(objApple) var obj = { name : “none”, callMe : function() { alert(“It is ” + this.name); } }; var objApple = { name : “Apple”}; objApple.__proto__ = obj; var objBlackbox = { }; objBlackbox.__proto__ = objApple; objBlackbox.callMe();
44.
コードで確認(メソッドの確認) (4)__proto__にあるオブジェクトを検索(obj) (1)
objBlackboxには callMe() メソッドがない (3) objAppleにもcallMe() メソッ ドがない (2)__proto__にあるオブジェクトを検索(objApple) var obj = { name : “none”, callMe : function() { alert(“It is ” + this.name); } }; var objApple = { name : “Apple”}; objApple.__proto__ = obj; var objBlackbox = { }; objBlackbox.__proto__ = objApple; objBlackbox.callMe();
45.
コードで確認(メソッドの確認) (4)__proto__にあるオブジェクトを検索(obj) (1)
objBlackboxには callMe() メソッドがない (5) objにcallMe() メソッドを発見! (3) objAppleにもcallMe() メソッ ドがない (2)__proto__にあるオブジェクトを検索(objApple) var obj = { name : “none”, callMe : function() { alert(“It is ” + this.name); } }; var objApple = { name : “Apple”}; objApple.__proto__ = obj; var objBlackbox = { }; objBlackbox.__proto__ = objApple; objBlackbox.callMe();
46.
コードで確認(属性の確認) var obj
= { name : “none”, callMe : function() { alert(“It is ” + this.name); } }; var objApple = { name : “Apple”}; objApple.__proto__ = obj; var objBlackbox = { }; objBlackbox.__proto__ = objApple; (1) callMe() メソッドが呼ばれます objBlackbox.callMe();
47.
コードで確認(属性の確認) (1) callMe()
メソッドが呼ばれます (2) name 属性を参照 ※this は自身のオブジェクトを var obj = { 意味しています name : “none”, callMe : function() { alert(“It is ” + this.name); } }; var objApple = { name : “Apple”}; objApple.__proto__ = obj; var objBlackbox = { }; objBlackbox.__proto__ = objApple; objBlackbox.callMe();
48.
コードで確認(属性の確認) (1) callMe()
メソッドが呼ばれます (2) name 属性を参照 ※this は自身のオブジェクトを 意味しています (3) objBlackboxにはname属性 がない var obj = { name : “none”, callMe : function() { alert(“It is ” + this.name); } }; var objApple = { name : “Apple”}; objApple.__proto__ = obj; var objBlackbox = { }; objBlackbox.__proto__ = objApple; objBlackbox.callMe();
49.
コードで確認(属性の確認) (4)__proto__にあるオブジェクトを検索(objApple) (1)
callMe() メソッドが呼ばれます (2) name 属性を参照 ※this は自身のオブジェクトを 意味しています (3) objBlackboxにはname属性 がない var obj = { name : “none”, callMe : function() { alert(“It is ” + this.name); } }; var objApple = { name : “Apple”}; objApple.__proto__ = obj; var objBlackbox = { }; objBlackbox.__proto__ = objApple; objBlackbox.callMe();
50.
コードで確認(属性の確認) (1) callMe()
メソッドが呼ばれます (2) name 属性を参照 ※this は自身のオブジェクトを 意味しています (5) objAppleにnameを発見! (3) objBlackboxにはname属性 がない (4)__proto__にあるオブジェクトを検索(objApple) var obj = { name : “none”, callMe : function() { alert(“It is ” + this.name); } }; var objApple = { name : “Apple”}; objApple.__proto__ = obj; var objBlackbox = { }; objBlackbox.__proto__ = objApple; objBlackbox.callMe();
51.
コードで確認(属性の確認) (6) objにもname属性はあるが
、参照されない (1) callMe() メソッドが呼ばれます (2) name 属性を参照 ※this は自身のオブジェクトを 意味しています (5) objAppleにnameを発見! (3) objBlackboxにはname属性 がない (4)__proto__にあるオブジェクトを検索(objApple) var obj = { name : “none”, callMe : function() { alert(“It is ” + this.name); } }; var objApple = { name : “Apple”}; objApple.__proto__ = obj; var objBlackbox = { }; objBlackbox.__proto__ = objApple; objBlackbox.callMe();
52.
このように自オブジェクトにない機能 (関数)、属性(変数)に対して __proto__を通して移譲(Delegate)
しながらキーが見つかるまで検索して いく仕組み… これが プロトタイプチェイン Object (実体) Object (実体) あった Object (実体) Object (実体) Dele gate Dele gate Dele gate ない ない ない
53.
__proto__ の役割、ご理解頂けたでしょうか?
54.
ん???、ちょっと待って下さい __proto__ (別名:[[Prototype]])は内部プロパティだから本来、外部から扱えないもの。
じゃあ、理解できてもこんなコード使えないじゃないか? objApple.__proto__ = obj; と思いませんか?
55.
はい、使わないで下さい!
56.
実は内部的な動作を理解してもらいやすくするために var objApple
= { name : “Apple”}; objApple.__proto__ = obj; こんなコードを書きましたが、同等の処理をさせる別の記述があります。
57.
new演算子です var obj
= new Frout(“Apple”); (例)今までのサンプルコードもOOP風に書き換えが必要になってきます。 このコードに関して 後で解説します。 var Frout = function( pname ) { this.name = pname; } Frout.prototype.callMe = function() { alert(“It is ” + this.name); }; var objApple = new Frout(“Apple”);
58.
➲ prototype わすれちゃいけない、もう一つのキーワード「prototype」
__proto__でプロトタイプチェーンの理解出来たし、説明いらない、 なんて言わないで下さい。 違いを理解するのがとっても大切!
59.
prototype ・Javascriptでは、 全ての関数オブジェクトはprototype
プロパティを持つ という仕様があります。 ん? 関数オブジェクト?? 初登場です。 でも安心してください、もう知ってます。
60.
関数オブジェクトとは var func
= function( ){}; こういうの 実は、前述していました。関数であっても「値」として扱える(第一級オブジェクト) というやつです。
61.
改めまして、 全ての関数オブジェクトにはprototype プロパティを持ちます。
例えば、 var func = function( ){}; alert( func.prototype ); とすると、undefinedとはならず、prototype プロパティが存在することが確認できます。 でも、関数オブジェクトを定義した直後では、 prototypeは何も値を持たない空っぽのオブジェクトを参照しています。 では、これが何に使われるのでしょうか・・・
62.
ちょっと前で触れたnew 演算子で、 オブジェクトが生成されるときに使われます!
63.
コードで確認 (今までのサンプルコードの書き換え版) コンストラクタの定義
関数オブジェクトを生成。 name変数は未定義。 Frout オブジェクトのprototype プロパティにメソッドを追加 new演算子でobjApple オブジ ェクトを生成。 objAppleのプロトタイプチェイ ンよりFroutのprototypeを継承 var Frout = function( pname ) { this.name = pname; } Frout.prototype.callMe = function() { alert(“It is ” + this.name); }; var objApple = new Frout(“Apple”); objApple.callMe(); 「It is Apple」が出力されます。 objApple.prototype.callMe() ではないことに注目 次のスライドで 触れます
64.
var objApple =
new Frout(“Apple”); newした時の処理を擬似的に表現すると var obj = {}; obj.__proto__ = Frout.prototype; Frout.apply(obj, arguments ); return obj;
65.
newした時の処理を擬似的に表現すると var obj
= {}; obj.__proto__ = Frout.prototype; Frout.apply(obj, arguments ); return obj; (1) オブジェクトを生成 var objApple = new Frout(“Apple”);
66.
newした時の処理を擬似的に表現すると var obj
= {}; obj.__proto__ = Frout.prototype; Frout.apply(obj, arguments ); return obj; Frout.prototype.callMe = function() { alert(“It is ” + this.name); }; (1) オブジェクトを生成 Frout.prototype にはcallMe メソッ ドがあります (2) prototype プロパティを__proto__ に代入 var objApple = new Frout(“Apple”);
67.
newした時の処理を擬似的に表現すると var obj
= {}; obj.__proto__ = Frout.prototype; Frout.apply(obj, arguments ); return obj; Frout.prototype.callMe = function() { alert(“It is ” + this.name); }; (1) オブジェクトを生成 Frout.prototype にはcallMe メソッ ドがあります (2) prototype プロパティを__proto__ に代入 (3) コンストラクタ関数を実行 コンストラクタとは 関数オブジェクト生 成時に一度だけ呼び 出される関数 var objApple = new Frout(“Apple”);
68.
newした時の処理を擬似的に表現すると var obj
= {}; obj.__proto__ = Frout.prototype; Frout.apply(obj, arguments ); return obj; Frout.prototype.callMe = function() { alert(“It is ” + this.name); }; (1) オブジェクトを生成 (2) prototype プロパティを__proto__ に代入 (3) コンストラクタ関数を実行 コンストラクタとは 関数オブジェクト生 成時に一度だけ呼び 出される関数 (4) 処理したオブジェクトを返す Frout.prototype にはcallMe メソッ ドがあります var objApple = new Frout(“Apple”);
69.
newした時の処理を擬似的に表現すると var obj
= {}; obj.__proto__ = Frout.prototype; Frout.apply(obj, arguments ); return obj; Frout.prototype.callMe = function() { alert(“It is ” + this.name); }; (1) オブジェクトを生成 (2) prototype プロパティを__proto__ に代入 (3) コンストラクタ関数を実行 コンストラクタとは 関数オブジェクト生 成時に一度だけ呼び 出される関数 (4) 処理したオブジェクトを返す Frout.prototype にはcallMe メソッ ドがあります var objApple = new Frout(“Apple”); var objApple = new Frout(“Apple”);
70.
__proto__の解説で使ったサンプル newした時の処理を擬似的に表現した処理 var
obj = {}; obj.__proto__ = Frout.prototype; Frout.apply(obj, arguments ); return obj; obj をFrout.prototype だと置き換えたら どちらもcallMe() メソッドを持つことに なることが想像できます。 Frout.prototype.callMe = function() {…}; var obj = { name : “none”, callMe : function() { … } }; var objApple = { name : “Apple”}; objApple.__proto__ = obj;
71.
__proto__ とprototype の違い、ご理解頂けたでしょうか?
__proto__ prototype プロトタイプオブジェク トを格納し、 newされたときに __proto__ に代入されることで プロトタイプチェインを 作り出す。 プロトタイプチェインの 検索の仕組みそのもの。 newされたオブジェクト のprototype が自動で格 納される。 積極的に使って 行きましょう 概念の理解のために必要。 実際はnewとprototypeで実 装させよう
72.
では、ちょっと頭の体操
73.
Frout オブジェクトの準備で var
Frout = function( name ) { this.name = name; } Frout.prototype.callMe = function() { alert(“It is ” + this.name); }; と記述しましたが、 var Frout = function( name ) { this.name = name; this.callMe = function() { alert(“It is ” + this.name); }; } と書きたくなりませんか? これじゃダメでしょうか?
74.
OOPの観点から見ると良くないです でも、動きます
75.
理由: このコードでは、prototype を使わず、コンストラクタ関数の中で定義されてしまいます。
var Frout = function( name ) { this.name = name; this.callMe = function() { alert(“It is ” + this.name); }; } つまり、 newによりオブジェクトが生成される度にこのメソッド(callMe())も新たに生成されてしまいます。 対照的に、prototype内に定義されたメソッド、変数はプロトタイプチェインの中に入る仕組みに合わせて、 オブジェクトが何度newされても同一のメモリから参照されるという仕組みになっているためメモリ効率がよくなります。 Frout.prototype.callMe = function() { alert(“It is ” + this.name); };
76.
応用
77.
冒頭で紹介したサンプルコード ( function()
{ //関数の中身・・・ }() ); カッコばかりのこの関数、いったいどういった動作をするでしょう?
78.
結論を先に述べると、 無名関数を作って即時呼び出し を行っています。
79.
関数オブジェクト 関数オブジェクトが返された直後に 、その関数を呼び出している。
即時関数 を生成。 変数で受けていない 無名関数。 ( function() { //関数の中身・・・ }() ); 即時関数には2つある? //即時関数1 (function () { //関数の中身・・・ }()); //即時関数2 (function () { //関数の中身・・・ })(); どちらも即時関数として機能しますが、 JSLint(http://www.jslint.com/)では 前者のコードの方が好ましいようです。 というなんとも複雑な処理を経ていました。 ページが読み込まれた時、一度だけ処理をする、といった時に使われます。
80.
応用その2 …
81.
OOPと言うのだったらprivate 変数で隠蔽化ぐらいはしたくなりませんか? 結果は…
var Frout = function( name ) { this.name = name; } Frout.prototype.callMe = function() { alert(“It is ” + this.name); }; var objApple = new Frout(“Apple”); alert( objApple.name ); private 変数だったら 参照できないはず これって private 変数? protected 変数? public 変数?
82.
(当然ながら、)参照できてしまいますorz でもちょっとまって
83.
こんな感じで(魔)改造します var FroutModel
= (function() { // private変数 var name = “none"; (魔)改造前 // コンストラクタ var cls = function(pname){name = pname;}; // public メソッド cls.prototype.callMe = function() {alert("This is "+name);}; return cls; } () ); var Frout = function( name ) { this.name = name; } Frout.prototype.callMe = function() { alert(“It is ” + this.name); };
84.
var FroutModel =
(function() { // private変数 var name = “none"; // コンストラクタ var cls = function(pname){name = pname;}; // public メソッド cls.prototype.callMe = function() {alert("This is "+name);}; return cls; } () ); var objApple = new FroutModel(“Apple”); alert( objApple.name ); objApple.callMe(); undefined となり隠蔽化 できたことを確認。 正常に呼び出せます
85.
なんだか大分クラスっぽくなりました。
86.
ほかにも、クラスっぽい継承もこんなふうに実装出来ます。 var FroutModel
= (function() { // private変数 var name = “none"; // コンストラクタ var cls = function(pname){name = pname;}; // 親クラスの継承 cls.prototype = new BaseModel(); // public メソッド cls.prototype.callMe = function() {alert("This is "+name);}; return cls; } () ); こんな感じ。 BaseModel オブジェクトは FroutModel オブジェクトと 同様な実装をしているもの とします。
87.
コードの説明は今までの応用である程度説明できます。是非パズル感覚でチャレンジしてみてください。 var FroutModel
= (function() { // private変数 var name = “none"; // コンストラクタ var cls = function(pname){name = pname;}; // 親クラスの継承 cls.prototype = new BaseModel(); // public メソッド cls.prototype.callMe = function() {alert("This is "+name);}; return cls; } () ); (ヒント)スコープチェインのルールに よりスコープの外から中は見えない。 (ヒント)FroutModel 関数オ ブジェクトの中で別関数オブジ ェクトを生成。 (ヒント) FroutModel 内で生成 したオブジェクトを返している。 (ヒント) 即時関数である
88.
今回、 XPagesの話が1つも出ませんでしたが、
89.
今回のJavascriptの内容は クライアントサイドJavascript サーバーサイドJavascript
どちらにも通用する概念です。
90.
試しに最後のクラスっぽい実装のオブジェクトをSSJSのスクリプトライブラリにコピペして もそのまま動きます。 var
AppModel = (function() { // private変数 var name = “none"; // コンストラクタ var cls = function(pname){name = pname;}; // 親クラスの継承 cls.prototype = new BaseModel(); // public メソッド cls.prototype.func1 = function() {…}; return cls; } () ); 実際に、自分も このオブジェクトの 構成をテンプレート としてJavascript でのOOPに利用して います。
91.
スクリプトライブラリにコピペ
92.
XPagesから呼び出し 出力結果 一旦viewScopeに
newしたオブジェクトを 格納しています
93.
XPagesでOOPを利用するときの注意点 viewScopeにnewしたオブジェクトを格納しましたが、 オブジェクトを永続的に保持して利用出来るようにするため、Xspプロパティより「ページをメモリに保存する」を選択します。
94.
いかがでしたでしょうか? Javascriptのオブジェクト指向プログラミングは 理解するまで色々と試してみるのが一番だと思います。
なんせHTMLファイル1つで試せます。 <!DOCTYPE html> <html> <head> <script type="text/javascript"> // <![CDATA[ var FroutModel = (function() { // private variable var name = "hoge"; // コンストラクタ var cls = function(pname){name = pname;}; // メソッド cls.prototype.callMe = function() {alert("This is "+name);}; return cls; }()); var frt = new FroutModel("Banana"); frt.callMe(); alert("frout.name="+frt.name); // ]]> </script> </head> <body> </body> </html>
95.
気づいたらDojoもjQueryももう怖くない、かも
96.
参考• 最強オブジェクト指向言語JavaScript 再入門
株式会社フォーエンキーのノジマ様のスライド http://www.slideshare.net/yuka2py/javascript-23768378 • ブログXPagesで行こう! IBMチャンピオンリコーITソリューションズ株式会社海老原賢次さんのブログ https://www.ibm.com/developerworks/community/blogs/ebi/ • MDN > 開発者向けのWeb技術> Javascript Mozilla Developer Network 内のJavascript ポータル https://developer.mozilla.org/ja/docs/Web/JavaScript • JSLint バッドプラクティスに対して警告を出す構文チェッカー http://www.jslint.com/
97.
ご清聴ありがとうございました
98.
www.ktrick.com この文書はクリエイティブ・コモンズ表示- 継承2.1
日本ライセンスの下に提供されています。
Baixar agora