できる気になっているJSを改めてチュートリアルからやってみる 13日目

～～ オブジェクトの基本 ～～

最近ちょっとずつまた学びなおす必要が出てきたなぁと思い、いろいろプログラムを勉強しなおしているところなんですが、実はもう今使っている知識は古いのかもと思って、アップデートしようとおもいやってみる会。

実施するのは、この記事

MDN - Javascript

完全な初心者向けと書かれたチュートリアルは全然初心者向けではないって話。アップデートしていきましょう。
JavaScript オブジェクト入門 をやってます。

オブジェクトの基本

書き方とかはこんな感じ

const person = {
 name: ['Bob', 'Smith'],
 age: 32,
 gender: 'male',
 interests: ['music', 'skiing'],
 bio: function() {
   alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
 },
 greeting: function() {
   alert('Hi! I\'m ' + this.name[0] + '.');
 }
};

でそのオブジェクトにアクセスするには、

person.name
person.name[0]
person.age
person.interests[1]
person.bio()
person.greeting()

でアクセスができて、「.（ドット）」でつないで確認をする

それぞれ、

データ項目はプロパティ
関数はメソッド

と呼ばれます。

そしてこのように記号を使って書くオブジェクトは、オブジェクトリテラルと呼ばれます。

※後ほどクラスを使用して生成する方法も出てきます。

サブ名前空間の扱い

上記オブジェクトの名前部分を、

name : {
 first: 'Bob',
 last: 'Smith'
},

に書き換えたら、アクセスするときはドットでさらに数珠繋ぎできます。

person.name.first
person.name.last

オブジェクトメンバーの設定

メンバーの値の更新は、次のように行えます。

person.age = 45;
person['name']['last'] = 'Cratchit';

で、以下のように新しく追加することも可能です。

person['eyes'] = 'hazel';
person.farewell = function() { alert("Bye everybody!"); }

これによって、新しいメンバーが追加されました。角かっこでの書き方の良いところは、動的にメンバーの値を設定できるだけでなく、メンバーの名前も追加できることです。

let myDataName = 'height';
let myDataValue = '1.75m';
person[myDataName] = myDataValue;

こんな感じで書くと、動的にPersonにメンバー追加が可能です。

"this" とは何か

const person = {
 ...,
 greeting: function() {
   alert('Hi! I\'m ' + this.name[0] + '.');
 }
};

これにおける this は、person を指します。これのメリットは、そのオブジェクトだけを指し、万が一、2つの異なる同名オブジェクトがあっても問題なく、動作することになります。

というかんじでおしまい。