WeJS 3rdの発表資料です

1. JSの基本的なことをちょっと
掘り下げてみる話シリーズ
Chapter03. ～ prototype?編 ～
We Are JavaScripters! :)) 3rd
@21cafe

2. 聴衆ターゲット
JSはまだほとんどかいたことがない→×
JSをかいていて、動くんだけど
何でそうなるのかよくわかっていない→○
ライブラリを使うことが多く、
素のJSはよくわからない→△
言語仕様を深く理解している方→×

3. ベースに
なった本▷
オライリー
開眼！JavaScript
（ふたたび）
すごくいい本です！！

4. prototype

5. 壮大な話になってしまったので、
2回に分けることにしました
※今回は前提知識の話で、
prototype自体の話はあまりしません

6. 私も完全に理解していない部分
（もしくは理解していると
勘違いしている部分）
がありそうなので、
その際は遠慮なくご指摘くださいmm

7. INDEX
JSはプロトタイプベースの
オブジェクト指向言語
コンストラクタ関数って？
JSの世界はすべてオブジェクト？
※prototypeの継承まわりを次回に持ち越します！

8. JavaScriptは
プロトタイプベースの
オブジェクト指向言語
である

9. 引用：MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Details_of_the_Object_Model
クラスベースとプロトタイプベースの比較

10. 引用：MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Details_of_the_Object_Model
今日話すところ

11. あれ？ちょっと待て

12. ES6にclass構文
ってなかったか？

13. 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）

14. 引用：MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Details_of_the_Object_Model

15. 引用：MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Details_of_the_Object_Model
クラスベースにおける「クラス」にあたるものが、
プロトタイプベースにおいては「コンストラクタ関数」
というらしい

16. コンストラクタ関数っ
て？

17. 9つのネイティブオブジェクトのコンストラクタ
Number()
String()
Boolean()
Object()
Array()
Function()
Date()
RegExp()
Error()
※Math はコンストラクタではなく
静的オブジェクト

18. 9つのネイティブオブジェクトのコンストラクタ
Number()
String()
Boolean()
Object()
Array()
Function()
Date()
RegExp()
Error()
※Math はコンストラクタではなく
静的オブジェクト

19. コンストラクタ関数から
オブジェクトを生成。
結果はarr1,2,3すべて Array[0]
arr2, arr3も内部的に
new Arrayをしている

20. 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)

21. Arrayをのぞいてみる
console.dirで
参照すると、
function
オブジェクト
自体の
プロパティを
参照できる

22. インスタンス化してみる

23. インスタンス化してみる

24. “new” したとき、
一体何が起きてるの？

25. コンストラクタ関数は、
普通の関数と何が違うの？

26. コンストラクタ関数の中身
[native code]
↓
よくわからないぞ・・・

27. 自分で
コンストラクタ関数を定義して、
検証してみよう！

28. 自分でコンストラクタ関数を作って検証

29. 自分でコンストラクタ関数を作って検証

30. 自分でコンストラクタ関数を作って検証

31. 自分でコンストラクタ関数を作って検証
returnしてないもんね→

32. じゃぁ、thisを明示的に返してみたらどうか？

33. じゃぁ、thisを明示的に返してみたらどうか？

34. じゃぁ、thisを明示的に返してみたらどうか？

35. じゃぁ、thisを明示的に返してみたらどうか？
thisの参照先は親オブジェクト

36. ↓newすると・・・
暗黙的に
2つの処理が追加される
らしい！

37. じゃぁ、objectも生成してやんよ！
※変数名thisだとコンフリクトしてエラーでるので、
objにしています

38. じゃぁ、objectも生成してやんよ！

39. じゃぁ、objectも生成してやんよ！

42. コンストラクタ関数まとめ
普段使っているネイティブオブジェクトは
すべてコンストラクタ関数から生成されて
いる
new演算子を使わなければただの関数
new演算子を使うと、
1.thisにオブジェクト生成&returnを行う
2.prototype継承が行われる(※次回)

43. JSの世界は
すべてオブジェクト？

44. この違い、わかりますか？

45. この違い、わかりますか？

46. この違い、わかりますか？

47. いろんな値のtypeof

48. いろんな値のtypeof

49. null, undefined, “文字列”,
10, true, false
は
オブジェクトではなく
プリミティブ型

50. ？

51. なんでできるの？

52. 参考：http://www.m-bsys.com/knowledge/javascript-primitive
> プリミティブ型に対しプロパティの参照や
メソッドの呼び出しがあった場合には、以下
のように一時的・暗黙的にオブジェクト型に
変換されているのです。
ゆえに、new演算子を自分でかくことはほぼない

53. 9つのネイティブオブジェクトのコンストラクタ
Number()
String()
Boolean()
Object()
Array()
Function()
Date()
RegExp()
Error()
※Math はコンストラクタではなく
静的オブジェクト

54. じゃぁそもそも、
プリミティブ型と
オブジェクトの違いって・・

55. そもそも、
プリミティブ型と
オブジェクトの違いって・・
1. 保存・複製の仕方
参照渡しと値渡し
2. 同値判定の仕方
参照が同じか、
値そのものが同じか

56. JSの世界は
すべてオブジェクト？

57. NO

58. プリミティブ値はオブジェクトではない
ただし、nullとundefinedをのぞくプリミティブ値は、
一時的にオブジェクトに変換されオブジェクトのよ
うにふるまう
オブジェクトという言葉において、
JavaScriptオブジェクトとObject()は別物
・Array()オブジェクト
・Object()オブジェクト
まとめ

59. ここまで、
オブジェクトの生成方法
(コンストラクタ関数)と、
JSに存在するオブジェクトの
全体像のお話をしました

60. オブジェクトのふるまいを
追っていくと、
prototype が
とても重要な役割を担っ
ていることがわかります

61. 次回こそprototypeの話

62. ありがとうございました！