YT
Uploaded byYukiko Tamiya
PDF, PPTX449 views

JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter04. 〜 prototype編(やっと..!) 〜

We Are JavaScripters! :)) 6th @21cafe 登壇資料です

Embed presentation

Download as PDF, PPTX
1 / 104
2 / 104
3 / 104
4 / 104
5 / 104
6 / 104
7 / 104
8 / 104
9 / 104
10 / 104
11 / 104
12 / 104
13 / 104
14 / 104
15 / 104
16 / 104
17 / 104
18 / 104
19 / 104
20 / 104
21 / 104
22 / 104
23 / 104
24 / 104
25 / 104
26 / 104
27 / 104
28 / 104
29 / 104
30 / 104
31 / 104
32 / 104
33 / 104
34 / 104
35 / 104
36 / 104
37 / 104
38 / 104
39 / 104
40 / 104
41 / 104
42 / 104
43 / 104
44 / 104
45 / 104
46 / 104
47 / 104
48 / 104
49 / 104
50 / 104
51 / 104
52 / 104
53 / 104
54 / 104
55 / 104
56 / 104
57 / 104
58 / 104
59 / 104
60 / 104
61 / 104
62 / 104
63 / 104
64 / 104
65 / 104
66 / 104
67 / 104
68 / 104
69 / 104
70 / 104
71 / 104
72 / 104
73 / 104
74 / 104
75 / 104
76 / 104
77 / 104
78 / 104
79 / 104
80 / 104
81 / 104
82 / 104
83 / 104
84 / 104
85 / 104
86 / 104
87 / 104
88 / 104
89 / 104
90 / 104
91 / 104
92 / 104
93 / 104
94 / 104
95 / 104
96 / 104
97 / 104
98 / 104
99 / 104
100 / 104
101 / 104
102 / 104
103 / 104
104 / 104
JSの基本的なことをちょっと 掘り下げてみる話シリーズ Chapter04. ～ prototype編(やっと..!) ～ We Are JavaScripters! :)) 6th @21cafe
聴衆ターゲット JSはまだほとんどかいたことがない→× JSをかいていて、動くんだけど
 何でそうなるのかよくわかっていない→○ 言語仕様を深く理解している方→×
ベースに
 している本▷ オライリー
 開眼！JavaScript JS に慣れてきた人に オススメの一冊！
とてもお世話になりました。m(__)m http://qiita.com/howdy39/items/35729490b024ca295d6c
前回までの復習 (2ヶ月前でごめんなさい。。)
JavaScriptは プロトタイプベースの
 オブジェクト指向言語
 である
引用：MDN
 https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Details_of_the_Object_Model クラスベースとプロトタイプベースの比較
引用：MDN
 https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Details_of_the_Object_Model 前回話したところ
オブジェクトの生成方法
 (コンストラクタ関数)
 と、
 JSに存在するオブジェクトの
 全体像のお話をしました
コンストラクタ関数まとめ 普段使っているネイティブオブジェクトは すべてコンストラクタ関数から生成されて いる new演算子を使わなければただの関数 new演算子を使うと、
 1.thisにオブジェクト生成&returnを行う
 2.prototype継承が行われる(※今回話すところ)
9つのネイティブオブジェクトのコンストラクタ Number() String() Boolean() Object() Array() Function() Date() RegExp() Error() ※Math はコンストラクタではなく
 　静的オブジェクト
プリミティブ値はオブジェクトではない
 null, undefined, “文字列”, 10, true, falseは
 オブジェクトではなくプリミティブ型。
 ただし、nullとundefinedをのぞくプリミティブ値は、一時的 にオブジェクトに変換されオブジェクトのようにふるまう オブジェクトという言葉において、
 JavaScriptオブジェクトとObject()は別物
 ・Array()オブジェクト
 ・Object()オブジェクト JSの世界はすべてオブジェクト?
詳細が気になる人はslideshareをチェック! https://www.slideshare.net/YukikoTamiya/js-chapter03- prototype
引用：MDN
 https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Details_of_the_Object_Model 今回話すところ
??
INDEX 謎のオブジェクト__proto__ アクセスの仕組み
 （プロトタイプチェーン） prototypeはなぜ存在するのか？
謎のオブジェクト __proto__
※var arr1 = Array()
 　var arr1 = [];
 　と同じ
