JavaScript オブジェクト指向クラス継承ケースの説明

JavaScript オブジェクト指向クラス継承ケースの説明

1. オブジェクト指向のクラス継承

これまでの章では、JavaScript のオブジェクト モデルがプロトタイプ実装に基づいていることを見てきました。その特徴はシンプルさですが、従来のクラス インスタンス モデルよりも理解しにくいという欠点があります。最大の欠点は、継承の実装には大量のコードを記述し、プロトタイプ チェーンを正しく実装する必要があることです。

もっと簡単に書く方法はありますか?持っている!

ここに画像の説明を挿入

まず、関数を使用して Student を実装する方法を確認しましょう。

    関数 Student(名前) {
        this.name = 名前;
    }

    // ここで、この Student にメソッドを追加する必要があります。Student.prototype.hello = function () {
        alert('こんにちは、' + this.name + '!');
    }
    
    Student.prototype.hello.apply(新しいStudent("Xiao Ming")); 

ここに画像の説明を挿入

新しい class キーワードを使用して Student と記述する場合は、次のように記述できます。

ここに画像の説明を挿入

最後に、前のセクションと同じコードを使用して Student オブジェクトを作成します。

ここに画像の説明を挿入

クラスの継承

ここに画像の説明を挿入

これで、JavaScript オブジェクト指向クラス継承ケースに関するこの記事は終了です。JavaScript オブジェクト指向クラス継承に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • js 学習ノート: class、super、extends キーワード
  • JSでES6クラスの使い方をすぐにマスター
  • JS タブ プラグインを作成する 2 つの方法 (jQuery とクラス)
  • JSを使用したクラス名の追加と削除の詳細な説明
  • フロントエンドJavaScriptのクラス

<<:  macOS での MySQL 8.0.17 のインストールと簡単な設定チュートリアル

>>:  Windows 10 に付属する仮想マシンのネットワークを設定するための詳細な手順 (グラフィック チュートリアル)

推薦する

配列をフィルタリングするJavaScript

この記事では、配列フィルタリングを実装するためのJavaScriptの具体的なコードを参考までに紹介...

使用状況分析を備えたMySQL

持つことの使用法having 句を使用すると、グループ化後にさまざまなデータをフィルター処理できます...

ウェブページの右下隅に「いいね!」カード効果を実現するための CSS (サンプルコード)

効果 HTML を実装するには、まずクリーンな HTML ページを準備し、ノードを記述します。 &l...

CentOS の環境変数と設定ファイルの詳細な説明

序文CentOS 環境変数設定ファイル システムは階層型システムであり、他のマルチユーザー アプリケ...

JavaScriptの浅いコピーと深いコピーについての簡単な説明

目次1. 直接譲渡2. 浅いコピー3. ディープコピー1. JSONオブジェクトメソッド2. 再帰コ...

CSS で div にスクロールを追加し、スクロール バーを非表示にする

CSS は div にスクロールを追加し、スクロール バーを非表示にします。具体的なコードは次のとお...

マークアップ言語 - テキストの CSS スタイルを指定する

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

Vue の関連ページへのマルチレベルジャンプ (ページドリルダウン) 機能の完全な例

背景プロジェクト開発プロセスでは、前のページから次のページにジャンプする必要に迫られることがよくあり...

ウェブフロントエンドコードを書く際の考慮事項のまとめ

1. HTMLタグの前に次のような文を追加するのが最適です。 <!DOCTYPE HTML P...

UbuntuにMySQLデータベースをインストールする方法

Ubuntu は、Linux をベースにした無料のオープンソース デスクトップ PC オペレーティン...

jsネイティブカルーセルプラグインの制作

この記事では、jsネイティブカルーセルプラグインの具体的なコードを参考までに共有します。具体的な内容...

Vue ElementUI フォームのフォーム検証

フォーム検証は、フロントエンド開発プロセスで最もよく使用される機能の 1 つです。私の個人的な仕事経...

JavaScript で Priority Queue を実装する

目次1. 優先キューの紹介2. 優先キューのカプセル化1. 優先キューの紹介通常のキューに要素が挿入...

Webpackプラグインを書いてnpmに公開するための80行のコード

1. はじめに最近、 Webpackの原理を勉強しています。これまでは Webpack の設定方法し...