JavaScript - オブジェクトを構成するさまざまな方法

Question

Web上で他の人のソースコードやさまざまな記事を読んでいるうちに、JavaScriptで「オブジェクト指向スタイル」のプログラミングを使用する人は、まったく異なっていることが分かりました。

1つのプロパティと1つの機能を持つ小さなモジュールを作成したいとします。

// Option 1 
var myObject1 = { 
    myProp: 1, 
    myFunc: function() { alert("myProp has value " + this.myProp); } 
}; 

// Option 2 
var myObject2 = function() { 
    return { 
     myProp: 1, 
     myFunc: function() { alert("myProp has value " + this.myProp); } 
    }; 
}(); 

// Option 3 
var MyObject3 = function() { 
    this.myProp = 1; 
    this.myFunc = function() { alert("myProp has value " + this.myProp); } 
}; 
var myObject3 = new MyObject3(); 

// Option 4 
var MyObject4 = function() { }; 
MyObject4.prototype.myProp = 1; 
MyObject4.prototype.myFunc = function() { alert("myProp has value " + this.myProp); }; 
var myObject4 = new MyObject4(); 

すべてのこれらのアプローチは構文的に異なっているが、同じように使用できるオブジェクトを生成するように見える：私は、このタスクに少なくとも4つのアプローチを見てきました。

これらの意味の違いは何ですか？何らかの理由で、これらのオプションの1つを残りのものよりも選択する必要がある場合がありますか？

Answer 1

myObject1は、オブジェクトリテラル（シングルトン）です。このタイプのオブジェクトを1つしか持たない場合に便利です。静的オブジェクトとして見てください。

myObject2オブジェクトリテラルを返します。したがって、​​3210を実行した直後に、変数fooはを実行した親関数への参照{ myProp: 1, myFunc: function(){...} }との結果を保持します。これはクロージャと呼ばれます。これは、例えば、公開APIを定義するために使用することができます。

はすなわち：

var foo = (function(){ 
    var privateProp = "I am a private property"; 

    // the object below is returned, privateProp is accessible 
    // only through foo.publicProp 
    return { 
     publicProp: privateProp    
    } 
})(); 

privatePropプロパティが今foo.publicPropを介してアクセス可能です。

MyObject3およびMyObject4は、コンストラクタ関数である。関数呼び出しの前にnewキーワードを使用すると、そのオブジェクトのinstanceを作成するようにJavaScriptに指示します。つまり、このように作成されたすべての新しいオブジェクトは、オブジェクト定義からプロパティとメソッドを継承します。

MyObject3とMyObject4の違いは、後者のみが、それらの特性を参照するのに対し、前者の場合には、そのオブジェクトのすべてのインスタンスは、myPropとmyFunc特性の独自コピーを有することです。つまり、作成するオブジェクトの数がどれくらいであっても、myPropとmyFuncのうちの1つだけが作成されます。

クロージャ、プロトタイプの継承、およびいくつかのオブジェクトデザインパターン（モジュールなど）がJavaScriptでどのように機能するかを調べることをお勧めします。

Answer 2

1.と2.の両方は、あなたの例ではほとんど同じです。一般的に

var myObject2 = function() { 
    var myPrivateProp = ...; 
    return { 
     getPrivateProp: function() { return myPrivateProp; } 
    }; 
}(); 

、それらは値、ないあなたがクラスを呼ぶようなものを作成する：あなたは2.このように、生命維持のスコープに「プライベート」変数を宣言することによって、実際の違いを作る作ることができます値の

代わりに、3.と4.は、使用可能な値を作成するために使用できるプロトタイプを作成することです。実際にプロトタイプのデフォルトを宣言しても、コンストラクターにデフォルトを宣言しても、大きな違いはありません。

従って、1 & 2は名前付きのプロトタイプのない「ラムダ」オブジェクトのようなものですが、3 & 4は実際に再利用可能で再作成可能です。