[解決済み】プロトタイプを使用する利点と、コンストラクタで直接メソッドを定義する利点は?重複
質問
どれを使っても良いということはないのでしょうか、また、どちらにすれば良いのでしょうか。
コンストラクタのアプローチ。
var Class = function () {
this.calc = function (a, b) {
return a + b;
};
};
プロトタイプのアプローチ。
var Class = function () {};
Class.prototype.calc = function (a, b) {
return a + b;
};
プロトタイプを使用すると、メソッドの定義がクラスから分離されるのが気に入らないのですが、最初のアプローチではなくこれを使用しなければならない特別な理由があるのかどうかはわかりません。
また、関数定義だけでなく、関数リテラルを使用して "クラス" を定義する利点はありますか。
var Class = function () {};
対
function Class () {};
ありがとうございました。
解決方法は?
プロトタイプチェーンを介して継承されるメソッドは、例えば、すべてのインスタンスに対して普遍的に変更することができます。
function Class () {}
Class.prototype.calc = function (a, b) {
return a + b;
}
// Create 2 instances:
var ins1 = new Class(),
ins2 = new Class();
// Test the calc method:
console.log(ins1.calc(1,1), ins2.calc(1,1));
// -> 2, 2
// Change the prototype method
Class.prototype.calc = function () {
var args = Array.prototype.slice.apply(arguments),
res = 0, c;
while (c = args.shift())
res += c;
return res;
}
// Test the calc method:
console.log(ins1.calc(1,1,1), ins2.calc(1,1,1));
// -> 3, 3
メソッドを変更すると、両方のインスタンスに適用されることにお気づきですか? これは
ins1
と
ins2
は、同じ
calc()
関数を使用します。 構築中に作成されたパブリックメソッドでこれを行うには、作成された各インスタンスに新しいメソッドを割り当てなければなりませんが、これは厄介な作業です。 というのも
ins1
と
ins2
は、それぞれ個別に作成された
calc()
関数を使用します。
コンストラクタの内部でメソッドを作成することのもうひとつの副作用は、パフォーマンスの低下です。 各メソッドは、コンストラクタ関数が実行されるたびに作成する必要があります。 プロトタイプチェーン上のメソッドは一度生成された後、各インスタンスに継承されます。 一方、publicメソッドはprivate変数にアクセスできますが、継承されたメソッドではアクセスできません。
については
function Class() {}
対
var Class = function () {}
の質問では、前者は実行前に現在のスコープの先頭に "hoisted"されます。 後者の場合、変数宣言はホイストされますが、代入はホイストされません。 例えば
// Error, fn is called before the function is assigned!
fn();
var fn = function () { alert("test!"); }
// Works as expected: the fn2 declaration is hoisted above the call
fn2();
function fn2() { alert("test!"); }
関連
-
[解決済み】Javascript:getElementById対getElementsById(両方が別のページで動作する)。
-
[解決済み】未定義のプロパティ 'bind' を読み込めない。React.js【重複あり
-
[解決済み】ES6マップオブジェクトをソートすることは可能ですか?
-
[解決済み] let "と "var "の使い分けは?
-
[解決済み] JavaScriptでページの一番上までスクロールする?
-
[解決済み] なぜList<T>を継承しないのですか?
-
[解決済み] 内蔵DOMメソッドやPrototypeを使ってHTML文字列から新しいDOM要素を作成する
-
[解決済み] JavaScriptで配列の長さを初期化する方法は?
-
[解決済み] プログラムによって、16進数の色を明るくしたり暗くしたりする(または、rgb、およびブレンドカラー)。
-
[解決済み] JavaScriptのプロパティアクセス:ドット記法とブラケット?
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] jQueryで、ユーザーがそのフィールドを編集している間、テキストフィールドの最初の文字を大文字にするにはどうすればよいですか?
-
[解決済み] Uncaught Invariant Violation: 前のレンダリング中よりも多くのフックをレンダリングした
-
[解決済み] React with ES7: Uncaught TypeError: Cannot read property 'state' of undefined [duplicate] (未定義のプロパティ'state'を読み込むことはできません。
-
[解決済み】DOMException: サポートされているソースが見つからなかったため、読み込みに失敗しました。
-
[解決済み】Jestが予期しないトークンに遭遇した
-
[解決済み】TypeError: res.status は関数ではありません。
-
[解決済み】Syntax error: JavaScriptの不正なreturnステートメント
-
[解決済み】Uncaught TypeError: 未定義のプロパティ 'msie' を読み取れない - jQuery tools
-
[解決済み】未定義のプロパティ 'forEach' を読み取ることができない
-
[解決済み】中央値の計算 - javascript