読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

文系新卒プログラマーのメモ

JavaScript : The Good Parts (良いパーツによるベストプラクティス)を読む③

JavaScript

どうも!chuckです。JavaScript GoodParts読んでいきますよー!

f:id:chuck0523:20150805221952j:plain

 

第三章 オブジェクト

きました!僕らのオブジェクト!

めっちゃ便利ですよね。でも、プロトタイプとか実はよくわかっていなくて、しっかり勉強したいと思います。

 

あらすじ

JavaScriptには基本型として、数値、文字列、論理値、null、undefinedがある。それ以外は関数でさえもすべてオブジェクトである(これ初めて知った時衝撃だった!)

ちなみに、基本型はイミュータブル(変更不可)であり、オブジェクトはミュータブル(変更可能)である。オブジェクトはクラスの概念を持たず、プロパティ名や値になんの制約もない。うまく利用すればデータの整理やメモリの節約になる。

 

3.1オブジェクトリテラル

gist1638c28e456868ced16c

こんな感じ(雑)オブジェクトはネストできる。

予約語以外なら、プロパティ名はダブルクォートで囲む必要はないらしい。

 

3.2値の取得

値の取得は2種類ある。[ ](角括弧) か.(ドット)か。でも見やすさの観点から、ドットを使うほうがいい。

| | を使ってデフォルト値を設定したり、&&でTypeErrorを防ぐことができる(これやったことなかった!)

gistae3c60c99751c6b09583

 

3.3値の更新

値の取得と同様の方法でプロパティの値を更新することができる。

指定された名前のプロパティがまだ存在していなかったときは、単純に値が新規作成される。

gist8fe088a7b80146d47612

 

3.4参照

オブジェクトは参照渡しであり、コピーされるわけではない。

gistdc08d212e9640431b0b3

 

3.5プロトタイプ

きた!僕のよくわかってないプロトタイプ!(ES5までは)クラスの概念のないJavaScriptにおいては、しっかり理解したいところ。

すべてのオブジェクトはプロトタイプオブジェクトとリンクしていて、Object.prototypeにアクセスできる。

関数を自作することで、プロトタイプを自分で設定することもできる。

gistd82f172a2594a15cf1b7

 

プロトタイプとのリンクでは、オブジェクトから値を取得する場合のみ利用される。

オブジェクトの中に取得しようとしたプロパティがないとき、プロトタイプにさかのぼって検索する。それでも無かった場合は、最終的にはObject.prototypeまでさかのぼって検索が行われる。もしObject.prototypeでもなかった場合に、undefinedが返される。この仕組みを「委譲」と呼ぶ。(ふーん。単純にundefinedが返ってきてるようで、裏では難しいことをやっていたのか!)

また、プロトタイプの結びつきは動的なものである。プロトタイプに値が追加されたら、それを参照するオブジェクト全てから、新規の値を参照することができる。

gist8386c7e93c9d4d2942ac

 

3.6リフレクション

 typeofやhasOwnPropertyでオブジェクトのプロパティを調査できる。

typeofはプロパティの変数型を調べることができる。ただし、プロトタイプをさかのぼって検索してくれちゃうので、意図しない結果が返るかもしれない。

一方でhasOwnPropertyメソッドはそのオブジェクト自身にのみ適用され、プロトタイプをさかのぼることはない。

gist583f2757331ef2398160

 

3.7プロパティの列挙

for in文を使うと、オブジェクトに含まれる全てのプロパティにアクセスできる。

ただし、関数やプロトタイプ上のプロパティなど、取得する必要のないものは弾きたい。そこで先ほどのtypeofやhasOwnPropertyを使うといい。

gist9646e37b7e1b79a60cdc

なるほど!in演算子で取得できるのって、プロパティ名であって、プロパティの値じゃないんだ。ただし、正しい順番で取得したいなら、通常のfor文を使うべき、とのこと。

 

3.8プロパティの削除

delete演算子を使うと、プロパティを削除することができる。delete演算子はプロトタイプに影響を及ばさない。

これなんですけど、試してみたら普通にプロトタイプから削除された…???(;・∀・)

gist0aca60b725b3be2db09f

うーん、よくわかんない。。。

 

3.9グローバル領域の利用を減らす

グローバル変数を極力しないために、オブジェクトを利用するのがよい。オブジェクトとして定義したグローバル変数の中に他の変数をつっこんでいけば、他のプラグインやライブラリに悪影響を及ぼすことはない。

gistfbfcd8322a9bf88777b8

 

まとめ

3章おわりました。ES6ではクラスの概念が導入されるようですが、それ以前って、プロトタイプを利用してクラス構造を擬似的に再現していたんですよね(たぶん)。そういった意味では、JavaScriptの大切な部分を学ぶことが出来たと思います!

 

では!ヽ(=´▽`=)ノ