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 をよろしくお願いいたします。

以下もご興味があるかもしれません: