オブジェクトとは

オブジェクトについて学習したので、まとめました。

オブジェクトってなんだろう?

オブジェクトとは、プロパティを格納する箱のようなものです。プロパティとは、個々のデータが入っているもののことです。プロパティは、名前(キー)と値(バリュー)がセットになっています。

値には数値、文字列、真偽値、関数などを格納することができます。値に、関数が格納されているプロパティはメソッドと呼ばれます。

const Person = {
  name: "なかがわ",
  age : 35,
  country : "日本",
  showProfile(){ //メソッド
     const text = document.createElement("p");
     text.textContent = `${this.name}さんは、${this.age}歳で、${this.country}に住んでいます`;
     document.body.appendChild(text);
  }
}

オブジェクトの作り方

先程は、プロパティをセットしたオブジェクトでしたが、プロパティを設定せずに、新しいオブジェクトを作ることもできます。

オブジェクトリテラル({})やnew演算子は、Object(親)オブジェクトを元にして新しいオブジェクト(子孫・インスタンス)を作成するための構文です。どちらもやっていることは同じです。

Objectオブジェクトとは、JavaScriptがあらかじめ用意している組み込みオブジェクトの一つです。

//オブジェクトリテラルで作成
const obj = {};

//new演算子で作成
const obj = new Object();

プロパティのセット

オブジェクトリテラルを使う方法

const Person = { 
  name: "なかがわ",
  age : 35,
  country : "Japan",
  showProfile(){ 
     console.log(`${this.name}さんは、${this.age}歳で、${this.Japan}に住んでいます`);
  }
}

new演算子を使う方法

const Person = new Object();  
Person.name = "なかがわ";  
Person.age = 35; 
Person.country = "Japan",
Person.showProfile = function () {
  console.log(`${this.name}さんは、${this.age}歳で、${this.Japan}に住んでいます`);
}

組み込みオブジェクトとは

JavaScriptには、あらかじめ定義されている組み込みオブジェクトがあります。ネイティブオブジェクト、ビルトインオブジェクトという呼び方もあります。

組み込みオブジェクトには、Object,Array,String,Number,Function,Booleanなどがあります。

Objectは全てのオブジェクトの元になるオブジェクト(祖先)

その中でも、Objectは、他の全てのオブジェクトのベースとなるオブジェクトです。

JavaScriptにおいて、全てのオブジェクトは、Objectの子孫(インスタンス)であり、Array,String,FunctionなどはObjectが持っているプロパティやメソッドを、まるで自分自身が持っているかのように、使うことができます。

まい

Webサービス制作会社で、Wordpressのテーマ開発や2Dシミュレーターの開発、JavaScriptを使用したフロントエンド周りの実装を担当しています。 JavaScriptが好きです。 最近は、3D Model Configuratorの制作にチャレンジしています。

JavaScriptカテゴリの最新記事