複合式カレンダー/前編・クラスとオブジェクトの違い

今回はJavaScriptにおける「クラス」というものと、
Dateクラスについて解説したいと思います。

クラスはオブジェクトの設計図やテンプレートとして機能し、
classというキーワードで定義され、インスタンス(展開)する為に、
newというキーワードを使います。

クラスとオブジェクトの違い
1. メソッドのプロパティ
クラスの特徴

クラスとオブジェクトの違い

例1


const person = {
    age: 30,
    lastName: 'Doe',
    firstName: 'John'
　　//並びの順番を変えてもOK
};
//オブジェクト

class Person {
    constructor({firstName,lastName,age}) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    }
}
//クラス

const john = new Person(person);
//インスタンス

オブジェクトはconst myObject = {};として宣言(初期化)され、
キー(プロパティ)と値を:で区切って記述されます。

メソッドのプロパティ

getBoundingClientRect()のようなメソッドも、
オブジェクトを作成して返す事で、プロパティを参照出来るようになっています。
このように、オブジェクトは特殊な機能のように見えて、
JavaScriptを扱う上で欠かせない機能と言え、
オブジェクトの概念そのものを理解しなくても、
利用出来るような仕様になっています。

例2


function getBoundingClientRect() {
  // メソッド内で各値を計算する
  const top = ...; // 上端の位置を計算する処理
  const left = ...; // 左端の位置を計算する処理
  const width = ...; // 幅を計算する処理
  const height = ...; // 高さを計算する処理
  const bottom = ...; // 下端の位置を計算する処理
  const right = ...; // 右端の位置を計算する処理

  // オブジェクトを作成して返す
  return {
    top: top,
    left: left,
    width: width,
    height: height,
    bottom: bottom,
    right: right
  };
}

クラスの特徴

一方、クラスの中にはコンストラクタconstructor()という特別な関数がありますが、
これはクラスとセットで覚えても問題ありません。

この場合のthisとは、Personクラスの各プロパティを示します。
ただし、例1で挙げたクラスは、最低限の機能を与えたクラスの一体系です。
JavaScriptにおいて、クラス自体を定義するよりも、
組み込みクラスという、実行環境に最初から組み込まれているクラスを利用する方が
圧倒的に多いです。

取り込みクラスは、その役割ごとに、クラスメソッド(メンバーメソッド)※を
総括する、大きな行政機関のようなものだと言えます。
Objectを含めて、組み込みクラスは数多く存在します。