Soumettre la recherche
Mettre en ligne
Web技術勉強会 20110514
•
0 j'aime
•
1,050 vues
龍一 田中
Suivre
プロトタイプベースオブジェクト指向プログラミング(親子関係を維持した継承)
Lire moins
Lire la suite
Technologie
Signaler
Partager
Signaler
Partager
1 sur 20
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
ジーノ先生の文系的オブジェクト指向(1) - ジーノ誕生
ジーノ先生の文系的オブジェクト指向(1) - ジーノ誕生
Satoru Kodaira
メタプログラミングってなに?
メタプログラミングってなに?
KazukiWata
俺のManaged Objectの使い方は間違っていた
俺のManaged Objectの使い方は間違っていた
Shingo Sato
オブジェクト指向勉強会(基礎)
オブジェクト指向勉強会(基礎)
nomuken
本当のオブジェクト指向は可読性を上げる
本当のオブジェクト指向は可読性を上げる
Wataru Terada
第2回勉強会 オブジェクト指向
第2回勉強会 オブジェクト指向
hakoika-itwg
第3回勉強会 オブジェクト指向
第3回勉強会 オブジェクト指向
hakoika-itwg
Flutter 仕事で使いたい
Flutter 仕事で使いたい
nemui_fujiu
Recommandé
ジーノ先生の文系的オブジェクト指向(1) - ジーノ誕生
ジーノ先生の文系的オブジェクト指向(1) - ジーノ誕生
Satoru Kodaira
メタプログラミングってなに?
メタプログラミングってなに?
KazukiWata
俺のManaged Objectの使い方は間違っていた
俺のManaged Objectの使い方は間違っていた
Shingo Sato
オブジェクト指向勉強会(基礎)
オブジェクト指向勉強会(基礎)
nomuken
本当のオブジェクト指向は可読性を上げる
本当のオブジェクト指向は可読性を上げる
Wataru Terada
第2回勉強会 オブジェクト指向
第2回勉強会 オブジェクト指向
hakoika-itwg
第3回勉強会 オブジェクト指向
第3回勉強会 オブジェクト指向
hakoika-itwg
Flutter 仕事で使いたい
Flutter 仕事で使いたい
nemui_fujiu
Web技術勉強会12回目
Web技術勉強会12回目
龍一 田中
Web技術勉強会 第25回
Web技術勉強会 第25回
龍一 田中
Web技術勉強会9回目(Slideshare用)
Web技術勉強会9回目(Slideshare用)
龍一 田中
Web技術勉強会 第26回
Web技術勉強会 第26回
龍一 田中
Web技術勉強会10回目(Slideshare用)
Web技術勉強会10回目(Slideshare用)
龍一 田中
Web技術勉強会6回目
Web技術勉強会6回目
龍一 田中
Web技術勉強会 第29回
Web技術勉強会 第29回
龍一 田中
Web技術勉強会 20100424
Web技術勉強会 20100424
龍一 田中
Web技術勉強会 20110528
Web技術勉強会 20110528
龍一 田中
魔法を使わないプログラミング(web公開版)
魔法を使わないプログラミング(web公開版)
hajikami
Alluren of prototype-based OOP
Alluren of prototype-based OOP
azuma satoshi
最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!
Yuji Nojima
オブジェクト指向入門1
オブジェクト指向入門1
Kenta Hattori
Howtoよいデザイン
Howtoよいデザイン
Hiroki Yagita
仕事でも Groovy を使おう!
仕事でも Groovy を使おう!
Oda Shinsuke
ユニットテスト_2日目
ユニットテスト_2日目
Yoshiki Shibukawa
JavaScriptおよびXPages Vote技術解説
JavaScriptおよびXPages Vote技術解説
賢次 海老原
WebSocketでリアルタイム処理をする
WebSocketでリアルタイム処理をする
龍一 田中
Web技術勉強会 20130525 - Google Cloud Messaging入門
Web技術勉強会 20130525 - Google Cloud Messaging入門
龍一 田中
Web技術勉強会 20120728
Web技術勉強会 20120728
龍一 田中
Web技術勉強会 20120609
Web技術勉強会 20120609
龍一 田中
Web技術勉強会 20120114 - JenkinsでJava/PHP/Ruby/JavaScriptをビルドする
Web技術勉強会 20120114 - JenkinsでJava/PHP/Ruby/JavaScriptをビルドする
龍一 田中
Contenu connexe
En vedette
Web技術勉強会12回目
Web技術勉強会12回目
龍一 田中
Web技術勉強会 第25回
Web技術勉強会 第25回
龍一 田中
Web技術勉強会9回目(Slideshare用)
Web技術勉強会9回目(Slideshare用)
龍一 田中
Web技術勉強会 第26回
Web技術勉強会 第26回
龍一 田中
Web技術勉強会10回目(Slideshare用)
Web技術勉強会10回目(Slideshare用)
龍一 田中
Web技術勉強会6回目
Web技術勉強会6回目
龍一 田中
Web技術勉強会 第29回
Web技術勉強会 第29回
龍一 田中
Web技術勉強会 20100424
Web技術勉強会 20100424
龍一 田中
En vedette
(8)
Web技術勉強会12回目
Web技術勉強会12回目
Web技術勉強会 第25回
Web技術勉強会 第25回
Web技術勉強会9回目(Slideshare用)
Web技術勉強会9回目(Slideshare用)
Web技術勉強会 第26回
Web技術勉強会 第26回
Web技術勉強会10回目(Slideshare用)
Web技術勉強会10回目(Slideshare用)
Web技術勉強会6回目
Web技術勉強会6回目
Web技術勉強会 第29回
Web技術勉強会 第29回
Web技術勉強会 20100424
Web技術勉強会 20100424
Similaire à Web技術勉強会 20110514
Web技術勉強会 20110528
Web技術勉強会 20110528
龍一 田中
魔法を使わないプログラミング(web公開版)
魔法を使わないプログラミング(web公開版)
hajikami
Alluren of prototype-based OOP
Alluren of prototype-based OOP
azuma satoshi
最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!
Yuji Nojima
オブジェクト指向入門1
オブジェクト指向入門1
Kenta Hattori
Howtoよいデザイン
Howtoよいデザイン
Hiroki Yagita
仕事でも Groovy を使おう!
仕事でも Groovy を使おう!
Oda Shinsuke
ユニットテスト_2日目
ユニットテスト_2日目
Yoshiki Shibukawa
JavaScriptおよびXPages Vote技術解説
JavaScriptおよびXPages Vote技術解説
賢次 海老原
Similaire à Web技術勉強会 20110514
(9)
Web技術勉強会 20110528
Web技術勉強会 20110528
魔法を使わないプログラミング(web公開版)
魔法を使わないプログラミング(web公開版)
Alluren of prototype-based OOP
Alluren of prototype-based OOP
最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!
オブジェクト指向入門1
オブジェクト指向入門1
Howtoよいデザイン
Howtoよいデザイン
仕事でも Groovy を使おう!
仕事でも Groovy を使おう!
ユニットテスト_2日目
ユニットテスト_2日目
JavaScriptおよびXPages Vote技術解説
JavaScriptおよびXPages Vote技術解説
Plus de 龍一 田中
WebSocketでリアルタイム処理をする
WebSocketでリアルタイム処理をする
龍一 田中
Web技術勉強会 20130525 - Google Cloud Messaging入門
Web技術勉強会 20130525 - Google Cloud Messaging入門
龍一 田中
Web技術勉強会 20120728
Web技術勉強会 20120728
龍一 田中
Web技術勉強会 20120609
Web技術勉強会 20120609
龍一 田中
Web技術勉強会 20120114 - JenkinsでJava/PHP/Ruby/JavaScriptをビルドする
Web技術勉強会 20120114 - JenkinsでJava/PHP/Ruby/JavaScriptをビルドする
龍一 田中
Web技術勉強会 20111112
Web技術勉強会 20111112
龍一 田中
Web技術勉強会 20110723
Web技術勉強会 20110723
龍一 田中
Web技術勉強会 20110611
Web技術勉強会 20110611
龍一 田中
Web技術勉強会 20100925
Web技術勉強会 20100925
龍一 田中
Web技術勉強会 第38回
Web技術勉強会 第38回
龍一 田中
Web技術勉強会 第37回
Web技術勉強会 第37回
龍一 田中
Web技術勉強会 第34回
Web技術勉強会 第34回
龍一 田中
Web技術勉強会 第33回
Web技術勉強会 第33回
龍一 田中
Web技術勉強会 第31回
Web技術勉強会 第31回
龍一 田中
Web技術勉強会 第30回
Web技術勉強会 第30回
龍一 田中
Web技術勉強会 第28回
Web技術勉強会 第28回
龍一 田中
Web技術勉強会23回目
Web技術勉強会23回目
龍一 田中
Web技術勉強会 第19回
Web技術勉強会 第19回
龍一 田中
Web技術勉強会 第18回
Web技術勉強会 第18回
龍一 田中
Web技術勉強会11回目
Web技術勉強会11回目
龍一 田中
Plus de 龍一 田中
(20)
WebSocketでリアルタイム処理をする
WebSocketでリアルタイム処理をする
Web技術勉強会 20130525 - Google Cloud Messaging入門
Web技術勉強会 20130525 - Google Cloud Messaging入門
Web技術勉強会 20120728
Web技術勉強会 20120728
Web技術勉強会 20120609
Web技術勉強会 20120609
Web技術勉強会 20120114 - JenkinsでJava/PHP/Ruby/JavaScriptをビルドする
Web技術勉強会 20120114 - JenkinsでJava/PHP/Ruby/JavaScriptをビルドする
Web技術勉強会 20111112
Web技術勉強会 20111112
Web技術勉強会 20110723
Web技術勉強会 20110723
Web技術勉強会 20110611
Web技術勉強会 20110611
Web技術勉強会 20100925
Web技術勉強会 20100925
Web技術勉強会 第38回
Web技術勉強会 第38回
Web技術勉強会 第37回
Web技術勉強会 第37回
Web技術勉強会 第34回
Web技術勉強会 第34回
Web技術勉強会 第33回
Web技術勉強会 第33回
Web技術勉強会 第31回
Web技術勉強会 第31回
Web技術勉強会 第30回
Web技術勉強会 第30回
Web技術勉強会 第28回
Web技術勉強会 第28回
Web技術勉強会23回目
Web技術勉強会23回目
Web技術勉強会 第19回
Web技術勉強会 第19回
Web技術勉強会 第18回
Web技術勉強会 第18回
Web技術勉強会11回目
Web技術勉強会11回目
Dernier
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
Dernier
(8)
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Web技術勉強会 20110514
1.
Web技術勉強会
2011/05/14 Ryuichi TANAKA/@mapserver2007/summer-lights.jp JavaScriptでプロトタイプベースオブジェクト指向プログラミング ~親子関係を維持してクラスを使わないオブジェクト指向プログラミング手法~
2.
Introduction この違い、わかりますか?
① var Phone = { type: function() { return “basic phone”; } }; ② var Phone = function() {}; Phone.prototype = { type: function() { return “basic phone”; } };
3.
Introduction 呼び出し方が違う
①:Phone.type(); ②:var phone = new Phone(); phone.type(); メモリ効率が違う ①:オブジェクトとして定義したときにメモリを確保 ②:インスタンスを生成したときにメモリを確保 形式が違う ①:オブジェクト ②:関数(クラス)
4.
どちらを使うべきか オブジェクト指向プログラミングするなら② クラスを定義する
var Phone = funciton() {}; メソッドを定義する Phone.prototype = { … }: Phone.prototype.type = function() { … }; 継承する Phone.type = new Telephone(); // 簡易な継承方法 インスタンス化 var obj = new Phone(); 他言語のOOPと比較的似ている いろいろ試行錯誤した結果、これがベスト
5.
と、思ってた時期が先週まであった
6.
さっきのやり方はベストではないと思い直した 見直したきっかけ http://blog.tojiru.net/article/199670885.html やっぱりクラスではなくオブジェクトとして扱うのがベ ストなのではないか JavaScriptはプロトタイプベースのオブジェクト指向プログ
ラミング言語 さっきのはクラスベース 非効率だった わざわざオブジェクトをクラス(にみたてて)化、使うときに newで再度オブジェクト化している どうすればよいか いずれにしてもクラス化する方法はベストではない GoodPartsにもnewはBadPartsであると明記されている JavaScriptパターンではモダンではない旨が明記されている オブジェクトのまま扱う方法がベストではないのか
7.
こうすればよい(のではないか) 実装目標 オブジェクトのまま扱う(クラス化しない)
new禁止 感覚としてはモジュールのような感じ オブジェクトのまま継承する 親子関係を維持する http://blog.tojiru.net/article/199670885.htmlのやり方で は不十分。親子関係が消滅している。 Rubyっぽくしたい 関数で継承しないでメソッドで継承
8.
件のサイトについて http://blog.tojiru.net/article/199670885.html 基本的にかなり参考になる(ブコメもすごい数) が、問題がある。かなり重大な。 「継承」ではない 継承と言いつつ、プロパティを上書きしているため親子
関係は消滅。つまり、同じメソッド名は定義できない。 個人的な美的感覚にマッチしていない 継承方法がちょっとカッコ悪い(関数で継承) これは別に悪くない。 継承順が逆 これはだめ
9.
件のサイトについて 継承順について サイトではこうなっている var
Dog = object(Animal, { name: “犬”, bowwow: function() { alert(“わんわん!”); } }); これは、extend(Animal, Dog); という意味。 英文にすると、Animal extend Dog 動物は犬を継承→??? つまり、逆でないとおかしい Dog extend Animal extend(Dog, Animal); これらの点を解消してあげればかなりよい方法が導けそ う
10.
「JavaScriptらしさ」を損なわないでオブジェ クト指向化 美的感覚にマッチした実装 Dog.extend(Animal)みたいな継承方法 親子関係を維持する プロトタイプチェーンを使う
親のメソッドを参照できるようにする var obj = Dog.extend(Animal); obj.parent.getName(); 複数の継承を許可 単一継承(ただし連鎖可能) var dog = Retriever.extend(Dog).extend(Animal); 多重継承(ただし後勝ち) var dog = Retriever.extend(Dog, Animal);
11.
プロトタイプチェーンとは オブジェクトに存在するプロパティのひとつ 参照しているオブジェクトがあればそのオブジェク トを指す 例:Array->Object Object.prototype ===
nullのときチェーンは終了 http://igeta.cocolog-nifty.com/blog/2007/04/prototype.html
12.
prototypeと__proto__ __proto__プロパティはプロトタイプチェーンをた どるためのプロパティ
prototypeプロパティは関数オブジェクトを拡張す るためのプロパティ __proto__はアクセスされたメンバ変数が存在しな いとき、代わりにどのオブジェクトを参照するかと いう参照先を指す __proto__はIEで未実装
13.
継承を実装するには __proto__を動的にたどって、__proto__の指すポイ ンタを動的に組み替えればいい
14.
動的に__proto__をたどる これはできない child =
child.__proto__; child.__proto__ = parent; // Cyclic error これはできる child.__proto__.__proto__ = parent; だがこれは静的にたどってるのでNG 解決策 var list = [“child”, “__proto__”, “__proto__”]; eval(list.join(“.”) + “ = parent”);
15.
親を参照するには 自分自身の__proto__を参照するだけ
16.
完成形 https://gist.github.com/967863
17.
問題:parentが関数になってしまう obj.parent().getName() になってしまう obj.parent.getName()
が理想だったが… 解決策はない 理由 parent()では自分自身(this)を参照し__proto__を参照する 自分自身(this)を参照するには関数でなければならない parentだとただのプロパティであり、thisはwindowになる 悪あがき(無名関数を駆使したり)したがやっぱり無理でした。 正直、こんなことにこだわる理由はないのだが…。 大した問題じゃないので次。
18.
問題:prototype汚染問題 prototypeを拡張することで全コードに影響が出る問題 Object.prototype.extend Array.prototype.each
など ライブラリ拡張してたりする。ライブラリ間で競合していると動かなく なる可能性がある for-inでプロパティを走査したときに拡張したメソッドが含まれるため バグを生む可能性がある 回避方法 メソッド化を諦めて素直に関数を使う ラッパーオブジェクトでラップする http://d.hatena.ne.jp/cyokodog/20081031/ArrayExtend01 ライブラリを使う jQueryとかを素直に使っておけということ そのライブラリが汚染していることがあるけどね 今回の場合 mix, parentを追加したので影響はある が、かぶることは(おそらく)ないので目をつぶる。for-inは気をつける。
19.
今回の方法を応用すると 機能ごとの汎用オブジェクトを定義しておく var Utils
= {…}; var Http = {…}; var Design = {…}; 各アプリごとで使いたいオブジェクトだけ継承する var obj = Base.mix(Utils).mix(Http); 名前がかぶらなければそのまま呼べる obj.xhr(); // Http#xhr 名前がかぶってもparent()で呼べる obj.parent().getObjectName(); // Utils#getObjectName 汎用オブジェクトの単独使用も可能 var result = Http.xhr(); 他のライブラリと併用はもちろん可能
20.
まとめ JavaScriptのプロトタイプベースオブジェクト指向 プログラミングをするための方法を説明 過去のプログラムをこの方法で書きなおすかも
Télécharger maintenant