JavaScriptのオブジェクトベース:javascript Basic objects


オブジェクト


オブジェクトは、オブジェクトに関連する데이터および함수の{集合}である.
通常、オブジェクトは複数の데이터 & 함수からなり、オブジェクト内では通常프로퍼티 & 메소드と呼ばれる.

オブジェクトのデフォルト


他のJS要素と同様に、
オブジェクトの作成は、변수의 정의および변수의 초기화から開始します.
オブジェクトのデフォルト宣言
var person = {};
.
person // 출력결과 : {}
typeof(person) // 출력결과 : 'object'
객체{ } 중괄호と定義される.
各種オブジェクト設計構造
客体は데이터 : property함수 : methodの集合である.この場合、property(プロパティ)はキー:値ペアで構成されます.
ペアproperty|Key : value(1)基本設計構造
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 	// 출력결과 : (2) ['Bob','Smith']
person.name[0]	// 출력결과 : 'Bob'
person.age	// : 32
person.interests[1]// : 'music'
person.bio()	// alert : Bob Smith is 32 years old. He likes music and skiing.
person.greeting() // alert : Hi! I'm Bob.

(2)サブネームスペース:オブジェクト内のオブジェクト

const person = {
  name: {		// 하위 네임스페이스 객체 속의 객체
    first: 'Bob',
    last: 'Smith'
  },
  age: 32
};

+サブネームスペースを呼び出す


(1)点マーク法
person.name.first // : 'Bob'
person.name.last	// : 'Smith'
(2)括弧表記法
person['age'] // : 'Bob'
person.['name']['first']	// : 'Smith'
このカッコ表現は配列内のプロジェクトへのアクセスと非常に類似しており,実際にはほぼ同じ方法である.項目を選択するには、インデックス番号ではなく、各メンバーの値に関連付けられた美しさを使用します.
括弧マーク法には大きな利点がある.
プロパティの値を動的に変更できるだけでなく、
propertyの名前もダイナミックに割り当てることができます!!
var myDataName = 'height';
var myDataValue = '1.75m';
person[myDataName] = myDataValue;
.
console.log(person.height)
  • 出力結果:「1.75 m」
    .
    .
    カッコ内に変数を挿入することにより、myDataValueの値も動的に割り当てられる'height'という新しい名前のpropertyがpersonオブジェクトに動的に割り当てられる.
  • オブジェクトメンバーの設定


    これまでは、オブジェクトメンバーを単純に呼び出してインポートまたは返すだけでした.
    これからは、ポイントマーキング法/カッコマーキング法を使用して、設定メンバーを簡単に指定し、オブジェクトのメンバーを設定(更新)します.
    この方法は、既存のオブジェクトメンバーに対して単純な갱신を行うだけでなく、新しい멤버를 생성を行うこともできる.
    person.age = 45;
    person['name']['last'] = 'Cratchit';
    
    person['eyes'] = 'hazel';
    person.farewell = function() { alert("Bye everybody!"); }

    ref :


    MDN - Basic Objects : https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Basics