どうも!chuckです。
引き続きUnderscore.jsを読み解いていきます。
前回の記事
Github
今回読んでいく箇所はまだまだライブラリの冒頭。前準備として、プロトタイプやプロパティをいじっている段階です。
それでも学びがあったので、メモ。
30行目:グローバルオブジェクトのプロパティとして、アンダースコアを定義
こちらも変数宣言ですね。グローバルオブジェクトrootに対して、_(アンダースコア)というプロパティを追加したうえで、変数に代入しています。
こちらが通常のwindowオブジェクトです。(抜粋)
一方で、rootの中身を見てみると、
画像の真ん中あたりに、きちんとアンダースコアが追加されていますね!
36行目:プロトタイプの変数保存
こちらも変数宣言。Array(配列)クラスのプロトタイプと、Objectのプロトタイプをそれぞれ変数に代入しています。
こちらもコンソールで確認してみます!
※ l(エル) をconsole.logの関数として定義しています
するとこのとおり。
あれ、Array.prototypeで返ってくるのって空の配列??
調べた。-> Array.prototype - JavaScript | MDN
そしたらこんな記述がありました!
”あまり知られていないことですが、Arrayクラスのプロトタイプ自身もまた配列なのです” …なるほど!じゃあ、空の配列でOKなのかな。
ちなみに、きちんとLengthプロパティはありました!
ブラウザで確認すると以下のとおり!
ゼロ!
Object.prototypeはわかりやすいですね!
toStringやvalueOfなど、オブジェクトの関数が含まれています。
44行目:コアプロトタイプの変数宣言
こちらも変数宣言ですね。
先ほど取得したプロトタイプから、メジャーな関数を取り出して変数に代入しています。コメントではCore prototypes(コアプロトタイプ)なんて書いてありますね!
よく使うから変数化してるんですかね??
あれ、でもこれって必要なのかな???たとえばpushの使い方ってこんな感じ。
でも、この場合のpushって、aryという変数がそもそも保有してるんですよね。配列リテラルで作成した時点でArrayクラスを継承(?)してるわけで…。
なんでいちいち pushを変数定義してるんだろう。。。謎だ。
54行目:ES5関数の変数定義
こちらも変数定義。上のやつとの違いは、こちらの関数たちはES5から追加されたっぽいです。
試しにisArrayを調べてみました。Array.isArray() - JavaScript | MDN
するとこんな記述が。
ふむ。じゃあ逆に言えば、pushやtoStringはもっと昔からあったんですね!
ちなみにIEではisArray, keys, createはIE9から実装されているそうです↓
相変わらず残念すぎる…。
62行目:関数のコンストラクタを変数定義?
これなにやってるんだろう…(・・;)
空の無名関数を変数に代入してますよね。変数名はCtor。ググったらコンストラクタの略っぽいです。
Ctorを使っているのは150行目のこの関数。
全く意味がわかりませんねw
ちょっとCtorの中身を調べてみましょう!まずはプロパティ一覧を表示させてみます。
in演算子を使えば取得できる模様。in演算子ってたしか、グッドパーツによると非推奨らしいですが、デバッグなら問題ないですよね!
使い方(windowを例に)
コンソールで確認するとこのとおり。
ずらーっとプロパティが出てきます!
これをCtorで試してみます。
あれ??なにもでない???プロパティを持ってない??
調べた-> Function - JavaScript | MDN
プロパティあるじゃん!
コンソール!コンソール!
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のコードは相当長いらしいです。いつか読みたい…)