できる気になっているJSを改めてチュートリアルからやってみる 13日目
~~ オブジェクトの基本 ~~
最近ちょっとずつまた学びなおす必要が出てきたなぁと思い、いろいろプログラムを勉強しなおしているところなんですが、実はもう今使っている知識は古いのかもと思って、アップデートしようとおもいやってみる会。
実施するのは、この記事
完全な初心者向けと書かれたチュートリアルは全然初心者向けではないって話。アップデートしていきましょう。
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つの異なる同名オブジェクトがあっても問題なく、動作することになります。
というかんじでおしまい。
この記事が気に入ったらサポートをしてみませんか?