JavaScript でオブジェクトを作成するためのいくつかの一般的なモードの紹介

この記事では、ファクトリ パターン、コンストラクター パターン、プロトタイプ パターン、コンストラクターとプロトタイプを組み合わせるパターン、動的プロトタイプ パターンなど、JavaScript でオブジェクトを作成するために一般的に使用されるいくつかのパターンを紹介します。

1. ファクトリーモード

次のコードを見てください:

function getMySon(name,sex){
    var o={};
    o.name=name;
    o.sex=sex;
    o.sayName = function(){
        alert(this.name);
    }    return o;
}
son1 = getMySon('li ming','male');
son2 = getMySon('li hong','female');

これはファクトリーモードです。関数内でオブジェクトを定義し、それにプロパティとメソッドを追加して、最後にオブジェクトを返します。このモードではオブジェクトの作成が便利ですが、誰がこのインスタンスを作成したのかが分からないという問題があります。
たとえば、son1 intanceof getMySon は true を返すことができません。ここでのインスタンスは、getMySon によって new によって正確に作成されるのではなく、getMySon 内で作成されるためです。
そのため、ファクトリ パターンは、多くの種類のオブジェクトを作成する必要がある状況には適していません。

それでは、インスタンスがどこから来たのかを正しく判断できるようにオブジェクトを作成するにはどうすればよいでしょうか?次にコンストラクター パターンについて説明します。

2. コンストラクター パターン

次のコードを見てください:

function getMySon(name,sex){
    this.name = name;    
    this.sex = sex;    
    this.sayName = function(){
        alert(this.name);
    }
}

son1 = new getMySon('li ming','female');

これは、呼び出すときに new を使用してください。

新しい呼び出しを行うときは、次の手順を実行します:

            1. 创建一个新的对象（并把空对象的__proto__属性设置为getMySon.prototype)。

            2.将构造函数的作用域赋给新对象（此时this 指向了这个新对象）。

            3.执行构造函数中的代码（通过this 为这个新对象添加属性）

            4.返回新对象。

この方法で生成されたインスタンスは、son1instanceofgetMySon を使用してインスタンスを生成した人を特定できます。

では、コンストラクターを使用すると何が問題になるのでしょうか? new が使用されるたびに新しいオブジェクトが作成されるため、すべてのデータが異なるインスタンス間で共有されるわけではありません。ただし、関数sayNameの場合は複数作成する必要はありません。そうするとスペースが無駄になってしまいます。

これは次のタイプ、プロトタイプモードにつながります。

3. プロトタイプ モード

次のコードを見てください:

function getMySon(){}
getMySon.prototype.name = 'li ming';
getMySon.prototype.sex = 'female';
getMySon.prototype.sayName = function(){
    alert(this.name);
}

これはプロトタイプ モードです (プロトタイプの関連知識については、ここでは詳しく説明しません)。

プロトタイプ モードでは、プロパティとメソッドが getMySon.prototype に追加されます。プロトタイプは、すべてのインスタンスによって共有されるコピーが 1 つだけあり、すべてのインスタンスが 1 つのコピーを持つわけではありません。

この方法では、余分なスペースを占有することなく、関数のコピーを 1 つだけ持つことができます。ただし、名前や性別などの属性はすべてのインスタンスで共有する必要はなく、これらの属性を生成するためのパラメーターを渡すためにプロトタイプ モードを使用するのは不便です。

その後、コンストラクター パターンとプロトタイプ パターンをマージして、それぞれの利点を活用できます。インスタンス間で共有する必要がなく、パラメータを渡して生成する必要があるプロパティはコンストラクタモードで生成され、各インスタンス間で共有する必要があるプロパティ（メソッドなど）はプロトタイプモードで生成されます。

3. コンストラクターとプロトタイプを組み合わせるパターン
次のコードを見てください:

function getMySon(name,sex){
    this.name=name;    
    this.sex=sex;
}
getMySon.prototype.sayName(){
    alert(this.name);
}
son1=new getMySon('li ming','female');

これはコンストラクターとプロトタイプを組み合わせるパターンです。このアプローチは、コンストラクター パターンとプロトタイプ パターンの利点を組み合わせたものです。これは、オブジェクトの作成に最も一般的に使用されるパターンです。

4. 動的プロトタイプ パターン

いわゆる動的プロトタイプ パターンは、実際にはコンストラクターとプロトタイプを組み合わせるパターンをカプセル化したものです。
次のコードを見てください:

function getMySon(name,sex){
    this.name = name;    
    this.sex = sex;    //即使有多个需要定义的方法，也只需判断一个方法。
    if(typeof sayName != 'function'){ 
        getMySon.prototype.sayName=function(){
            alert(this.name);
        }
    }
}
son1=new getMySon('li ming','female');

これが動的プロトタイプ モードと名付けられている理由は、getMySon が別の呼び出しで変更され、動的であるためです。 SayName 関数の定義は、getMySon が初めて呼び出されたときにのみ実行されます。
本質的に、共有する必要のないメソッドはコンストラクターを通じて定義され、共有する必要があるメソッドはプロトタイプを通じて定義されます。それらをまとめてカプセル化するだけです。

以上がJavaScript でオブジェクトを作成するためのいくつかの一般的なモードの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。