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

コンパイラかく語りき

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

JSライブラリ「Underscore.js」を読んでJavaScript中級者になる! ~プロトタイプとプロパティ~

どうも!chuckです。

引き続きUnderscore.jsを読み解いていきます。

 

前回の記事

chuckwebtips.hatenablog.com

 

Github

github.com

 

 

今回読んでいく箇所はまだまだライブラリの冒頭。前準備として、プロトタイプやプロパティをいじっている段階です。

それでも学びがあったので、メモ。 

30行目:グローバルオブジェクトのプロパティとして、アンダースコアを定義

f:id:chuck0523:20150823084807p:plain

こちらも変数宣言ですね。グローバルオブジェクトrootに対して、_(アンダースコア)というプロパティを追加したうえで、変数に代入しています。

 

こちらが通常のwindowオブジェクトです。(抜粋)

f:id:chuck0523:20150823085219p:plain

 

一方で、rootの中身を見てみると、

f:id:chuck0523:20150823085254p:plain

画像の真ん中あたりに、きちんとアンダースコアが追加されていますね!

 

36行目:プロトタイプの変数保存

f:id:chuck0523:20150823085451p:plain

こちらも変数宣言。Array(配列)クラスのプロトタイプと、Objectのプロトタイプをそれぞれ変数に代入しています。

こちらもコンソールで確認してみます!

f:id:chuck0523:20150823085739p:plain

※ l(エル) をconsole.logの関数として定義しています

 

するとこのとおり。

f:id:chuck0523:20150823085834p:plain

あれ、Array.prototypeで返ってくるのって空の配列??

調べた。-> Array.prototype - JavaScript | MDN

そしたらこんな記述がありました!

f:id:chuck0523:20150823090324p:plain

”あまり知られていないことですが、Arrayクラスのプロトタイプ自身もまた配列なのです” …なるほど!じゃあ、空の配列でOKなのかな。

 

ちなみに、きちんとLengthプロパティはありました!

f:id:chuck0523:20150823090500p:plain

ブラウザで確認すると以下のとおり!

f:id:chuck0523:20150823090507p:plain

ゼロ!

 

Object.prototypeはわかりやすいですね!

f:id:chuck0523:20150823090544p:plain

toStringやvalueOfなど、オブジェクトの関数が含まれています。

 

44行目:コアプロトタイプの変数宣言

f:id:chuck0523:20150823090914p:plain

こちらも変数宣言ですね。

先ほど取得したプロトタイプから、メジャーな関数を取り出して変数に代入しています。コメントではCore prototypes(コアプロトタイプ)なんて書いてありますね!

よく使うから変数化してるんですかね??

 

あれ、でもこれって必要なのかな???たとえばpushの使い方ってこんな感じ。

f:id:chuck0523:20150823091314p:plain

でも、この場合のpushって、aryという変数がそもそも保有してるんですよね。配列リテラルで作成した時点でArrayクラスを継承(?)してるわけで…。

 

なんでいちいち pushを変数定義してるんだろう。。。謎だ。

 

54行目:ES5関数の変数定義

f:id:chuck0523:20150823092041p:plain

こちらも変数定義。上のやつとの違いは、こちらの関数たちはES5から追加されたっぽいです。

f:id:chuck0523:20150823092127p:plain

 

試しにisArrayを調べてみました。Array.isArray() - JavaScript | MDN

するとこんな記述が。

f:id:chuck0523:20150823092207p:plain

ふむ。じゃあ逆に言えば、pushやtoStringはもっと昔からあったんですね!

ちなみにIEではisArray, keys, createはIE9から実装されているそうです↓

f:id:chuck0523:20150823092259p:plain

相変わらず残念すぎる…。

 

62行目:関数のコンストラクタを変数定義?

f:id:chuck0523:20150823092746p:plain

これなにやってるんだろう…(・・;)

空の無名関数を変数に代入してますよね。変数名はCtor。ググったらコンストラクタの略っぽいです。

Ctorを使っているのは150行目のこの関数。

f:id:chuck0523:20150823092935p:plain

全く意味がわかりませんねw

 

ちょっとCtorの中身を調べてみましょう!まずはプロパティ一覧を表示させてみます。

vividcode.hatenablog.com

 

in演算子を使えば取得できる模様。in演算子ってたしか、グッドパーツによると非推奨らしいですが、デバッグなら問題ないですよね!

 

使い方(windowを例に)

f:id:chuck0523:20150823093426p:plain

コンソールで確認するとこのとおり。

f:id:chuck0523:20150823093439p:plain

ずらーっとプロパティが出てきます!

 

これをCtorで試してみます。

f:id:chuck0523:20150823093529p:plain

 

f:id:chuck0523:20150823093538p:plain

あれ??なにもでない???プロパティを持ってない??

 

調べた-> Function - JavaScript | MDN

f:id:chuck0523:20150823093804p:plain

プロパティあるじゃん!

 

f:id:chuck0523:20150823093952p:plain

コンソール!コンソール!

f:id:chuck0523:20150823094011p:plain

celler -> null

constructor -> functionなんちゃら

length -> 0

name -> 空文字(typeofで調べたらstringでした)

 

ふーむ。じゃあ、なんてin演算子で出なかったんだろ。。。

十一章第四回 Objectとプロパティ — JavaScript初級者から中級者になろう — uhyohyo.net

ひょっとしてこれかな??

普通にプロパティに代入したりすると、enumerable属性はtrueのプロパティが作られます。しかし、Object.prototypeが持つメソッドとか、JavaScriptの言語仕様としてすでに存在しているようなプロパティは、基本的に列挙のじゃまにならないようにenumerableがfalseです。さっき発生した謎の答えはこれです。

でもwindowのプロパティは出たけど、windowは特殊なのかな???

あとでまた読もう。

 

 まとめ

今回はここまでにします。今回は50行くらい読みました。全部で1600行あることを考えると、まあ悪くないペースなんじゃないかなと。少なくとも、読むのに5~10年かかる!なんてことななさそうで安心しましたw

(ただjQueryのコードは相当長いらしいです。いつか読みたい…)