第13回　オブジェクトを理解しよう。

今回からオブジェクトです。
オブジェクトは以前に少し説明していますね。

「○○オブジェクトに変数とか関数など、いろんなものが入れられます！」
というお話をしたことを覚えていただけてたら嬉しいです。
まずはイメージを固めるということで実際オブジェクト作ってみましょう。

オブジェクトの作り方

var Car = {}; //オブジェクト作成

1	var Car = {}; //オブジェクト作成

はいできた！
Carオブジェクトできたよ！ヤッター！
Chromeコンソールで入力すると作成したオブジェクトの内容を
確認することができます。
では確認してみましょう。

ほーら何も入ってない。
でもオブジェクトって出てますね、上出来です。
次にObject三角形を押してみてください。
ほら、めっちゃいっぱい出てきた。
__proto__とか、こんなの入れてないのにね。
これはオブジェクトを作ると自動的に作られるものでjavascriptの
重要な機能の一つです。詳細については、また別途行いますので、
今は見えてないことにしておいてください。
なので空です。イイですね。空です。

空のオブジェクトができたので色々追加していきましょう。

今回Carオブジェクトを作ったので
車に関するものをオブジェクトに入れていきましょう。
そうですね。

製造元
車種
ナンバー

なんて入れてみましょうか。
入れ方は下記の通りです。

Car.make = "Toyota";   //プロパティ作成（製造元）
Car.model = "Prius";   //プロパティ作成（車種）
Car.no = '沖縄も00-00'; //プロパティ作成（No)

Car.make = "Toyota"; //プロパティ作成（製造元）

Car.model = "Prius"; //プロパティ作成（車種）

Car.no = '沖縄も00-00'; //プロパティ作成（No)

「プロパティ」というのは属性とか特性とかいう意味があります。
つまり、Carオブジェクトに製造元、車種、ナンバーという
属性を追加しました。
一旦まとめます。プロパティを追加するときは下記の通りです。

object.プロパティ名 = 値   //objectにプロパティを追加

1	object.プロパティ名 = 値 //objectにプロパティを追加

OKですね。
次です。今作ったオブジェクト車はポンコツです。
ダメな車です。走らないですし、エアコンつかないです。
とりあえず、エアコンと走る機能をつけましょう。

Car.ondo = 0;
Car.speed = 0;

Car.aircon = function(ond){
                 alert('エアコンの温度を'+ond+'にします！');
                 this.ondo = ond;
             }   //エアコンの温度を設定！

Car.drive = function(spd){
                 alert('車のスピードを'+spd+'にします')
                 this.speed = spd
            }

Car.ondo = 0;

Car.speed = 0;

Car.aircon = function(ond){

alert('エアコンの温度を'+ond+'にします！');

this.ondo = ond;

} //エアコンの温度を設定！

Car.drive = function(spd){

alert('車のスピードを'+spd+'にします')

this.speed = spd

}

できました！
解説です。

1行目は先ほど説明したプロパティの作成です。
車の温度を保存する予定です。
2行目も同様です。車の速度を保存するために作成しました。
3行目で関数代入方式で関数を作っています。
代入はプロパティの時と同じような感じです。オブジェクト名.関数名
車のスピードの表示と保存をするdriveをCarオブジェクトに
追加しました。

1点、見慣れない言葉が出てますね。「this」
今回の場合、thisは自分のオブジェクト「Car」を表し、Carオブジェクトの
ondoとspeedに値を設定しているという流れです。
thisについてはまた別途説明します。

実際動かしてみましょう。

Car.aircon(20)         //エアコンの温度を20にします。とアラートされる
console.log(Car.ondo) //プロペティCar.ondoの値が20に変更されている。

1 2	Car.aircon(20) //エアコンの温度を20にします。とアラートされる console.log(Car.ondo) //プロペティCar.ondoの値が20に変更されている。

動きましたか？
このように、オブジェクト内に紐づけられた関数をメソッドと呼びます。

ちなみに今回は説明のためプロパティとメソッドを後から追加しましたが、
オブジェクト作成と同時に作ることもできるので、合わせて覚えておきましょう。

Car = {
    make:"Toyota",   //プロパティ作成（製造元）
    model:"Prius",   //プロパティ作成（車種）
    no:'沖縄も00-00', //プロパティ作成（No)
   
    ondo:0,
    speed:0,

    aircon:function(ond){
         alert('エアコンの温度を'+ond+'にします！');
          this.ondo = ond;
    },

    drive:function(spd){
         alert('車のスピードを'+spd+'にします');
         this.speed = spd
    },

}

Car = {

make:"Toyota", //プロパティ作成（製造元）

model:"Prius", //プロパティ作成（車種）

no:'沖縄も00-00', //プロパティ作成（No)

ondo:0,

speed:0,

aircon:function(ond){

alert('エアコンの温度を'+ond+'にします！');

this.ondo = ond;

drive:function(spd){

alert('車のスピードを'+spd+'にします');

this.speed = spd

}

そうですね、連想配列の作成方法と同じですね！

実はjavascriptの配列はオブジェクトなんです。。
かなり前の話となりますが、以前、配列の長さ（要素数）を簡単に
出せると話したことがあります。

配列.length

配列.length

どーん！これです。for文のところで使いましたね。
今なら意味わかると思います。
そうです。配列オブジェクトのlengthプロパティを参照したんですね。

これ以外にも日付で利用したDate関数でnewした場合も
オブジェクトが作られるので、GoogleChromeのコンソールで
どんなプロパティがあるか確認して見てくだだいl。

オブジェクトを変数に代入すると参照になる

最後に一つ、重要な注意事項です。
オブジェクトをイコールで変数に代入しているかのような書き方をしますが、
変数にオブジェクトがそのまま入っているわけではありません。
じゃあ何が入ってるのか、
ズバリ、オブジェクトへの「参照」が入ってます。
抽象的ですね。これはちょっと難しいです。
言い換えると「アドレス」もっと言い換えると「オブジェクトの場所情報」を変数に代入しています。確認して見ましょう。
次のプログラムのアラート文は何が表示され流でしょうか？

var obj1 = { Name : 'billy' }   //Nameプロパティをもつオブジェクトを作成
var obj2 = obj1;                        //obj1をobj2に代入

obj2.Name = 'Tony';                //obj2のNameプロパティをTonyに変更
alert(obj1.Name);                    //obj1のNameプロパティを参照、結果は？