JavaScript プロトタイプのデータ共有とメソッド共有の実装を調べる

JavaScript プロトタイプのデータ共有とメソッド共有の実装を調べる

データ共有

プロトタイプにはどのようなデータを書き込む必要がありますか?

共有する必要があるデータはプロトタイプに書き込むことができます

プロトタイプの機能の1つ:データ共有

属性を共有する必要があり、メソッドも共有する必要があります。

  • 共有する必要のないデータはコンストラクタに書き込む必要があります
  • 共有する必要があるデータはプロトタイプに書き込まれます

事例を見てみましょう

データ共有事例

生徒の名前、年齢、性別はそれぞれ異なります。

生徒全員の身長は188cm、体重は55kgです。
生徒全員は毎日 500 行のコードを書かなければなりません。生徒全員は毎日 10 ポンドのスイカを食べなければなりません。

共通データをプロトタイプに書き込むことができます

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <title>タイトル</title>
  <スクリプト>
    関数 Student(名前,年齢,性別) {
      this.name=名前;
      this.age=年齢;
      this.sex=セックス;
    }
    // 生徒全員の身長は188、体重は55です
    // 生徒全員は毎日 500 行のコードを書かなければなりません // 生徒全員は毎日 10 ポンドのスイカを食べなければなりません // プロトタイプ オブジェクト Student.prototype.height="188";
    Student.prototype.weight="55kg";
    Student.prototype.study = 関数 () {
      console.log("学習中、500 行のコードを書くのは簡単です");
    };
    Student.prototype.eat = 関数(){
      console.log("10ポンドのスイカを食べる");
    };
    //オブジェクトをインスタンス化して初期化します var stu = new Student ("晨光", 57,"女");
    console.dir(学生);
    コンソールのdir(stu);

// stu.eat();
// stu.study();

  </スクリプト>
</head>
<本文>


</本文>
</html>

出力される内容は次のとおりです:

ここに画像の説明を挿入

シンプルなプロトタイプの作成

プロトタイプにはもっと簡単な方法もあります。以下は上記の例の修正です。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <title>タイトル</title>
  <スクリプト>
    関数 学生(名前, 年齢, 性別) {
      this.name = 名前;
      this.age = 年齢;
      this.sex = セックス;
    }
    //簡単なプロトタイプの記述 Student.prototype = {
      //コンストラクタを手動で変更して、コンストラクタ:Student を指すようにします。
      高さ: "188",
      体重: "55kg",
      研究: 関数 () {
        console.log("勉強するのはとても楽しいです");
      },
      食べる: 関数() {
        console.log("おいしいものが食べたい");
      }
    };

    var stu=new Student("Ding Ding Da Ming",20,"男性");
    食べる
    stu.study();
    console.dir(学生);
    コンソールのdir(stu);

  </スクリプト>
</head>
<本文>


</本文>
</html>

ここに画像の説明を挿入

プロトタイプ手法の共有

例えば、食べたら遊ぶ、遊んだら寝るといった方法を設定します。

ここに画像の説明を挿入

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <title>タイトル</title>
  <スクリプト>
    //プロトタイプ内のメソッドは互いにアクセス可能 function Animal(name,age) {
      this.name=名前;
      this.age=年齢;
    }
    //プロトタイプにメソッドを追加// 食べた後に再生する Animal.prototype.eat=function () {
      console.log("動物は食べる");
      これを再生します。
    };
    // 遊んだ後は寝る Animal.prototype.play=function () {
      console.log("ボールをプレーしています");
      スリープ状態を解除します。
    };
    Animal.prototype.sleep = 関数 () {
      console.log("スリープ");
    };

    var dog = new Animal ("Xiao Su", 20);
    犬を食べる();

    //プロトタイプオブジェクト内のメソッドは互いに呼び出すことができます</script>
</head>
<本文>


</本文>
</html>

JavaScript プロトタイプ データ共有とメソッド共有の実装を探るこの記事はこれで終わりです。JavaScript プロトタイプ データ共有とメソッド共有の実装を探る関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript でのデータ共有とデータ転送の詳細な分析
  • JavaScript iframeデータ共有インターフェース実装方法
  • jsはフレームワーク間の値の転送を簡素化するためのデータ共有インターフェースを作成します
  • Javascript と VBScript のデータ共有

<<:  Linux (Centos7) での redis5 クラスターの構築と使用方法の詳細な説明

>>:  mysql zipファイルのインストールチュートリアル

推薦する

高さ:100% が機能しないのはなぜですか?

高さ:100% が機能しないのはなぜですか?この知識は不人気ではありませんが、使用する際には混乱する...

Nginx proxy_pass の / スラッシュによって引き起こされた殺人事件の詳細な説明

背景nginx サーバー モジュールは 2 つのサーバーにプロキシする必要があるため、異なるサーバー...

MySQL InnoDBストレージエンジンについて簡単に説明します

序文:ストレージ エンジンはデータベースの中核です。MySQL の場合、ストレージ エンジンはプラグ...

抽選効果を実現するJavaScript

この記事では、宝くじマシンの効果を実現するためのJavaScriptの具体的なコードを参考までに共有...

setup+ref+reactive は vue3 の応答性を実装します

セットアップは、結合された API を記述するために使用されます。テンプレートが使用できるようにする...

JavaScript デザインパターン プロキシパターンの学習

目次概要実装保護エージェント仮想エージェント画像の遅延読み込みを実現する仮想プロキシ概要プロキシ パ...

Meituan DBデータをデータウェアハウスに同期するアーキテクチャと実践

背景データ ウェアハウス モデリングでは、何ら処理されていない元のビジネス レイヤー データは OD...

超大型フォントを使用した 40 の Web ページ デザイン

今日の Web デザインでは、非常に大きなフォントが表示される傾向があります。これらのオープンソース...

CocosCreatorでシューティングゲームを作る詳しい解説

目次シーン設定ゲームリソース砲塔の回転動的に生成された弾丸衝突計算効果を高めるターゲットの動き弾薬庫...

Mysql systemctl start mysqld によって報告されるエラーの解決策

エラーメッセージ:制御プロセスがエラー コードで終了したため、mysqld.service のジョブ...

zk+kafka+storm クラスターの docker-compose デプロイメントの実装

クラスターの展開の概要172.22.12.20 172.22.12.21 172.22.12.22 ...

さようなら Docker: 5 分で Containerd に移行する方法

Docker は非常に人気のあるコンテナ技術です。K8S によって廃止され、別のコンテナ技術である ...

Vue 値転送の 12 の方法の概要

目次1. 父から息子へ2. 息子から父へ3. ブラザーコンポーネント通信(バス) 4. ref/re...

JavaScriptアニメーション関数のカプセル化の詳細な説明

目次1. アニメーション機能の原理2. アニメーション関数のシンプルなカプセル化3. アニメーション...

方言変換のためのApache Calciteコード

意味Calcite は、Sql を SqlNode に解析し、次に SqlNode を特定のデータベ...