1. ホーム
  2. javascript

[解決済み] このようなJSオブジェクトの定義方法は、何か意味があるのでしょうか?

2023-04-30 19:54:15

質問

私はいくつかのレガシーコードを保守していますが、オブジェクトの定義に次のパターンが使用されていることに気づきました。

var MyObject = {};

(function (root) {

    root.myFunction = function (foo) {
        //do something
    };

})(MyObject);

これには何か目的があるのでしょうか?ただ以下のようにすることと同等でしょうか?

var MyObject = {

    myFunction : function (foo) {
        //do something
    };

};

私はコードベース全体を自分の好みに合わせてリファクタリングする聖なる探求に乗り出すつもりはありませんが、オブジェクトを定義する遠回しの方法の背後にある理由を本当に理解したいと思っています。

ありがとうございます。

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

それは、モジュールパターンと呼ばれる http://toddmotto.com/mastering-the-module-pattern/

主な理由は、あなたが本当にプライベートなメソッドや変数を作成するためです。あなたの場合、実装の詳細を隠しているわけではないので意味がありません。

モジュールパターンを使うことが意味のある例です。

var MyNameSpace = {};

(function(ns){
    // The value variable is hidden from the outside world
    var value = 0;

    // So is this function
    function adder(num) {
       return num + 1;
    }

    ns.getNext = function () {
       return value = adder(value);
    }
})(MyNameSpace);

var id = MyNameSpace.getNext(); // 1
var otherId = MyNameSpace.getNext(); // 2
var otherId = MyNameSpace.getNext(); // 3

一方、まっすぐなオブジェクトを使っただけなら adder となり value が公開されることになります。

var MyNameSpace = {
    value: 0,
    adder: function(num) {
       return num + 1;
    },
    getNext: function() {
       return this.value = this.adder(this.value);
    }
}

などとすることで、それを崩すことができます。

MyNameSpace.getNext(); // 1
MyNameSpace.value = 0;
MyNameSpace.getNext(); // 1 again
delete MyNameSpace.adder;
MyNameSpace.getNext(); // error undefined is not a function

しかし、モジュールのバージョンで

MyNameSpace.getNext(); // 1
 // Is not affecting the internal value, it's creating a new property
MyNameSpace.value = 0;
MyNameSpace.getNext(); // 2, yessss
// Is not deleting anything
delete MyNameSpace.adder;
MyNameSpace.getNext(); // no problemo, outputs 3