[解決済み] このような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
関連
-
[解決済み] JavaScriptには、与えられた範囲内の範囲を生成する "range() "のようなメソッドがありますか?
-
[解決済み] jQueryはクラスごとに要素を数える - これを実装する最良の方法は何ですか?
-
[解決済み] JavaScriptにはinterface型(Javaの'interface'など)はありますか?
-
[解決済み] JavaScriptで「var that = this;」とはどういう意味ですか?
-
[解決済み】ReactJS - "setState "が呼ばれるたびにrenderが呼び出されるのですか?
-
[解決済み] ES6でオブジェクトをクローンする方法はこれで良いのでしょうか?
-
[解決済み] アサインの左側にJavascriptのオブジェクトブラケット表記({ ナビゲーション } =)があります。
-
[解決済み] 無効になっている入力フィールドの値を送信する
-
[解決済み] Javascript 空の配列の削減
-
[解決済み] Javascript の parseInt() で先頭のゼロを削除する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] JavaScriptで名前空間を宣言するには?
-
[解決済み] jqueryでdivの要素がオーバーフローしていないかチェックする
-
[解決済み] reactのrender関数でdynamic hrefを作成するには?
-
[解決済み] CORS OriginヘッダーとCSRFトークンによるCSRF保護
-
[解決済み] JavaScriptのtoString()関数をオーバーライドして、デバッグ用に意味のある出力を提供することは可能でしょうか?
-
[解決済み] サブドメインにまたがってlocalStorageを使用する
-
[解決済み] Prototypeを使ってtextareaを自動サイズ調整するには?
-
[解決済み] JavaScript で `throw` の後に `return` をする必要がありますか?
-
[解決済み] V8 Javascript エンジンのスタンドアロン実行
-
[解決済み] このJavaScriptのパターンは何と呼ばれ、なぜ使われるのでしょうか?