JavaScript でのオブジェクト作成にプロトタイプ メソッドとクロージャ メソッドのどちらを選択するか?

JavaScript でオブジェクトを作成する方法: 包括的な探索

JavaScript でオブジェクトを作成するには、いくつかの方法があります。プロトタイピング方法とクロージャ方法という 2 つの主要なモデルについて詳しく見てみましょう。

プロトタイピング方法

プロトタイピング モデルでは、オブジェクトは基本クラスのプロトタイプ オブジェクトからプロパティとメソッドを継承します。以下に例を示します。

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

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

// Subclass - Circle
function Circle(x, y, r) {
  Shape.call(this, x, y); // Call the base class's constructor
  this.r = r;
}

// Set the prototype for the subclass
Circle.prototype = new Shape();

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

const myShape = new Shape(1, 2);
const myCircle = new Circle(3, 4, 5);

このメソッドは、オブジェクトの作成時に基本クラスをインスタンス化するオーバーヘッドを排除します。ただし、コンストラクター関数の複雑さを回避するには、巧みな実装が必要です。

クロージャーの方法

クロージャーの方法では、各インスタンスはクラス メンバーの独自のコピーを所有し、継承を排除します。以下に例を示します。

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

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

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

// Subclass - Circle
function Circle(x, y, r) {
  Shape.call(this, x, y);

  const that = this;
  this.r = r;

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

const myShape = new Shape(1, 2);
const myCircle = new Circle(3, 4, 5);

このメソッドは効率的ですが、冗長なメソッドの上書きが必要です。また、元のスコープ外でメソッドを呼び出すときのバインディングの課題も発生します。

正しいアプローチの選択

プロトタイピングとクロージャのどちらを選択するかは、特定の要件によって異なります。プロトタイピングは強力な OO 継承に最適ですが、クロージャーは単純なページ効果に適しています。どちらのアプローチにも複雑さとバリエーションがあり、JavaScript オブジェクトを効果的に操作するには、そのニュアンスを理解することが重要であることに注意してください。

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