[解決済み] オブジェクトリテラルとコンストラクタ関数のどちらを使うべきですか?
2023-01-05 21:44:03
質問
javascriptでオブジェクトを作成する際に、どちらの方法で作成すればよいのかわからなくなってきました。少なくとも2つの方法があるようです。1つはオブジェクトリテラル記法を使用することで、もう1つは構築関数を使用することです。どちらか一方に利点があるのでしょうか?
どのように解決するのですか?
オブジェクトに関連する振る舞いがない場合(つまり、オブジェクトがデータ/状態の単なるコンテナである場合)、オブジェクトリテラルを使用します。
var data = {
foo: 42,
bar: 43
};
を適用する。 KISSの原則 . もし、データの単純なコンテナ以上のものが必要でなければ、単純なリテラルを使用しましょう。
オブジェクトに動作を追加したい場合は、コンストラクタを使用し、構築中にオブジェクトにメソッドを追加するか、クラスにプロトタイプを与えることができます。
function MyData(foo, bar) {
this.foo = foo;
this.bar = bar;
this.verify = function () {
return this.foo === this.bar;
};
}
// or:
MyData.prototype.verify = function () {
return this.foo === this.bar;
};
このようなクラスは、データオブジェクトのスキーマのような役割も果たします。オブジェクトがどのようなプロパティを初期化し、どのようなプロパティを含むか、(コンストラクタを通じて)ある種の契約を結んでいることになります。自由なリテラルは、データの無定形なブロブに過ぎません。
あなたは外部の
verify
関数を使用したほうがよいでしょう。
var data = {
foo: 42,
bar: 43
};
function verify(data) {
return data.foo === data.bar;
}
しかし、これはカプセル化に関しては好ましいことではありません。理想的には、エンティティに関連するすべてのデータ+振る舞いが一緒に住むべきです。
関連
-
[解決済み] JavaScriptでオブジェクトをディープクローンする最も効率的な方法は何ですか?
-
[解決済み] event.preventDefault() vs. return false
-
[解決済み] JavaScriptで二重引用符と単一引用符はいつ使うべきですか?
-
[解決済み] どのDOM要素にフォーカスがあるかを調べるには?
-
[解決済み] どうすればjQueryに非同期ではなく、同期のAjaxリクエストを実行させることができますか?
-
[解決済み】JavaScriptの比較では、どちらの等号演算子(== vs ===)を使うべきですか?
-
[解決済み】Node.jsのrequireとES6のimport/exportを使い分ける。
-
[解決済み] bootstrap のポップオーバーがすべての要素の上に表示されない
-
[解決済み] WebStormで未解決の変数が大量にある場合の警告に対処する方法は?
-
[解決済み] JavaScript で css プロパティを使用して HTML 要素の背景色を設定する方法
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】new Object()`とオブジェクトリテラル記法の違いは何ですか?
-
[解決済み] チェックボックスが選択されているかどうかを確認するjQuery
-
[解決済み] reactのrender関数でdynamic hrefを作成するには?
-
[解決済み] javascript の関数から `undefined` と `null` のどちらを返すのが良いのでしょうか?
-
[解決済み] アサインの左側にJavascriptのオブジェクトブラケット表記({ ナビゲーション } =)があります。
-
[解決済み] jQueryの$という記号の意味は何ですか?
-
[解決済み] Javascriptで動的に命名されたメソッドを呼び出すにはどうすればよいですか?
-
[解決済み] JSHintの'+'前の改行不良の説明
-
[解決済み] javascriptのキャンバスで画像をリサイズする (スムーズ)
-
[解決済み] 変異を伴わないオブジェクトからの値の削除