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

推薦する

VMware 仮想化 KVM のインストールと展開のチュートリアルの概要

仮想化1. 環境セントオス7.3 selinuxとファイアウォールを無効にする2. 仮想化環境の構成...

MySQLのジョイントインデックス機能の分析と使用例

この記事では、例を使用して、MySQL 共同インデックスの機能と使用方法を説明します。ご参考までに、...

WeChat アプレット wxss で外部 CSS ファイルとアイコンフォントを参照する方法

原因外部ファイルをミニプログラムにインポートする方法は次のとおりです: @import "...

jQueryはクッキーを操作する

コードをコピーコードは次のとおりです。 jQuery.cookie = 関数(名前、値、オプション)...

Helloダイアログボックスのデザイン体験の共有

「どうしたの?」特定の種類のダイアログ ボックスに慣れていない限り、ダイアログ ボックスが表示された...

MySQL killコマンドの実行原理の詳細な説明

目次キル命令実行原理命令実行特性クエリ実行の強制終了の原則接続終了の実装原則中断される可能性はありま...

NodeJSとブラウザにおけるこのキーワードの違い

序文JavaScript を学習した人なら誰でも、さまざまな環境で this がどこを指すかという問...

JS はデータ URL をどのように理解するのでしょうか?

目次概要データ URL の使用を開始するデータURL構文複数言語の文字列のBase64エンコードとデ...

Vue コンポーネントの切り替え、動的コ​​ンポーネント、コンポーネントのキャッシュについて

目次1. コンポーネント切り替え方式方法1: v-ifとv-elseを使用する方法 2: 組み込みコ...

vue.js パッケージ化プロジェクトの後の空白ページの解決策

Vueに触れたばかりのパートナーの多くは、開発環境ではVueプロジェクトは正常であるが、パッケージ化...

MySQLに挿入する前にデータが存在するかどうかを確認する方法

ビジネスシナリオ: 訪問者の訪問状況を記録する必要があるが、繰り返し記録することはできない挿入する前...

Vue における ref と $refs の紹介と使用例

序文JavaScript では、document.querySelector("#demo...

Intelli Idea で Tomcat 設定が見つからない問題の解決方法

2日前に新しい会社に入社しました。その会社ではIntelli Ideaを使っています。Eclipse...

Docker はクラスター MongoDB 実装手順を構築します

序文会社の業務上のニーズにより、独自の MongoDB サービスを構築する予定です。MongoDB ...