Embed Size (px)
Citation preview
JSの基本的なことをちょっと掘り下げてみる話シリーズ
Chapter03. ～ prototype?編 ～
We Are JavaScripters! :)) 3rd @21cafe
聴衆ターゲットJSはまだほとんどかいたことがない→×
JSをかいていて、動くんだけど何でそうなるのかよくわかっていない→○
ライブラリを使うことが多く、素のJSはよくわからない→△
言語仕様を深く理解している方→×
ベースになった本▷
オライリー開眼！JavaScript
（ふたたび）
すごくいい本です！！
prototype
壮大な話になってしまったので、2回に分けることにしました※今回は前提知識の話で、
prototype自体の話はあまりしません
私も完全に理解していない部分（もしくは理解していると
勘違いしている部分）がありそうなので、
その際は遠慮なくご指摘くださいmm
INDEX
JSはプロトタイプベースのオブジェクト指向言語
コンストラクタ関数って？
JSの世界はすべてオブジェクト？
※prototypeの継承まわりを次回に持ち越します！
JavaScriptは プロトタイプベースのオブジェクト指向言語
である
引用：MDNhttps://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Details_of_the_Object_Model
クラスベースとプロトタイプベースの比較
引用：MDNhttps://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Details_of_the_Object_Model
今日話すところ
あれ？ちょっと待て
ES6にclass構文ってなかったか？
ES6のclass構文
※”純粋な”プロトタイプベースのオブジェクト指向言語は、JSとは異なるという指摘もある参考：http://blog.anatoo.jp/entry/2015/05/05/163225
> ECMAScript 6 で導入された JavaScript クラスは、JavaScript にすでにあるプロトタイプベース継承の糖衣構文です。クラス構文は、新しいオブジェクト指向継承
モデルを JavaScript に導入しているわけではありません。引用：MDN（https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Classes）
引用：MDNhttps://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Details_of_the_Object_Model
引用：MDNhttps://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Details_of_the_Object_Model
クラスベースにおける「クラス」にあたるものが、プロトタイプベースにおいては「コンストラクタ関数」というらしい
コンストラクタ関数って？
9つのネイティブオブジェクトのコンストラクタ
Number()
String()
Boolean()
Object()
Array()
Function()
Date()
RegExp()
Error()
※Math はコンストラクタではなく 静的オブジェクト
9つのネイティブオブジェクトのコンストラクタ
Number()
String()
Boolean()
Object()
Array()
Function()
Date()
RegExp()
Error()
※Math はコンストラクタではなく 静的オブジェクト
コンストラクタ関数からオブジェクトを生成。
結果はarr1,2,3すべて Array[0]arr2, arr3も内部的にnew Arrayをしている
Arrayをのぞいてみるコンストラクタ関数の中身は[native code]C or C++のため表示不可orz
> you can look at the source repositories for Chromium and Firefox.(by stack over flow:http://stackoverflow.com/questions/9103336/read-javascript-native-code)
Arrayをのぞいてみるconsole.dirで参照すると、functionオブジェクト自体のプロパティを参照できる
インスタンス化してみる
インスタンス化してみる
“new” したとき、一体何が起きてるの？
コンストラクタ関数は、普通の関数と何が違うの？
コンストラクタ関数の中身[native code]
↓よくわからないぞ・・・
自分でコンストラクタ関数を定義して、
検証してみよう！
自分でコンストラクタ関数を作って検証
自分でコンストラクタ関数を作って検証
自分でコンストラクタ関数を作って検証
自分でコンストラクタ関数を作って検証
returnしてないもんね→
じゃぁ、thisを明示的に返してみたらどうか？
じゃぁ、thisを明示的に返してみたらどうか？
じゃぁ、thisを明示的に返してみたらどうか？
じゃぁ、thisを明示的に返してみたらどうか？
thisの参照先は親オブジェクト
↓newすると・・・
暗黙的に2つの処理が追加されるらしい！
じゃぁ、objectも生成してやんよ！
※変数名thisだとコンフリクトしてエラーでるので、objにしています
じゃぁ、objectも生成してやんよ！
じゃぁ、objectも生成してやんよ！
コンストラクタ関数まとめ普段使っているネイティブオブジェクトはすべてコンストラクタ関数から生成されている
new演算子を使わなければただの関数
new演算子を使うと、1.thisにオブジェクト生成&returnを行う2.prototype継承が行われる(※次回)
JSの世界はすべてオブジェクト？
この違い、わかりますか？
この違い、わかりますか？
この違い、わかりますか？
いろんな値のtypeof
いろんな値のtypeof
null, undefined, “文字列”, 10, true, false
はオブジェクトではなく
プリミティブ型
？
なんでできるの？
参考：http://www.m-bsys.com/knowledge/javascript-primitive
> プリミティブ型に対しプロパティの参照やメソッドの呼び出しがあった場合には、以下のように一時的・暗黙的にオブジェクト型に変換されているのです。
ゆえに、new演算子を自分でかくことはほぼない
9つのネイティブオブジェクトのコンストラクタ
Number()
String()
Boolean()
Object()
Array()
Function()
Date()
RegExp()
Error()
※Math はコンストラクタではなく 静的オブジェクト
じゃぁそもそも、プリミティブ型と
オブジェクトの違いって・・
そもそも、プリミティブ型と
オブジェクトの違いって・・
1. 保存・複製の仕方 参照渡しと値渡し2. 同値判定の仕方 参照が同じか、 値そのものが同じか
JSの世界はすべてオブジェクト？
NO
プリミティブ値はオブジェクトではないただし、nullとundefinedをのぞくプリミティブ値は、一時的にオブジェクトに変換されオブジェクトのようにふるまう
オブジェクトという言葉において、JavaScriptオブジェクトとObject()は別物・Array()オブジェクト・Object()オブジェクト
まとめ
ここまで、オブジェクトの生成方法
(コンストラクタ関数)と、JSに存在するオブジェクトの
全体像のお話をしました
オブジェクトのふるまいを追っていくと、prototype が
とても重要な役割を担っていることがわかります
次回こそprototypeの話
ありがとうございました！
