【5日目】オブジェクトの解説続き

今回、かなり難しいです。特にスコープ、グローバルオブジェクト、this。 このあたりは、繰り返し説明する予定ですので、今は完全に理解できなくてもOKです！

前日の資料はこちら +JavaScript道場：四日目 / オブジェクトについて

用語集

• consoleオブジェクト
• key: value
• this
• オブジェクト内のスコープ

前回の復習

前回は下記のようなコードを書きましたね！

「オブジェクト」 と 「プロパティ」 という名前に慣れてください。

Copycopy code to clipboard
1var matsudaShinsuke = { name: "松田信介" } // ここがプロパティ keyは`name` valueは`松田信介`
2obj.name // これもプロパティ(nameは `objオブジェクト`のプロパティ)

consoleオブジェクトについて

では、何度か登場している下記のコードについて質問です！

何度も登場していますコチラのコード

Copycopy code to clipboard
1console.log("HELLO")

ところで、consoleとはなんでしょう？

consoleとは なんでしょうか？ .log とは なんでしょうか？ ("hello") とはなんでしょうか？

Copycopy code to clipboard
1// Chrome: Consoleタブで実行してみよう
2　　　
3typeof console
4// "object
5　　　　
6typeof console.log
7// "function"
8　　　
9// ("hello") についてはまだ説明していませんが、関数に引数を与えて実行しています。次回やります。

consoleはオブジェクト、そしてlogはconsoleオブジェクトが持つプロパティなのだった！

consoleについての詳しい説明はこちら。ちょっと読んでみて下さい！

• consoleオブジェクト

グローバルオブジェクト

聞き慣れない言葉が出てきました。グローバルオブジェクトです。

百聞は一見に如かず、まずはいつものようにconsoleタブで試してみます。

Copycopy code to clipboard
1// Chrome: Consoleタブで実行してみよう
2　　
3var a = 100
4console.log(a) // 100
5console.log(this.a) // 100
6　　　
7// this.a の中身を書き換えてみる
8this.a = 200
9console.log(a) // 200
10console.log(this.a) // 200

では、ここのthisとはなんでしょう？

Copycopy code to clipboard
1// Chrome: Consoleタブで実行してみよう
2　　　
3this

注: Chromeブラウザの場合です。JavaScriptは実行されるブラウザによって挙動が違う場合があります。

thisはオブジェクトでした！そして、これが グローバルオブジェクト です。

ポイント

• 変数をvarで生成した時、グローバルオブジェクトに登録される(グローバルオブジェクトのプロパティになる)
• consoleもグローバルオブジェクトのプロパティ

consoleもグローバルオブジェクトのプロパティ

そのため、thisを使って参照ができます(グローバルスコープでは・・・)

これでもいける！

これもいける！

Copycopy code to clipboard
1// Chrome: Consoleタブで実行してみよう
2　　　
3this.window.console.log("hello")

どうやら同じ動きをするようですね。(同じオブジェクトを指している・・・？)

Copycopy code to clipboard
1// Chrome: Consoleタブで実行してみよう
2// 全部同じ意味です！
3　　　　　　
4console.log("hello")
5this.console.log("hello")
6window.console.log("hello")
7this.window.console.log("hello")

では下記のように書くとどうなるでしょうか？

Copycopy code to clipboard
1// Chrome: Consoleタブで実行してみよう
2　　　　
3// オブジェクトの中に二つ関数があり、関数内でthisを使う
4var obj = {
5    test_a: function() {
6    // thisなし
7    console.log("hello")
8    },
9    test_b: function() {
10    // thisあり
11    this.console.log("hello")
12    }
13}

test_a() は問題なしで、test_b() はエラーになります。thisが何を指すか変わるからです。 エラーメッセージにCannot read propertyと出力されていますね。

これならOK

Copycopy code to clipboard
1// Chrome: Consoleタブで実行してみよう
2　　
3var obj = {
4    test_a: function() {
5    // tihsなし
6    console.log("hello")
7    },
8    test_b: function() {
9    // this ではなく window を使う
10    window.console.log("hello")
11    }
12}

thisは呼び出される場所でどのオブジェクトを指すかが変わる

かなり難しい話をしていますので、現時点では分からなくても大丈夫です！

ここをちゃんと理解するためには、「変数のスコープ」「グローバルオブジェクト」にについて理解する必要があります。

次回は、その「変数のスコープ」について解説します！

大事なこと

全てを順を追って説明するのがどうしても難しいため、説明が行ったり来たりします。 今の段階では、完璧に理解しようとしないでください。 まずは、オブジェクト、プロパティ、スコープなどの単語に慣れることから始めてください。

まとめ

• いつも使っているconsoleは、オブジェクトだった
• console.logはconsoleオブジェクトが持つlogという名前のプロパティ（メソッド）
• console.log("hello") 以外にも console.clear() などがある
• console自体もwindowというグローバルオブジェクトのプロパティなので、window.console.log("hello") で呼び出すことができる
• グローバルオブジェクトのプロパティにthisを使ってアクセスする際は、スコープ を意識する必要がある

難しいですね！！難しいので現時点で理解できなくても全く問題ないです！！それではまた明日！！

明日は「関数」の説明に入ります！

前回の課題の回答

↓↓まだ答えてない方はコチラから！↓↓ 答えてみる

二進数 10011001 を十進数に変換するといくつでしょう

答え → 153

解説

Copycopy code to clipboard
11    0    0    1    1   0   0   1  // 10011001
2128  64   32   16   8   4   2   1  // それぞれの桁を10進法に直す
3128  0    0    16   8   0   0   1  // ビットが立っている箇所だけ足す 128+16+8+1=153

分からない人のためにさらに解説

時計は60進法ですね(60で桁が上がる 0-59 の数字を使う) 0:59 → 1:00 1:59 → 2:00

二進法は 0,1 の2つの数字を用いて表す 十進法は 0,1,2,3,4,5,6,7,8,9 の 10個の数字を用いて表す 十六進法は 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f の 16個の数字を用いて表す

またはJavaScriptで

Copycopy code to clipboard
1// Chrome: Consoleタブで実行してみよう
2　　
3// parseInt は 十進数に変換ができる関数
4console.log(parseInt(10011001, 2)); // 153

UTF-8とは何か説明してください

「文字に割り当てた番号」と「実際にコンピュータさんが扱う数字」の対応表。 「文字符号化方式」 の一つ。文字コードは「文字に割り当てられた数字」。文字符号化方式としてUTF-8を使うときの符号化文字集合はUnicode。

• 符号化文字集合：Unicode
• 文字符号化方式：UTF-8

(参照)コチラから引用しました！

自分なりに理解していればOKです。

動的型付け言語のメリットとデメリットを教えてください

メリット

• 型の生成が不要
• コンパイルが必要ない
• 柔軟に開発ができる
• 記述量が少なくてすむ

デメリット

• どんな型でも変数に入ってしまうため、変数にどんなデータが入っているか分かり辛い
• 暗黙の型変換で予想外の挙動をする)
• メモリ効率が悪い(メモリ領域の最適化が行えない)
• エラーが実行時までわからない
• 実行速度が比較的遅い

3Byteで何通りの色を表現できますか？

3Byte = 24bit = 24桁

Copycopy code to clipboard
1// 00000000 00000000 00000000 ~ 11111111 11111111 11111111
22**24 // 2の2４乗
316777216 // 1677万7216色

次回はこちら JavaScript道場：6日目 / 関数について❶