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 に付属する仮想マシンのネットワークを設定するための詳細な手順 (グラフィック チュートリアル)

推薦する

HTMLでカメラを読み込む方法

効果図: 全体的な効果: ビデオ読み込み中: 写真:ステップ1: HTML要素を作成するまず、HTM...

MySQLの日付文字列タイムスタンプ変換の詳細な説明

時刻、文字列、タイムスタンプ間の変換は、日常生活でよく使用されます。よく使用されますが、私は使用する...

Vue での keepAlive の使用例の詳細な説明

開発においては、一覧から詳細ページにジャンプし、また詳細ページに戻る際に一覧ページの状態(スクロール...

docker-compose ポートと expose の違いの詳細な説明

docker-compose でコンテナ ポートを公開する方法は、ports と expose の ...

MySQLのバッファプールの詳細な説明

MySQL のデータはディスクに書き込む必要があることは誰もが知っています。ディスクの読み取りと書き...

Linux でのソース パッケージ インストールのサービス管理

目次1. ソースパッケージサービスの起動管理2. ソースパッケージサービスのセルフスタート管理3. ...

Vueは画像のドラッグと並べ替えを実装します

この記事の例では、画像のドラッグと並べ替えを実装するためのVueの具体的なコードを参考までに共有して...

Mac 向け MySQL 5.7.17 のインストールと設定のチュートリアル

1. MySQLをダウンロードする公式サイトのダウンロードページをクリックすると次のページに入ります...

MySQLにログインする際のエラー「ERROR 1045 (28000)」を解決する方法

今日はサーバーにログインして、データベース内のいくつかのものを変更する準備をしました。しかし、パスワ...

フォント宝庫 50 種類の素晴らしい無料英語フォントリソース パート 2

デザイナーは独自のフォント ライブラリを持っているため、プロジェクトの設計時にすぐに使用できます。今...

CSSはマウスが画像に移動したときにマスク効果を実現します

1.マスクレイヤーのHTMLコードと画像をdivに配置する.img_div に入れました。 <...

仮想マシンのディスクサイズを拡張する方法

Vmvare が仮想マシンのディスク サイズを設定した後、ディスク領域が不足していることがわかりまし...

jQuery Ajax チャットボットの実装事例

チャットボットは多くの手作業を省くことができ、顧客サービス、天気予報対応など、さまざまな状況で使用で...

JavaScript初心者がよく犯す間違い

目次序文undefined と null の混同紛らわしい数値の加算と文字列の連結戻り文の改行の問題...