ホームページ > ウェブフロントエンド > フロントエンドQ&A > JavaScriptでクラスを追加する方法を詳しく紹介

JavaScriptでクラスを追加する方法を詳しく紹介

PHPz
リリース: 2023-04-06 14:02:10
オリジナル
950 人が閲覧しました

JavaScript はインターネット開発で広く使用されているプログラミング言語で、Web ページに動的な効果と対話性を実現するのに役立ちます。 JavaScript では、クラスはデータとメソッドをカプセル化するオブジェクトです。クラスを追加することで、コードをより適切に整理し、開発効率を向上させることができます。 JavaScriptでクラスを追加する方法を詳しく紹介します。

1. クラスを定義する

JavaScript でクラスを定義するには、class キーワードとクラス名を使用する必要があります。以下に示すように、Person という名前のクラスを定義しました:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greetings() {
    console.log("Hello, my name is " + this.name + " and I am " + this.age + " years old.");
  }
}
ログイン後にコピー

上記のコードでは、コンストラクター メソッドを使用して name と age という 2 つの属性を Person クラスに追加し、greetings メソッドを使用して追加しました。関数。

2. オブジェクトの作成

クラス オブジェクトを作成するには、新しいキーワードとクラス名を使用する必要があります。以下に示すように、person という名前の Person クラス オブジェクトを作成しました。

let person = new Person("Tom", 20);
ログイン後にコピー

上記のコードにより、Tom という名前、年齢 20 歳の Person クラス オブジェクトを正常に作成できました。

3. 継承されたクラス

JavaScript ではクラスを継承でき、サブクラスは親クラスのすべてのプロパティとメソッドを継承できます。次に、People クラスを継承する Student という名前のサブクラスを作成します。

class Student extends Person {
  constructor(name, age, school) {
    super(name, age);
    this.school = school;
  }

  study() {
    console.log(this.name + " is studying at " + this.school);
  }
}
ログイン後にコピー

上記のコードでは、extends キーワードを通じて Student クラスが Person クラスから継承することを指定します。コンストラクター メソッドでは、スーパー メソッドを呼び出して親クラスの属性を取得し、school 属性を追加します。学習メソッドに学習機能を追加しました。

4. スーパークラスのメソッドを使用する

継承関係では、サブクラスも親クラスのメソッドを使用できます。たとえば、Student クラスで親クラスのgreetings() メソッドを呼び出します。

class Student extends Person {
  constructor(name, age, school) {
    super(name, age);
    this.school = school;
  }

  study() {
    console.log(this.name + " is studying at " + this.school);
  }

  greetings() {
    super.greetings();
    console.log("I am a student.");
  }
}
ログイン後にコピー

上記のコードでは、super キーワードを通じて親クラスのgreetings() メソッドを取得し、独自のメソッドを追加します。サブクラスの Say hello メッセージ。

概要

上記の導入を通じて、JavaScript でクラスを定義、作成、継承、使用する方法を学びました。開発者は、独自のニーズに応じてこれらのテクノロジーを柔軟に使用して、コードの可読性と効率を向上させることができます。実際の作業では、これらのテクノロジーを組み合わせて、より複雑なプロジェクト開発を完了することもできます。

以上がJavaScriptでクラスを追加する方法を詳しく紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート