プロトタイプの有効性、必要性

Question

下記のソースは、canvasのパーティクルを動かすソースです。

プロトタイプ無し

//①canvas要素の取得
var canvas = document.getElementById("canvas");

//②canvas要素から描画コンテキストの取得
var ctx = canvas.getContext("2d");

window.requestAnimationFrame =
    window.requestAnimationFrame ||
	window.mozRequestAnimationFrame ||
	window.webkitRequestAnimationFrame ||
	window.msRequestAnimationFrame ||
	function(cb) {setTimeout(cb,17);};

var x1 =5;
var y1 =5;

var x2 =100;
var y2 =5;

//1.図形を描画する。(描画サイクルの開始)
render();

function render() {
	//2.一度図形を消去する
	ctx.clearRect(0,0,500,500);
	
	updatePosition();
	draw(x1.y1);
	draw(x2.y2);
	
	//5.一定時間を置く
	requestAnimationFrame(render);
}
function updatePosition() {
	//3.位置をずらす
	x1 +=5;
	y1 +=5;
	x2 +=5;
	y2 +=5;
}
function draw(posx,posy) {
	//.4再度図形を描画する。
	
	//パスを初期化。ここでいうパスとは、領域の境界線のようなものだという。
    ctx.beginPath();

    //塗りつぶす色を指定。
    ctx.fillStyle =　"#99ff66";//緑色

    //長方形のパスを作成。第一引数がx座標(横)、第二引数がy座標(縦)、第三引数が横幅、第四引数が高さだ。座標というのは、ブラウザの表示領域のX軸とY軸のことだ。0,0にすれば、ブラウザの左上に表示される。
    ctx.rect(this.x,this.y,10,20);//rectは、rectangel(長方形、矩形)の略である。

    //fillで長方形を塗りつぶす。何も指定しないと黒色となる。
    ctx.fill();//fillは、容器や場所などをいっぱいにする、満たすという意味だ。

    //最後にbeginPathで開始したパスを閉じる。
    ctx.closePath();
}

プロトタイプ

//①canvas要素の取得
var canvas = document.getElementById("canvas");

//②canvas要素から描画コンテキストの取得
var ctx = canvas.getContext("2d");

//パーティクルの数
var NUM = 2;
//new Particleを実行したぶんだけ配列particlesに代入。
var particles = [];

canvas.width =  canvas.height=500;

for(var i=0; i<NUM;i++) {
	positionX = Math.random() * 120;//X座標を0-20の間でランダムに
	positionY = Math.random() * 20;//X座標を0-20の間でランダムに
    particle = new Particle(ctx,positionX,positionY);
	particles.push(particle);
}

window.requestAnimationFrame =
    window.requestAnimationFrame ||
	window.mozRequestAnimationFrame ||
	window.webkitRequestAnimationFrame ||
	window.msRequestAnimationFrame ||
	function(cb) {setTimeout(cb,17);};

//引数には描画コンテキストと初期座標を渡している。
function Particle(ctx,x,y) {
    this.ctx = ctx;
	this.x= x||0;
	this.y= y||0;	
}
Particle.prototype.render = function() {
    this.updatePosition();
	this.draw();	
}
Particle.prototype.draw = function() {
	//.4再度図形を描画する。
	ctx = this.ctx;
	
	    //パスを初期化。ここでいうパスとは、領域の境界線のようなものだという。
    ctx.beginPath();

    //塗りつぶす色を指定。
    ctx.fillStyle =　"#99ff66";//緑色

    //長方形のパスを作成。第一引数がx座標(横)、第二引数がy座標(縦)、第三引数が横幅、第四引数が高さだ。座標というのは、ブラウザの表示領域のX軸とY軸のことだ。0,0にすれば、ブラウザの左上に表示される。
    ctx.rect(this.x,this.y,10,20);//rectは、rectangel(長方形、矩形)の略である。

    //円形のパスを作成。
    //ctx.arc(100,100,40,0,Math.PI*2);//第一引数と第二引数が座標(横縦)、第三引数が半径、第四が円の始まりの角度、第五が円の終わりの角度、第六が描く向き 

    //fillで長方形を塗りつぶす。何も指定しないと黒色となる。
    ctx.fill();//fillは、容器や場所などをいっぱいにする、満たすという意味だ。

    //最後にbeginPathで開始したパスを閉じる。
    ctx.closePath();
}
Particle.prototype.updatePosition = function() {
	//3.位置をずらす
	this.x +=5;
	this.y +=5;
}

//1.図形を描画する。(描画サイクルの開始)
render();

function render() {
	//2.一度図形を消去する
	ctx.clearRect(0,0,500,500);
	
	//配列の各要素の関数renderを実行して図形を描画
	particles.forEach(function(e) {e.render();});
	
	//5.一定時間を置く
	requestAnimationFrame(render);
}

ブレイクスルーjavascript chapter3によるとパーティクルの数を3個、5個、100個…と増やしていくとプロトタイプではないほうのソースだとその都度、変数の数が増えて大変になってしまうのでプロトタイプを使ったそうですが、
いまいちプロトタイプがどう有効性を発揮したのか、どのような必然性があったのかがわかりません。ただ、プロトタイプがあるほうは、変数NUMをいじるだけでパーティクルの数を増やせるのでプロトタイプが無い奴と比べると格段に便利ですが、この便利さはプロトタイプがないと実現できないのでしょうか。
プロトタイプは、どのような場面に差し掛かったところで利用すべきものなのでしょうか。

Answer 1

JavaScriptで何かを実現するだけが目的で、どちらでも実行可能なのであれば、プロトタイプを使う必要性はありません。しかし、JavaScriptはプロトタイプベースのオブジェクト指向言語なので、プロトタイプを使うと便利な場面はたくさんあります。つまり、設計次第ということになります。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain

作成したプログラムの将来性を考えれば、プロトタイプベースで設計したほうが断然拡張性はあがります。小規模なプログラムでは恩恵や利便性を感じられないかもしれませんが、知っておいて損はないはずです。

いちおう誤解されているようなので、説明しておきます。下記のようなexample()でもJavaScriptの内部的にはプロトタイプチェーンを使って検索が行われます。（上のリンクのサイトにも書かれています）

function example(){}

プロトタイプチェーンの順序

example -> Function.prototype -> Object.prototype -> null

Answer 2

...正直、現時点においてprototypeを覚える必要性はありません。
今の時代に覚えるべきJavascriptではClassが使えます。
昔はClassが無かったのでPrototypeを使わなければいけない時代がありました。
もうprototypeなんていうものは「古典」と見ていいかと思います。

他の人が書いたものが読めるぐらい知識があれば良いのかなと思いますので、今更覚え直したくもありません。。

Class構文は既にIE以外のブラウザではほぼ動くようです。
https://caniuse.com/#feat=es6-class

とはいっても、結局IEでも動かさなきゃいけないので、今JSでまともに仕事をしてる人はClassで書いてBabelを使ってIEでも動くようにするのが一般的です。

ちょうどつい先日、Javascriptの書き方最新版の記事がQiitaに出ましたが、この書き方を推奨します。
逆に言えば、この内容に沿わない本は古典の可能性がありますので、歴史的な経緯を知りたいという興味以外ではオススメできません。
https://qiita.com/shibukawa/items/19ab5c381bbb2e09d0d9