jsプロトタイプオブジェクトの利用手順を詳しく解説

今回は、js プロトタイプ オブジェクト を使用する手順と、js プロトタイプ オブジェクト を使用する際の 注意事項 について詳しく説明します。実際のケースを見てみましょう。

簡単な

コンストラクター+プロトタイプオブジェクトの小さなプログラムから始めましょう

function CreateObj( uName, uAge ) {
      this.userName = uName;
      this.userAge = uAge;
    }
    CreateObj.prototype.showUserName = function () {
      return this.userName;
    }
    CreateObj.prototype.showUserAge = function () {
      return this.userAge;
    }

このプログラムには何も問題はありませんが、非常に冗長です。メソッドを拡張するたびに、プロトタイプ オブジェクトのプロトタイプをリテラル オブジェクトとして扱うことができ、すべてのメソッドがリテラル オブジェクト内で展開されます。

同じ効果を達成できます:

CreateObj.prototype = {
      showUserAge : function(){
        return this.userAge;
      },
      showUserName : function(){
        return this.userName;
      },
    }
    var obj1 = new CreateObj( 'ghostwu', 22 );
    var obj2 = new CreateObj( '卫庄', 24 );
    console.log( obj1.showUserName(), obj1.showUserAge() ); //ghostwu 22
    console.log( obj2.showUserName(), obj2.showUserAge() ); //卫庄 24

ただし、このプロトタイプ オブジェクトの記述方法では、CreateObj のデフォルトのプロトタイプ オブジェクトが書き換えられます。最初の問題は、コンストラクターが CreateObj を指さなくなることです。 書き換える前、コンストラクターは CreateObj

function CreateObj( uName, uAge ) {
      this.userName = uName;
      this.userAge = uAge;
    }
    CreateObj.prototype.showUserName = function () {
      return this.userName;
    }
    CreateObj.prototype.showUserAge = function () {
      return this.userAge;
    }
    console.log( CreateObj.prototype.constructor === CreateObj ); //true

を指しています。 書き換え後、コンストラクターは

Object

CreateObj.prototype = {
      showUserAge : function(){
        return this.userAge;
      },
      showUserName : function(){
        return this.userName;
      },
    }
    console.log( CreateObj.prototype.constructor === CreateObj ); //false
    console.log( CreateObj.prototype.constructor === Object ); //true

を指すようになります。 したがって、オブジェクトが変更されるため、コンストラクターはオブジェクトを正確に識別できません 以前に作成したプログラムは、基本的にプロトタイプ オブジェクト (プロトタイプ) のメソッドを拡張してから、オブジェクトをインスタンス化してから、プロトタイプ オブジェクト (プロトタイプ) の関数を拡張します。 インスタンスオブジェクトは拡張メソッドを正常に呼び出すことができますか?

りー

通常は呼び出せますが、プロトタイプオブジェクトをオーバーライドすると呼び出せなくなります

function CreateObj( uName, uAge ) {
      this.userName = uName;
      this.userAge = uAge;
    }
    var obj1 = new CreateObj( 'ghostwu', 22 );
    CreateObj.prototype.showUserName = function(){
      return this.userName;
    }
    console.log( obj1.showUserName() ); //ghostwu

プロトタイプオブジェクトが書き換えられた後、書き換えの前にインスタンス化が行われるため、インスタンスの暗黙のプロトタイプ

proto

は書き換えられたプロトタイプオブジェクトを指さないため、プロトタイプに参照型がある場合、別の問題を呼び出すことができません。オブジェクト (プロトタイプ) であるため、複数のインスタンスがプロトタイプ オブジェクトを共有するため、1 つのインスタンスが参照型の値を変更する限り、他のすべてのインスタンスが変更された結果を受け取ることに注意してください。

りー

プロトタイプ オブジェクトの共有特性により、配列の重複排除など、一部の組み込みオブジェクトのメソッドを簡単に拡張できます

function CreateObj( uName, uAge ) {
      this.userName = uName;
      this.userAge = uAge;
    }
    var obj1 = new CreateObj( 'ghostwu', 22 );
    CreateObj.prototype = {
      showUserName : function(){
        return this.userName;
      }
    }
    console.log( obj1.showUserName() ); //报错

この記事の事例を読んだ後は、メソッドを習得したと思います。さらに興味深い点については、その他の点に注意してください。 php中国語サイト関連記事！ 推奨読書:

jsで要素スタイルを設定する手順の詳細な説明

html+canvasで画面キャプチャを実装する

jQueryでタイマー機能を詳細に実装する

以上がjsプロトタイプオブジェクトの利用手順を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。