__proto__ ってなんだ??
Array() new Array()
 インスタンス化 arr1 __proto__ length:0 謎のオブジェクト ？
__proto__の中身から探る
__proto__の中身から探る MDNより
__proto__の中身から探る MDNより
__proto__の中身から探る MDNより
Array() new Array()
 インスタンス化 arr1 __proto__ length:0 Array.prototype join() push() concat() … prototype
__proto__ Function()のインスタンスを生成する際に
 自動的に付与するオブジェクト
 ※関数をコンストラクタとして使用するかどうかに関わ らず、自動的に生成される コンストラクタ関数でprototypeプロパティ に定義したものと同値 ※__proto__は非標準でしたが、ECMAScript 2015で初めて標準化されました。
オリジナルの コンストラクタ関数で 挙動をCheck！
Person() [関数] new Person(“tami”,20)
 インスタンス化 __proto__ getAge() Person.prototype [オブジェクト] getName() prototype name age tami [オブジェクト]
アクセスの仕組み （プロトタイプチェーン）
pushメソッドを呼んでみる
pushメソッドを呼んでみる
pushメソッドを呼んでみる
pushメソッドを呼んでみる 呼べた（そりゃそうか）
あれ、でも普段__proto__なんて使わない…
あれ、でも普段__proto__なんて使わない…
あれ、でも普段__proto__なんて使わない…
あれ、でも普段__proto__なんて使わない… どうして呼べるの??
プロトタイプチェーン ①そのオブジェクトにプロパティがあるか調べる
プロトタイプチェーン ①そのオブジェクトにプロパティがあるか調べる あった そのプロパティ を返す
プロトタイプチェーン ①そのオブジェクトにプロパティがあるか調べる ②__proto__をたどって
 プロパティがあるか調べる あった そのプロパティ を返す ない
プロトタイプチェーン ①そのオブジェクトにプロパティがあるか調べる ②__proto__をたどって
 プロパティがあるか調べる あった あった そのプロパティ を返す ない
プロトタイプチェーン ①そのオブジェクトにプロパティがあるか調べる ②__proto__をたどって
 プロパティがあるか調べる あった あった そのプロパティ を返す ない ③さらに上の階層の__proto__ を見に行く（ループ）
プロトタイプチェーン ①そのオブジェクトにプロパティがあるか調べる ②__proto__をたどって
 プロパティがあるか調べる あった あった そのプロパティ を返す ない ③さらに上の階層の__proto__ を見に行く（ループ） ④nullになるまで行う
 (終着点は必ずObject.prototype)
実際にプロパティを 探す動きを追ってみよう
 （Personコンストラクタの例）
Person() [関数] new Person(“tami”,20)
 インスタンス化 __proto__ getAge() Person.prototype [オブジェクト] getName() prototype name age tami [オブジェクト]
実際にプロパティを 探す動きを追ってみよう 1.tami.name 2.tami.getName 3.tami.hogehoge
1. tami.name
Person() [関数] new Person(“tami”,20)
 インスタンス化 __proto__ getAge() Person.prototype [オブジェクト] getName() prototype name age tami [オブジェクト] 1. tami.name ❶tamiを探す window
※windowオブジェクト グローバルオブジェクトとも呼ばれる JavaScriptによって裏で設定されている Webブラウザ環境でJavaScriptのコードをかく には、windowオブジェクト内で実行する必要 がある
※windowオブジェクト グローバルオブジェクトとも呼ばれる JavaScriptによって裏で設定されている Webブラウザ環境でJavaScriptのコードをかく には、windowオブジェクト内で実行する必要 がある
windowオブジェクト グローバルオブジェクトとも呼ばれる すべてのJavaScriptの実装環境は単一の
 グローバルオブジェクトを持たなければならない Webブラウザ環境でJavaScriptのコードをかくに は、windowオブジェクト内で実行する必要がある
Person() [関数] new Person(“tami”,20)
 インスタンス化 __proto__ getAge() Person.prototype [オブジェクト] getName() prototype name age tami [オブジェクト] 1. tami.name ❶tamiを探す window
Person() [関数] new Person(“tami”,20)
 インスタンス化 __proto__ getAge() Person.prototype [オブジェクト] getName() prototype name age tami [オブジェクト] 1. tami.name ❶tamiを探す window あった!
