Canvasでprototypeを使ってみる

Canvas（JavaScript）を勉強しています。

JavaScriptもほぼわかっていないので、いろいろつまづくので、JavaScriptの本なども見ています。

その中で、よく出てくるのに、全然わからないのが「prototype」です。
今回は、わからないなりに、prototypeを使ってみました。

prototype

let Zukei = function (x, y, w) {
	this.x = x;
	this.y = y;
	this.w = w;
};

Zukei.prototype.drawRect = function () {
	return ctx.fillRect(this.x, this.y, this.w, this.w);
};

Zukei.prototype.drawArc = function () {
	return ctx.arc(this.x, this.y, this.w, 0, Math.PI * 2, false);
};

// rect
let mem = new Zukei(100, 100, 150);
ctx.fillStyle = 'red';
mem.drawRect();

// arc
let mem1 = new Zukei(450, 170, 100);
ctx.beginPath();
mem1.drawArc();
ctx.fillStyle = 'green';
ctx.fill();

classのような感じがしたのですが、全然違う気もします。

イマイチわかっていないのですが、大量の図形を扱うことになったら便利なのかもしれません。けど、classもそうだし、どう使い分けるのだろう？そもそも使い分けるわけではないのかな？

ちょっとずつ理解していこうと思います。

MDNでprototypeを調べたら、いろいろありすぎて驚きました。
prototypeは奥が深そうです。。。

Object のプロトタイプ - ウェブ開発を学ぶ | MDN