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ファイルのインストールチュートリアル

推薦する

Docker Consul コンテナ サービスの更新と見つかった問題の概要

目次1. コンテナサービスの更新とDockerコンサルの検出1. サービス登録と検出とは何ですか? ...

Tomcat でのコネクタ構成

JBoss は Tomcat を Web コンテナとして使用するため、JBoss の Web コンテ...

Linux yum コマンドを使用して mysql8.0 をインストールする方法の詳細なチュートリアル

1. 設置前によく掃除する rpm -pa | grep mysql または rpm -qa | g...

MySql の null 関数の使用の共有

MySql の null に関する関数IFNULL ISNULL NULLIF IFNULL使用法:...

CSS3はキングをマッチングさせるときにパーティクルアニメーション効果を実現します

コーディングをしていると、多くのことが同じ結末を迎えることに気づくでしょう。問題を解決する方法は何千...

Docker ベースの MySQL マスタースレーブレプリケーション環境を構築するための実装手順

1. はじめに以前のプログラム アーキテクチャは次の形式になります。プログラムのサイズが大きくなると...

MySQL は正常に起動するがポートをリッスンしない場合の解決策

問題の説明MySQL が正常に起動しました。以下に示すように、 ps -ef |grep mysql...

Linux コマンドにおける Ctrl+z、Ctrl+c、Ctrl+d の違いと使い方

Linux で Ctrl+c、Ctrl+d、Ctrl+z はどういう意味ですか? Ctrl+c と ...

WIN10 での JDK インストールと環境変数の設定手順 (詳細版)

目次1. JDKをダウンロードする(例としてjdk1.8.0を使用する) 2. JDK をインストー...

HTML テーブルタグチュートリアル (35): 列間属性 COLSPAN

複雑なテーブル構造では、一部のセルが垂直方向に複数のセルにまたがるため、列間属性 COLSPAN を...

vue+drf+サードパーティのスライディング検証コードアクセスの実装

目次1. 背景2. 検証プロセス3. 検証を作成する4. フロントエンドコード4.1 コアjsファイ...

CSS と JavaScript を使用して管理ダッシュボードのレイアウトを構築するためのサンプル コード

あなたが作成するものこの新しいチュートリアルでは、CSS と JavaScript を使用して、レス...

MySql キャッシュ クエリの原理とキャッシュ監視およびインデックス監視の概要

クエリキャッシュ1. クエリキャッシュの動作原理クエリ ステートメントを実行する前に、MySQL は...

デザイン参考 WordPressウェブサイト構築成功事例

これら 16 のサイトはそれぞれ注意深く読む価値があり、どのサイトでも推奨されている Web サイト...