Person() [関数] new Person(“tami”,20)
 インスタンス化 __proto__ getAge() Person.prototype [オブジェクト] getName() prototype name age tami [オブジェクト] 1. tami.name ❷nameを探す window
Person() [関数] new Person(“tami”,20)
 インスタンス化 __proto__ getAge() Person.prototype [オブジェクト] getName() prototype name age tami [オブジェクト] 1. tami.name ❷nameを探す window あった!
Person() [関数] new Person(“tami”,20)
 インスタンス化 __proto__ getAge() Person.prototype [オブジェクト] getName() prototype name age tami [オブジェクト] 1. tami.name ❷nameを探す window あった!
2. tami.getName
Person() [関数] new Person(“tami”,20)
 インスタンス化 __proto__ getAge() Person.prototype [オブジェクト] getName() prototype name age tami [オブジェクト] 2. tami.getName ❶tamiを探す window あった!
Person() [関数] new Person(“tami”,20)
 インスタンス化 __proto__ getAge() Person.prototype [オブジェクト] getName() prototype name age tami [オブジェクト] ❷getNameを探す window 2. tami.getName
Person() [関数] new Person(“tami”,20)
 インスタンス化 __proto__ getAge() Person.prototype [オブジェクト] getName() prototype name age tami [オブジェクト] ❷getNameを探す window ない… 2. tami.getName
Person() [関数] new Person(“tami”,20)
 インスタンス化 __proto__ getAge() Person.prototype [オブジェクト] getName() prototype name age tami [オブジェクト] ❸__proto__を探す window 2. tami.getName
Person() [関数] new Person(“tami”,20)
 インスタンス化 __proto__ getAge() Person.prototype [オブジェクト] getName() prototype name age tami [オブジェクト] ❸__proto__を探す window あった! 2. tami.getName
Person() [関数] new Person(“tami”,20)
 インスタンス化 __proto__ getAge() Person.prototype [オブジェクト] prototype name age tami [オブジェクト] ❹getNameを探す window getName() 2. tami.getName
Person() [関数] new Person(“tami”,20)
 インスタンス化 __proto__ getAge() Person.prototype [オブジェクト] prototype name age tami [オブジェクト] ❹getNameを探す window getName() あった! 2. tami.getName
Person() [関数] new Person(“tami”,20)
 インスタンス化 __proto__ getAge() Person.prototype [オブジェクト] prototype name age tami [オブジェクト] ❹getNameを探す window getName() あった! 2. tami.getName
3. tami.hogehoge
Person() [関数] new Person(“tami”,20)
 インスタンス化 __proto__ getAge() Person.prototype [オブジェクト] getName() prototype name age tami [オブジェクト] 3. tami.hogehoge ❶tamiを探す window あった!
Person() [関数] new Person(“tami”,20)
 インスタンス化 __proto__ getAge() Person.prototype [オブジェクト] getName() prototype name age tami [オブジェクト] ❷hogehogeを探す window ない… 3. tami.hogehoge
Person() [関数] new Person(“tami”,20)
 インスタンス化 __proto__ getAge() Person.prototype [オブジェクト] getName() prototype name age tami [オブジェクト] ❸__proto__を探す window あった! 3. tami.hogehoge
Person() [関数] new Person(“tami”,20)
 インスタンス化 __proto__ getAge() Person.prototype [オブジェクト] prototype name age tami [オブジェクト] ❹hogehogeを探す window getName() 3. tami.hogehoge
Person() [関数] new Person(“tami”,20)
 インスタンス化 __proto__ getAge() Person.prototype [オブジェクト] prototype name age tami [オブジェクト] ❹hogehogeを探す window getName() 3. tami.hogehoge ない…
Person() [関数] new Person(“tami”,20)
 インスタンス化 __proto__ getAge() Person.prototype [オブジェクト] prototype name age tami [オブジェクト] window getName() 3. tami.hogehoge __proto__ これなんの __proto__？ ❺tami.__proto__.__proto__を探す
tami.__proto__.__proto__ Object.prototypeのようだ
※__proto__の中の
 　constructorプロパティについて インスタンスを生成した
 コンストラクタ関数を
 参照することができます
Person() [関数] new Person(“tami”,20)
 インスタンス化 __proto__ getAge() Person.prototype [オブジェクト] prototype name age tami [オブジェクト] window getName() 3. tami.hogehoge __proto__ これなんの __proto__？ ❺tami.__proto__.__proto__を探す
