[JS]プロトタイプオブジェクト

ジェネレータでメソッドを定義する方法の問題

function Circle(center, radius) {
  this.center = center;
  this.radius = radius;
  this.area = function () {
    return Math.PI * this.radius ** 2;
  };
}
const c1 = new Circle({ x: 0, y: 0 }, 2.0);
const c2 = new Circle({ x: 0, y: 1 }, 4.0);
const c3 = new Circle({ x: 1, y: 0 }, 5.0);

Circle内で面積を求める領域メソッドを定義した.Circleジェネレータによって生成されるインスタンスc 1、c 2、およびc 3には、同じ方法が含まれる.

これは、作成方法が同じ操作を実行するインスタンス数と同じであることを意味します.
これにより、メモリの浪費が発生します.

プロトタイプオブジェクト

これらの問題は、プロトタイプオブジェクトでメソッドを定義することによって解決できます.

function Circle(center, radius) {
  this.center = center;
  this.radius = radius;
}
Circle.prototype.area = function () {
  return Math.PI * this.radius ** 2;
};
const c1 = new Circle({ x: 0, y: 0 }, 2.0);
const c2 = new Circle({ x: 0, y: 1 }, 4.0);
const c3 = new Circle({ x: 1, y: 0 }, 5.0);

console.log(c1.area()); // 12.566370614359172

__proto__プロペッティとは、その対象に引き継がれた親の対象を指す.
したがって、オブジェクトは、__proto__propertyが指す親オブジェクトのpropertyを使用することができる.

インスタンスc 1,c 2,c 3は、Circleをコンストラクション関数として使用し、__proto__コンストラクション関数Circleのprototype objectを指す.したがって、インスタンスはCircleプロトタイプオブジェクトが持つ領域メソッドを使用することができる.
これにより、インスタンスにメソッドを追加することなく、インスタンスがメソッドを使用できます.その結果、メモリの無駄を防ぐことができます.

プロトタイプオブジェクトのプロトタイプ

関数定義時に発生した함수 객체とPrototype Object

関数オブジェクト有prototypeproperty.

prototype propertyとはPrototypeオブジェクトのこと.

生成されたPrototype objectは、関数オブジェクトのprototypepropertyからアクセス可能である.

この場合prototype objectは関数オブジェクトのみを持つ.個々のオブジェクトを作成しても表示されません.

Prototype対象有constructor和__proto__

コンストラクション関数は、生成された関数オブジェクトの参照を持つ.

・__proto__はPrototype Link生成者のプロトタイプオブジェクトを指す.

プロトタイプ対象の__proto__基本的に対象です.原型を指す.すなわち,プロトタイプオブジェクトのプロトタイプはオブジェクトである.原型です.

プロトタイプオブジェクトの置換

関数オブジェクトのプロトタイプpropertyを置換する場合は、生成者の参照をコンストラクション関数propertyとして置換するオブジェクトに代入する.

function Circle(center, radius) {
  this.center = center;
  this.radius = radius;
}
Circle.prototype = {
  constructor: Circle,
  area() {
    return Math.PI * this.radius ** 2;
  },
};

const c1 = new Circle({ x: 0, y: 0 }, 2.0);
console.log(c1.area()); // 12.566370614359172

インスタンスがプロトタイプを継承する時間

インスタンスのプロトタイプは、作成者がインスタンスを作成する際に持つプロトタイプオブジェクトである.

インスタンスを作成した後、ジェネレータのプロトタイププロトタイプを別のオブジェクトに置き換え、インスタンスのプロトタイプは変更されません.

function Circle(center, radius) {
  this.center = center;
  this.radius = radius;
}
const c1 = new Circle({ x: 0, y: 0 }, 2.0);
Circle.prototype = {
  constructor: Circle,
  area() {
    return Math.PI * this.radius ** 2;
  },
};

console.log(c1.area()); // TypeError: c1.area is not a function

c 1インスタンスのpropertyは、Circleの作成時のpropertyを継承します.c 1インスタンスを作成すると、Circleのプロトタイプ断面ビームが交換されても、置換されたオブジェクトから断面ビームは継承されません.

インスタンスの作成後にpropertyをプロトタイプオブジェクトに追加した場合、インスタンスは追加したpropertyを使用できます.

function Circle(center, radius) {
  this.center = center;
  this.radius = radius;
}
const c1 = new Circle({ x: 0, y: 0 }, 2.0);
Circle.prototype.area = function () {
  return Math.PI * this.radius ** 2;
};

console.log(c1.area()); // 12.566370614359172

ソース

現代JavaScript入門

プロトタイプの理解

JavaScriptベース-オブジェクトプロトタイプについて