JavaScriptのObjectの概念について少し深掘りしていこう、という内容です。 1: “JavaScriptは全てがObject？” 2: “Objectの扱い方” 3: “prototypeとは” 4: “おまけ（ES2015のclassについて）”

1. Title:
“Chotto Dive into
Object of JavaScript”,
Author: “@youta”
}
{

2. {
}
name: “小椋 陽太”,
twitter: “@youtsua_o”,
description: “”,

3. JAPANGLIS
H
Do you know
?

4. {
}
目次
1: “JavaScriptは全てがObject？”
2: “Objectの扱い方”
3: “prototypeとは”
4: “おまけ”

5. {
}
”JavaScriptは全てがObject？”
JavaScriptって全部Objectなんだよね？

6. {
}
”JavaScriptは全てがObject？”
いいえ、JavaScriptにはちゃんとプリミティブが存在します。
“youta” true 123
null undefined

7. {
}
”JavaScriptは全てがObject？”
プリミティブじゃないと勘違いされる理由。
“youta”.toLocaleUpperCase()
=> “YOUTA”
true.toString()
=> “true”

8. {
}
”JavaScriptは全てがObject？”
なぜ？
JavaScriptが一時的にプリミティブ値を
対応するラッパーオブジェクトに変換しているから。

9. {
}
”JavaScriptは全てがObject？”
ビルトインオブジェクト達（一部）
Object Function Boolean String
Number Math Date Error

10. {
}
“Objectの扱い方”
ビルトインオブジェクトも純粋なただのオブジェクトです。
こんな風に文字列型や数値型を定義することも可能です。
var str = new String(“youta”)
var num = new Number(123)
※ typeof str // => object となります。

11. {
}
これらのObjectはnew演算子を使って呼び出せる
コンストラクタを持っています。
ビルトインと同じように自分で作成することもできます。
“Objectの扱い方”
var Me = function (name, age) {
this.name = name
this.age = age
}
var me = new Me(“youta”, 24)

12. {
}
“Objectの扱い方”
Functionも例外ではありません。
() という演算子が特殊な役割を与えているだけです。
var square = new Function(
“width”, “height”, // 引数
“return width * height” // 処理
)
square(10, 20) // => 200

13. {
}
でもMathオブジェクトは例外です。
コンストラクタを持っておらず、new 演算子は使えません。
var math = new Math() // => Error!
“Objectの扱い方”
Math.random() // => OK

14. {
}
Mathオブジェクトのようにコンストラクタを持たない
オブジェクトの作り方の方が馴染み深いですね。
var fizzBuzz = {
fizz: function (n) { return n % 3 ? n : “fizz” },
buzz: function (n) { return n % 5 ? n : “buzz” },
...
}
var fb = new fizzBuzz() // => Error!
“Objectの扱い方”

15. {
}
“prototypeとは”
ところで、話を戻して、
これは当然のように見えますが、
なぜ定義していない関数が使えるのでしょうか？
var str = ”youta”
str.toLocaleUpperCase()

16. {
}
Stringオブジェクトに組み込まれているからです！
じゃあ、
これはどうして使えるのでしょうか？
“prototypeとは”
var str = ”youta”
str.hasOwnProperty(“hoge”)

17. {
}
JavaScriptのプロトタイプチェーンのおかげです！！
全てのオブジェクトの根源はObjectです。
全てのオブジェクトはObjectのプロパティを受け継ぎ、
使用することができます。
この受け継いだプロパティをプロトタイプといい、
プロトタイプを遡ってプロパティを利用する一連の流れを
プロトタイプチェーンといいます！！
“prototypeとは”

18. {
}
“prototypeとは”
プロトタイプチェーンの図
Object.prototype.hasOwnProperty
// => あった！
var str = new String(“youta”)
str.hasOwnProperty(“hoge”)
String.prototype.hasOwnProperty
// => ない
str.hasOwnProperty
// => ない

19. {
}
“prototypeとは”
（ここでプロトタイププロパティもプロトタイプを持っていて、
全てObjectのプロトタイプが終着点になる話を熱く語る）

20. {
}
“おまけ”
ES2015ではついにJavaScriptにもclassの概念が生まれました！
そしてそのclassもObjectの特性を使っているよという話。

21. {
}
”classの実装”
classはどのようにトランスパイルされているのでしょうか？
先ほど自分で作成したコンストラクタと同じですね！
class Hoge {
hoge = 'hoge'
}
var Hoge = /** @class */
(function () {
function Hoge() {
this.hoge = 'hoge';
}
return Hoge;
}());

22. {
}
”classの実装”
extendはどうでしょうか？
class Fuga extends Hoge {
fuga: string = 'fuga'
}

23. {
}
”classの実装”
extendはどうでしょうか？

24. {
}
”classの実装”
super class のプロパティが
プロトタイプとして再定義されていますね！
JavaScriptの標準機能であるプロトタイプチェーンを
活用して、他言語のclassと同等の機能を実現しています！

25. {
}
（アクセス修飾子は存在しないので、
平気でプロトタイププロパティでもなんでも
書き換えられてしまいます。
private とか使いたい場合は
素直にTypeScriptを使いましょう。）
”classの実装”

26. {
}
”classの実装”
ちなみに static はTypeScriptの力を借りなくても実現可能です！
class Fuga {
static fuga = ‘fuga'
}
var Fuga = /** @class */
(function () {
function Fuga() {
}
Fuga.fuga = 'fuga';
return Fuga;
}());

27. {
}
Arigathanks
gozaimuch!