Person() [関数] new Person(“tami”,20)
 インスタンス化 __proto__ getAge() Person.prototype [オブジェクト] prototype name age tami [オブジェクト] window getName() 3. tami.hogehoge __proto__ Object() [関数] prototype Object.prototype [オブジェクト] ❻hogehogeを探す
Person() [関数] new Person(“tami”,20)
 インスタンス化 __proto__ getAge() Person.prototype [オブジェクト] prototype name age tami [オブジェクト] window getName() 3. tami.hogehoge __proto__ Object() [関数] prototype Object.prototype [オブジェクト] ❻hogehogeを探す ない…
Person() [関数] new Person(“tami”,20)
 インスタンス化 __proto__ getAge() Person.prototype [オブジェクト] prototype name age tami [オブジェクト] window getName() 3. tami.hogehoge __proto__ Object() [関数] prototype Object.prototype [オブジェクト] ❼__proto__を探す
Person() [関数] new Person(“tami”,20)
 インスタンス化 __proto__ getAge() Person.prototype [オブジェクト] prototype name age tami [オブジェクト] window getName() 3. tami.hogehoge __proto__ Object() [関数] prototype Object.prototype [オブジェクト] ❽nullを見つけて終了 __proto__:nullnull
Person() [関数] new Person(“tami”,20)
 インスタンス化 __proto__ getAge() Person.prototype [オブジェクト] prototype name age tami [オブジェクト] window getName() 3. tami.hogehoge __proto__ Object() [関数] prototype Object.prototype [オブジェクト] ❽nullを見つけて終了 __proto__:nullnull
Person() [関数] new Person(“tami”,20)
 インスタンス化 __proto__ getAge() Person.prototype [オブジェクト] prototype name age tami [オブジェクト] window getName() 3. tami.hogehoge __proto__ Object() [関数] prototype Object.prototype [オブジェクト] ❽nullを見つけて終了 __proto__:nullnull
プロトタイプチェーン ①そのオブジェクトにプロパティがあるか調べる ②__proto__をたどって
 プロパティがあるか調べる あった あった そのプロパティ を返す ない ③さらに上の階層の__proto__ を見に行く（ループ） ④nullになるまで行う
 (終着点は必ずObject.prototype)
なぜこのような仕組みがあるのか？
なぜprototypeなのか? プロトタイプによる継承を行うことにより、 同じメソッドを共有する、効率的なオブジェ クトインスタンスを生成することができる
 引用: 開眼JavaScript
なぜprototypeなのか? Person() [関数] new Person(“tami”,20)
 インスタンス化 __proto__ getAge() Person.prototype [オブジェクト] prototype name age tami01 getName() getBirth()
なぜprototypeなのか? Person() [関数] new Person(“tami”,20)
 インスタンス化 __proto__ getAge() Person.prototype [オブジェクト] prototype name age tami01 getName() tami02 tami03 tami04 getBirth()
なぜprototypeなのか? Person() [関数] new Person(“tami”,20)
 インスタンス化 __proto__ getAge() Person.prototype [オブジェクト] prototype name age tami01 getName() tami02 tami03 tami04 getBirth()
Arrayを改めてながめてみる
Arrayを改めてながめてみる
Arrayを改めてながめてみる
Array() new Array()
 インスタンス化 myArray __proto__ length:0 Array.prototype join() push() concat() … prototype isArray
Arrayを改めてながめてみる
Arrayを改めてながめてみる
Array() new Array()
 インスタンス化 myArray __proto__ length:0 Array.prototype join() push() concat() … prototype isArray
Arrayを改めてながめてみる
Array() new Array()
 インスタンス化 myArray __proto__ length:0 Array.prototype join() push() concat() … prototype isArray
prototypeまとめ 謎のオブジェクト__proto__は、
 プロトタイプチェーンをたどるための
 プロパティだった ネイティブオブジェクトは
 prototypeの仕組みを使ってメソッドにアク セスしている
みなさんのJSライフの
 理解の一助になれば幸いです！
ありがとうございました！

More Related Content

PDF
Prototypeベース in JavaScript
byRyo Maruyama
 
PDF
知って得するWebで便利なpostgre sqlの3つの機能
bySoudai Sone
 
PDF
JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter03. 〜 prototype?編 〜
byYukiko Tamiya
 
