JavaScript入門の書籍を読んで書いてあったこと＋自分で調べたことのメモ書きその5。オブジェクト。

オブジェクト

JavaScriptのオブジェクトはデータと機能の集合体である。変数はプロパティ、関数はメソッド呼ぶ。
MDNのJavaScriptのオブジェクトの解説には何の説明もなく突然「メンバー」という言葉が出てくるが、メンバーとはプロパティ、定数、メソッド、他には何があるかわからないがとにかくオブジェクトが持つすべてのものをデータや機能すべてを「メンバー」と呼んでいるのではないかと思う。
JavaScriptのオブジェクトは柔軟性が高く、既存のオブジェクトにプロパティやメソッドを追加することができる。

オブジェクトの定義・作成の方法

オブジェクトを作成する方法は複数ある。
その場限りでデータをまとめたい場合はオブジェクトリテラルを、それ以外のケースではnew演算子とコンストラクタを使う方法でオブジェクトを作成するとよい。

オブジェクトリテラル

以前の記事参照。

let obj = {
  x: 0,
  y: 0
};

関数ベース

コンストラクタを定義してnew演算子とコンストラクタでオブジェクトを作成する。

function Point(x, y) {
  this.x = x;
  this.y = y;
}

let point = new Point(0, 0);

classキーワード

ES2015から導入されたオブジェクトの定義の方法。JavaやPHPに近い書き方。

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}
let obj = new Point2(1, 2);

標準組み込みオブジェクト

JavaScriptに最初から用意されているオブジェクト。
主な標準組み込みオブジェクトを下記に示す。

カテゴリ	オブジェクト
特殊な値	Infinity, NaN, undefined, globalThis
グローバル関数	isNaN, parseFloat, parseInt, encodeURI, decodeURI など
基本オブジェクト	Object, Function, Boolean, Symbol
エラーオブジェクト	Error, RangeError, ReferenceError, SyntaxError, TypeError など
数値と日付	Number（数値）, BigInt, Math, Date（日付）
テキスト処理	String（文字列）, RegExp（正規表現）
索引付きコレクション	Array（配列）など
キー付きコレクション	Map, Set など
構造化データ	JSON など
制御抽象化オブジェクト	Promise など

WebブラウザやHTMLを操作するDOM APIは標準組み込みオブジェクトではない。DOM APIについて後日。

Dateオブジェクト

日時のオブジェクト。UTCの1970年1月1日からの経過ミリ秒数として日時を持つ。
日時を指定して作成した場合はローカル時刻を基に作成される。

// new Date(year, monthIndex, day, hours, minutes, seconds)
// monthIndexは0オリジン。0は1月。
let day1 = new Date(1970, 0, 1, 0, 0, 0);
console.log(day1.getTime() + "msec");
console.log(day1.getTime() / 1000 / 60 / 60 + "h");
----------
【実行結果】
32400000msec
-9h

プロパティ・メソッドの追加

.プロパティ名 に値を代入することでプロパティを追加できる。

let obj = {};
obj.firstName = "taro";
obj.lastName  = "yamada";
console.log(obj);

【実行結果】

{firstName: 'taro', lastName: 'yamada'}

プロパティに関数オブジェクトを追加することでメソッドを追加できる。この際、関数（メソッド）オブジェクトはfunction式で定義する。アロー関数式は使用しない。
もし下記の例でアロー関数式を用いてメソッドを追加すると、function式の場合と異なりメソッド内で参照している this がメソッドが属しているオブジェクトではないのでおかしなことになる。

obj.getFullName = function () {
  return `${this.firstName} ${this.lastName}`;
}
console.log(obj.getFullName());

【実行結果】

taro yamada