JavaScript インスタンス オブジェクトでプロトタイプ メソッドをオーバーライドする方法の詳細

JavaScript インスタンス オブジェクトでプロトタイプ メソッドをオーバーライドする方法の詳細

JavaScriptでは、通常、次のコードのようにクラスを簡単に定義できます。

var サンプル = 関数() {
    // コンストラクタコードはここ 
}

sample.prototype.func1 = 関数() {
    // func1 コードはここ
}

sample.prototype.func2 = 関数() {
    // ここで func2 コード
}

/* ここにさらにサンプルのプロトタイプ関数があります... */

次に、次のコードを使用してプロトタイプ メソッドをインスタンス化し、アクセスします。

var sampleInstance = 新しいサンプル();
サンプルインスタンス.func1();
サンプルインスタンス.func2();
// サンプルオブジェクトのプロトタイプ関数をさらに呼び出す


しかし、元のsampleオブジェクトを破壊せずにプロトタイプ メソッドの 1 つを書き換えたい場合は、どうすればよいでしょうか。最も簡単な方法は、 sampleを継承する別のクラスを構築し、継承したクラスのプロトタイプ メソッドで基本クラス メソッドを次のように書き換えることです。

var サブサンプル = 関数() {
    // コンストラクタコードはここ
}

// サンプルから継承
subSample.prototype = 新しいサンプル();
subSample.prototype.fun1 = 関数() {
    // サンプルの func1 を上書きする
}

ただし、継承クラスを構築せず、プロトタイプ メソッドを書き換える場合は、次のコードを直接使用できます。

var sampleInstance = 新しいサンプル();
サンプルインスタンス.func1 = 関数() {
    sample.prototype.fun1.call(this); // サンプルの func1 を呼び出す
    // sampleInstance.func1 のコードはここ
}


sampleインスタンス オブジェクトのfunc1メソッドを再定義し、そのプロトタイプ メソッドfunc1にアクセスして、追加のコードを追加しました。このようにして、派生クラスを作成したり、 sampleのプロトタイプ メソッドを破棄したりすることなく、 sampleのプロトタイプ メソッドを拡張します。

JavaScriptインスタンス オブジェクトでのプロトタイプ メソッドのオーバーライドの詳細に関するこの記事はこれで終わりです。JavaScript インスタンス オブジェクトでのプロトタイプJavaScriptのオーバーライドの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScriptは組み込みオブジェクトのプロトタイプメソッド実装を追加します
  • JavaScriptのプロトタイプオブジェクトを徹底的に理解しましょう
  • js のプロトタイプ、プロトタイプ オブジェクト、プロトタイプ チェーンの包括的な分析
  • js でプロトタイプオブジェクトを使用する際の注意点

<<:  XHTML 入門チュートリアル: フォーム タグ

>>:  Dockerでの接続例外中のエラーを解決する

推薦する

JS で配列をループする 4 つの方法のまとめ

この記事では、配列を走査する 4 つの方法を比較してまとめます。 for ループ: for (let...

Docker Compose のサイドカーモードの詳細な説明

目次Docker Composeとは要件に不適切な言語が使用されている実装Docker Compos...

bash スクリプトで ssh/scp コマンドにパスワードを渡す方法の詳細な説明

SSHPASSをインストールする最新のオペレーティング システムでは、sshpass パッケージはデ...

HTML の基本 - CSS スタイルシート、スタイル属性、フォーマット、レイアウトの詳細

1.位置:固定一部の Web サイトの右下隅にあるポップアップ ウィンドウなどの、ブラウザーを基準と...

HTMLファイルで外部CSSファイルを導入する場合のパスの書き方について簡単にまとめます

1. 外部CSSファイルの基本スタイルをインポートする<link> タグを使用して外部ス...

js を使用して年カルーセル選択効果をネイティブに実装する例

序文js を使用して、年の回転選択効果を実現します。では早速、写真を見てみましょう。 1. アイデア...

dockerコマンドの使用にはsudoは必要ありません

docker デーモンは通常の TCP ポートではなくホストの Unix ソケットにバインドする必要...

CSS3で線形グラデーションを実装するためのコードの詳細な説明

序文デモでは古いバージョンのブラウザのグラデーションが実装されています[IE9-]。 IE9 より前...

初心者がHTMLタグを学ぶ(1)

初心者は、いくつかの HTML タグを理解することで HTML を学習できます。この入門書は、初心者...

Vueのライフサイクルについて詳しく説明します

目次序文1. Vue2 のライフサイクルインスタンスのライフサイクルその他のライフサイクルフック2....

CocosCreatorでJSZip圧縮を使用する方法

CocosCreator バージョン: 2.4.2 jszipの実践的なプロジェクトアプリケーション...

MySQL 関数インデックス最適化ソリューション

MySQL を使用する場合、多くの開発者は一部の列に対して関数計算を実行することが多く、その結果、イ...

Pythonの関数知識についての簡単な説明

目次関数パラメータの2つの主要なカテゴリ位置パラメータ可変長パラメータ名前空間要約する関数パラメータ...

Vueスロットの詳細な説明

1. 機能: 親コンポーネントが子コンポーネントの指定された位置に HTML 構造を挿入できるように...

Ubuntu 16.04 64 ビット版の VMware Tools のインストールと構成のグラフィック チュートリアル

この記事では、VMware Toolsのインストールと構成に関するグラフィックチュートリアルを参考と...