PDF
最強オブジェクト指向言語 JavaScript 再入門！
byYuji Nojima
 
PDF
Javascripでオブジェクト指向
by1000 VICKY
 
PPT
20090121 J QueryからはじめるJava Script～初級編～
byHiromu Shioya
 
PPTX
Javascript勉強会資料1
byKenji Kaneko
 
PPTX
Javascript3
byKiminari Homma
 
Prototypeベース in JavaScript
byRyo Maruyama
 
知って得するWebで便利なpostgre sqlの3つの機能
bySoudai Sone
 
JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter03. 〜 prototype?編 〜
byYukiko Tamiya
 
最強オブジェクト指向言語 JavaScript 再入門！
byYuji Nojima
 
Javascripでオブジェクト指向
by1000 VICKY
 
20090121 J QueryからはじめるJava Script～初級編～
byHiromu Shioya
 
Javascript勉強会資料1
byKenji Kaneko
 
Javascript3
byKiminari Homma
 

Similar to JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter04. 〜 prototype編(やっと..!) 〜

PDF
JSer Class #1
bymizuky fujitani
 
KEY
いまさらJavaScript
byNaomichi Yamakita
 
PDF
ちょっと詳しくJavaScript 第3回【prototype】
by株式会社ランチェスター
 
PPT
[A 3]SSJSでも使える！Javascriptでオブジェクト指向プログラミング入門
byKazunori Tatsuki
 
PPTX
Javascriptのデザインパターン【勉強会資料】
by株式会社キャッチアップ
 
PPTX
jQueryの先に行こう！最先端のWeb開発トレンドを学ぶ
byShumpei Shiraishi
 
PDF
JSクラス定義
byWataru Nakaseko
 
PDF
JavaScript入門
byRyo Maruyama
 
PDF
クライアントサイドjavascript簡単紹介
byしくみ製作所
 
PPTX
TypeScriptをオススメする理由
byYusuke Naka
 
PDF
お手軽Ajaxアプリケーションの作り方
byShunji Konishi
 
PDF
モダンJavaScript環境構築一歩目
by大樹 小倉
 
PPTX
Chotto Dive into Object of JavaScript
byYouta Ogura
 
PDF
JavaScript.Next
bydynamis
 
ODP
webを飾る技術
byina job
 
PDF
【フロントエンド勉強会】 フロントエンド基礎知識
bySota Takahashi
 
PDF
Objective Front-End JavaScript
byMuyuu Fujita
 
PDF
Buildinsider OFFLINE TypeScriptの基礎から実践・利用事例まで
byMasahiro Wakame
 
PDF
JSer Class #3
bymizuky fujitani
 
PDF
Webデザインの幅を広げる、jQuery【コードを記述する】 先生：保坂 庸介
byschoowebcampus
 
JSer Class #1
bymizuky fujitani
 
いまさらJavaScript
byNaomichi Yamakita
 
ちょっと詳しくJavaScript 第3回【prototype】
by株式会社ランチェスター
 
[A 3]SSJSでも使える！Javascriptでオブジェクト指向プログラミング入門
byKazunori Tatsuki
 
Javascriptのデザインパターン【勉強会資料】
by株式会社キャッチアップ
 
jQueryの先に行こう！最先端のWeb開発トレンドを学ぶ
byShumpei Shiraishi
 
JSクラス定義
byWataru Nakaseko
 
JavaScript入門
byRyo Maruyama
 
クライアントサイドjavascript簡単紹介
byしくみ製作所
 
TypeScriptをオススメする理由
byYusuke Naka
 
お手軽Ajaxアプリケーションの作り方
byShunji Konishi
 
モダンJavaScript環境構築一歩目
by大樹 小倉
 
Chotto Dive into Object of JavaScript
byYouta Ogura
 
JavaScript.Next
bydynamis
 
webを飾る技術
byina job
 
【フロントエンド勉強会】 フロントエンド基礎知識
bySota Takahashi
 
Objective Front-End JavaScript
byMuyuu Fujita
 
Buildinsider OFFLINE TypeScriptの基礎から実践・利用事例まで
byMasahiro Wakame
 
JSer Class #3
bymizuky fujitani
 
Webデザインの幅を広げる、jQuery【コードを記述する】 先生：保坂 庸介
byschoowebcampus
 

JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter04. 〜 prototype編(やっと..!) 〜