前回は関数について書きました。
Hello,World!!が
//関数の宣言をする
function printHello(){
document.write("Hello world!!");
}
//関数を呼び出す
printHello();
のようにして書けることがわかりました。
今回はオブジェクトについて書いていきます。
オブジェクトというとJava脳な自分はオブジェクト指向であったりクラスとしてのオブジェクトみたいなことを連想しますが、JavaScriptのオブジェクトは若干違います。
■JavaScriptでのオブジェクトという概念
完全にオブジェクト指向とはかけ離れたものになります。
また、Javaでいうクラスをインスタンス化したものとも異なります。
JavaScriptでいうオブジェクトとは、名前と値の集合のペアが集まったものです。
{プロパティ名:プロパティ値,プロパティ名:プロパティ値, ・・・}
こんな形の集合です。
実際に書くと
{x:1, y:2, z:3}
見たいな感じですかね。
プロパティはいくつでも持たせることが可能です。
記載にルールは無いですが、最後のプロパティではカンマが無いほうが良いです。
{x:1, y:2, z:3, }でも動きますが、古いIEだと問題になったこともあるみたいです。
現在はそこまで問題になることは無いとは思いますが、たいした手間でもないので
{x:1, y:2, z:3, }→{x:1, y:2, z:3}
にしてしまいましょう。
こんな風にするとイメージがつきやすいと思います。
{weight:70, hight:170, age:18}
前書いた変数名みたいですね。
このオブジェクトを変数に代入して利用することができます。
var taro = {weight:70, hight:170, age:18};
■オブジェクトとプロパティアクセス
記載したオブジェクトの要素にアクセスする方法を記載します。
var taro = {weight:70, hight:170, age:18};
これに対して、taroのweigthを取り出したい場合、
taro.weight
と、変数+ドットで値にアクセスすることができます。
また、上書きも可能です。
taro.age = 19
とすると、元々age:18であったものがage:19になります。
それまでに存在しないプロパティ値に代入した場合、新規でプロパティが追加されます。
そのため、
既存のプロパティに対して代入→上書き
新規のプロパティに対して代入→新規追加
実際に書いてみましょう。
■書くときの便利ツール
書くときですが、毎回htmlの中身を書き換えるのがめんどくさい場合こういったサイトを使うと便利です。
このサイトは書いた内容を即座に実行できるサイトです。
今回はHTMLでコードを書いているので、左上のHTMLの部分にコードを書いて、画面左上のRunをたたくと実行してくれます。
もちろん拡張子をhtmlにして、中にコードを書いてブラウザで実行という今までの方法でも
問題はありません。
実際に書くとこんな感じになります。
プロパティアクセスをして取り出す方法と、
プロパティアクセスで書き換える方法を書きます。
また、見やすくするために、文字列は+で結合できるので表示を工夫します。
<!DOCTYPE html>
<html>
<head>
<title>サンプル</title>
</head>
<body>
<script>
var taro = {weight:70, hight:170, age:18}; //オブジェクトを宣言する
document.write("変更前：" + taro.hight); //170が出力される
taro.hight = 172;
document.write("変更後：" + taro.hight); //今度は172が出力される
</script>
</body>
</html>
■オブジェクトの値に持たせることができるもの
先ほどは
var taro = {weight:70, hight:170, age:18};
のように変数:値の形でプロパティの値を持たせました。
でもこういったことも可能です(実際は見づらいのでやるかはわかりませんが)。
var func = {sum : function(a,b){return Number(a) + Number(b)} , printHello : function(){document.write("Hello,World!!")}};
このようにオブジェクトの値に関数を入れることも可能です。
<!DOCTYPE html>
<html>
<head>
<title>サンプル</title>
</head>
<body>
<script>
var func = {sum : function(a,b){return Number(a) + Number(b)} , printHello : function(){document.write("Hello,World!!")}};//宣言をする
document.write("足し算確認：" + func.sum(4,5)); //sumの関数が実行される→4+5の結果である9が出力される
</script>
</body>
</html>
まぁ見づらいですけどね。できるっちゃできます。
ここまで書いて、今まで出力するときに書いていた
document.write(出力内容);
もプロパティにアクセスしてwrite関数を呼んでいるような感じがわかるでしょうか？
こうなればなんとなくこのオブジェクトとプロパティアクセスの雰囲気はつかんだといっていいと思います。
わからない場合、もう一回この内容を自分でコードを書きながら読んでみてください。
■存在しないプロパティアクセス
自分で書いたときに
undefined
と表示された人もいるかもしれません。
存在しないプロパティにアクセスした場合、undefinedと表示されます。
プロパティの文字列は大文字、小文字が区別されます。
そのためsumとSumは別物として扱われます。
うち間違いが無いか確認してみましょう。
■プロパティアクセスの方法
var taro = {weight:70, hight:170, age:18};
これに対してのプロパティアクセスの方法は
taro.age
のようにアクセスしました。
他に
taro[‘age’]
と書いてもアクセスできます。
var name = ‘age’;
taro[name]
と書いても実行できます。
ここに書いたプロパティアクセスは滅茶苦茶使うので(今まで書いてきたもの全部ですが)、
ふわっとでも理解しておいたほうが後の理解が早くなります。
ではではこの辺で！
コメント