コンストラクター関数内でプロトタイプメソッドを割り当てることが、JavaScript では一般的に悪い習慣であると考えられているのはなぜですか?-jsチュートリアル-php.cn

コンストラクター関数内でプロトタイプメソッドを割り当てることが、JavaScript では一般的に悪い習慣であると考えられているのはなぜですか?

Barbara Streisand

リリース： 2024-10-30 21:02:02

オリジナル

486 人が閲覧しました

Why is assigning prototype methods inside the constructor function generally considered a bad practice in JavaScript?

コンストラクター内でのプロトタイプメソッドの割り当て: 潜在的な欠点とスコープの問題

スタイルの好みを優先しながら、潜在的な欠点とスコープの問題に対処することが重要ですコンストラクター関数内のプロトタイプメソッドの割り当てに関連しています。次のコード構造を考えてみましょう。

構造 1:

<code class="javascript">var Filter = function(category, value) {
  this.category = category;
  this.value = value;

  // product is a JSON object
  Filter.prototype.checkProduct = function(product) {
    // run some checks
    return is_match;
  }
};</code>

ログイン後にコピー

構造 2:

<code class="javascript">var Filter = function(category, value) {
  this.category = category;
  this.value = value;
};

Filter.prototype.checkProduct = function(product) {
  // run some checks
  return is_match;
}</code>

ログイン後にコピー

欠点とスコープの問題:

1.繰り返されるプロトタイプの割り当てと関数の作成:
構造 1 では、インスタンスの作成ごとにプロトタイプが何度も再割り当てされます。これにより、代入が繰り返されるだけでなく、インスタンスごとに新しい関数オブジェクトが作成されます。

2.予期しないスコープの問題:
構造 1 は予期しないスコープの問題を引き起こす可能性があります。プロトタイプメソッドがコンストラクターのローカル変数を参照する場合、最初の構造体が意図しない動作を引き起こす可能性があります。次の例を考えてみましょう:

<code class="javascript">var Counter = function(initialValue) {
  var value = initialValue;

  // product is a JSON object
  Counter.prototype.get = function() {
      return value++;
  }
};

var c1 = new Counter(0);
var c2 = new Counter(10);
console.log(c1.get());    // outputs 10, should output 0</code>

ログイン後にコピー

この場合、各インスタンスに対して作成された get メソッドは、同じプロトタイプオブジェクトを共有します。その結果、値変数がインクリメントされ、インスタンス間で共有され、誤った出力が発生します。

その他の考慮事項: