JavaScript でカスタム オブジェクトを作成する場合、プロトタイピングとクロージャのどちらを選択するか?

JavaScript でカスタム オブジェクトを作成する方法

JavaScript では、カスタム オブジェクトを作成するためのさまざまな方法が提供されています。以下に 2 つの異なるモデルを示します。

プロトタイピング方法

プロトタイピング モデルは JavaScript にネイティブです。コンストラクター関数のプロトタイプ プロパティを使用して、プロパティとメソッドをインスタンスに追加します。

function Shape(x, y) {
  this.x = x;
  this.y = y;
}

Shape.prototype.toString = function() {
  return 'Shape at ' + this.x + ', ' + this.y;
};

function Circle(x, y, r) {
  Shape.call(this, x, y); // Invoke base constructor
  this.r = r;
}

Circle.prototype = new Shape(); // Inherit prototype

Circle.prototype.toString = function() {
  return 'Circular ' + Shape.prototype.toString.call(this) + ' with radius ' + this.r;
};

利点:

• 軽量で JavaScript にネイティブ
• 再利用既存のプロトタイプ
• をサポートinstanceof

欠点:

• 基本コンストラクターはサブクラス コンストラクターで呼び出す必要があります
• サブクラス化するときにコンストラクターの処理が必要です

閉鎖方法

クロージャ モデルは、クロージャを使用してインスタンス固有のデータとメソッドを囲むことで継承を回避します。

function Shape(x, y) {
  var that = this;

  this.x = x;
  this.y = y;

  this.toString = function() {
    return 'Shape at ' + that.x + ', ' + that.y;
  };
}

function Circle(x, y, r) {
  var that = this;

  Shape.call(this, x, y);
  this.r = r;

  var _baseToString = this.toString;
  this.toString = function() {
    return 'Circular ' + _baseToString.call(that) + ' with radius ' + that.r;
  };
};

var mycircle = new Circle();

利点:

• インスタンスの共有を防止します。メソッドの
• へのメソッドの自動バインドインスタンス

欠点:

• インスタンスごとのメソッドのコピーにより効率が低下
• カスタム ロジックなしでは、instanceof を使用できません

以上がJavaScript でカスタム オブジェクトを作成する場合、プロトタイピングとクロージャのどちらを選択するか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。