JavaScript でクラスを作成する

  1. JavaScript のクラス
  2. JavaScript でクラスを作成する
  3. JavaScript のクラスでのメソッドの宣言
  4. JavaScript のクラスでの getset の使用
JavaScript でクラスを作成する

JavaScript では、特定のタスクを有効にするための基本的な関数宣言プロセスがありますが、関数はオブジェクトを作成するために機能するという概念を持ちません。 関数は、特定のタスクを実行するための独立したコード ブロックです。

JavaScript のクラス

クラスは何をしますか? クラスの概念は、価値のあるものを構築するための断定的なアプローチを持つ ES6 の更新によって導入されました。

複数のキャラクターでゲームを作成しているとします。 キャラクターには、人間のような姿、2つの目、2つの耳、2つの手などがあります。

文字ごとに明示的な関数を定義すると、混乱と変更の不安が生じます。 そこで、図の共通機能を保持するクラスを作成します。 したがって、クラスはオブジェクトの青写真として機能します。

ここでは、クラスの基本的な初期化について説明し、それが機能するいくつかの重要な方法を示します。 また、いくつかの注意点があります。このクラスは JavaScript の厳密モードで動作するため、ドライバー コードの前にそれを開始します。

もう 1つの重要なポイントは、関数とは異なり、クラスが宣言される前にクラスを呼び出すことができないということです。 関数とメソッドでは、最初にメソッドを呼び出し、後でその詳細を記述できます。

しかし、クラスでは常に内容と宣言を記述し、それらを明示的に呼び出す必要があります。 そうしないと、referenceError が発生します。

それでは、トピックのより良いプレビューのためにコード行にジャンプしましょう。

JavaScript でクラスを作成する

JavaScript でクラスを作成するには、常に class キーワードを使用します。 その後、クラスに資格を与える名前が定義されます。

この例では、value パラメータを持つ constructor メソッドを持つクラス abc を使用します。 これは、他のメソッドや式が宣言されていなくても、クラスは常にこのコンストラクターをコンテンツとして持つことを意味します。

コンストラクターは、デフォルトまたは基本部分のようなものです。

クラスとそのコンストラクターが完成したら、クラスのインスタンスまたはオブジェクトを開始します。 また、コンストラクター パラメーターと共にオブジェクトを呼び出すと、クラスのプロパティである値が返されます。

したがって、クラスの下に作成されたオブジェクトは、そのクラス abc のすべてのプロパティを所有することを意味します。 コードを確認してみましょう。

コードスニペット:

'use strict';

class abc {
  constructor(value) {
    this.value = value;
  }
}

var x = new abc(5);
console.log(x.value)

出力:

JavaScript でクラスを作成

JavaScript のクラスでのメソッドの宣言

前のコード例では、コンストラクターがどのように機能するかを見てきました。 それ以外に、プライベート プロパティと基本メソッドを開始することもできます。

private 宣言の場合、それらはインスタンスからアクセスできません。 ただし、明示的に private を宣言せずに宣言されたメソッドは、インスタンスによってアクセスおよび変更できます。

以下の例は、上記のステートメントをサポートしています。

コードスニペット:

'use strict';

class abc {
  constructor(value) {
    this.value = value
  }
  math() {
    return this.value + 5
  }
}
var x = new abc(5);
console.log(x.value);
console.log(x.math());

出力:

クラス内メソッド宣言

JavaScript のクラスでの getset の使用

get および set キーワードは、getter および setter と呼ばれることが多く、関数をより明示的に定義するために使用されます。 ここで、セッター部分は、要件に基づいて値を設定したり、何らかの計算を実行したりします。

その後、ゲッターは値をクラスに返します。 このプロセスにより、タスクがより柔軟になります。

この概念を例で視覚化してみましょう。

コードスニペット:

'use strict';

class abc {
  constructor(val) {
    this.val = val
  }

  get math() {
    return this.value
  }

  set math(y) {
    this.val = y + 10
  }
}

var x = new abc()
x.math = 32
console.log(x.val)

出力:

クラスでの get と set の使用

チュートリアルを楽しんでいますか? <a href="https://www.youtube.com/@delftstack/?sub_confirmation=1" style="color: #a94442; font-weight: bold; text-decoration: underline;">DelftStackをチャンネル登録</a> して、高品質な動画ガイドをさらに制作するためのサポートをお願いします。 Subscribe
Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn Facebook

関連記事 - JavaScript Class