1. ホーム
  2. javascript

[解決済み] Javascriptでオブジェクトを作成する - 複数のアプローチ、何か違いは?

2022-02-09 23:02:41

質問内容

javascriptでオブジェクトをインスタンス化するいくつかの異なる方法を見たことがありますが、様々なアプローチの利点/欠点と、他より1つを使用する理由を知りたいと思いました。

アプローチ1

var obj = {
    prop: value,
    .
    .
    .
}

アプローチ1は標準的なアプローチで、特に目新しいことはありません :)

アプローチ2

var obj = new function() {
    var prop1 = value1;
    var fn1 = function() {
    };
    .
    .
    .

    this.prop2 = value2;
    .
    .
    .
}();

関数のアプローチですが、アプローチ3と比較したかったのです。関数のアプローチは、主にカプセル化のために使われます(正しいですか?)

アプローチ3

var obj = (function() {
    var prop1 = value1;
    var fn1 = function() {
    };
    .
    .
    .

    return {
        prop2: value2,
        .
        .
        .
    }
})();

この方法では、その使用理由がよくわかりません。アプローチ2とどう違うのでしょうか?どちらもロジックをカプセル化するのに使えます。

パラメータを渡すことで、潜在的なコンフリクトに対処できるようにするためでしょうか?例:jqueryの $ の構文がありますが、アプローチ2でも可能です...。

ありがとうございます。


編集する


アプローチ1と3は似ていると思いますが(どちらもオブジェクトを返すという点)、アプローチ3はクロージャも作成します。アプローチ2も同様です。

2と3はどちらもクロージャを作成しますが、両者の違いは何でしょうか。

どのように解決するのですか?

アプローチ#2および#3では constructor プロパティは異なります。

実際には、2番目のアプローチでは、匿名コンストラクタ関数を使用して複数のオブジェクトをインスタンス化できることを意味します。

x = new function() { alert(1) };
y = new x.constructor; // shows the message too

のトップアンサーです。 モジュールパターン vs. 無名コンストラクタのインスタンス には、Douglas Crockford氏の引用があり、なぜ#2よりも#3のアプローチの方が良いと思うかを説明しています。