0

プロトタイプが実際に何をするのか混乱しています。私は現在HTMLキャンバスを学んでおり、例の1つとして、プロトタイプを使用して描画メソッドを宣言しています。しかし、プロトタイプを使用することと、コンストラクター関数自体に単純に配置することの違いは何ですか?

本からのこの例ではありません：

function Ball (radius, color) {
    if (radius === undefined) { radius = 40; }
    if (color === undefined) { color = "#ff0000"; }
    this.x = 0;
    this.y = 0;
    this.radius = radius;
    this.rotation = 0;
    this.scaleX = 1;
    this.scaleY = 1;
    this.color = utils.parseColor(color);
    this.lineWidth = 1;
    }


Ball.prototype.draw = function (context) {
context.save();
context.translate(this.x, this.y);
context.rotate(this.rotation);
context.scale(this.scaleX, this.scaleY);
context.lineWidth = this.lineWidth;
context.fillStyle = this.color;
context.beginPath();
//x, y, radius, start_angle, end_angle, anti-clockwise
context.arc(0, 0, this.radius, 0, (Math.PI * 2), true);
context.closePath();
context.fill();
if (this.lineWidth > 0) {
context.stroke();
}
context.restore();
};

これを入れるのと同じ?:

function Ball(radius, color){
...
this.draw = function (context) {
    context.save();
    context.translate(this.x, this.y);
    context.rotate(this.rotation);
    context.scale(this.scaleX, this.scaleY);
    context.lineWidth = this.lineWidth;
    context.fillStyle = this.color;
    context.beginPath();
    //x, y, radius, start_angle, end_angle, anti-clockwise
    context.arc(0, 0, this.radius, 0, (Math.PI * 2), true);
    context.closePath();
    context.fill();
    if (this.lineWidth > 0) {
    context.stroke();
    }
    context.restore();
    };
}
4

2 に答える 2

2

prototypeは、それを として受け取る他のすべてのオブジェクトによって共有されるオブジェクトですprototype。その結果、動的に追加されたメソッドはprototype、すべてのインスタンスによって共有されます。

function ClassA(){
    this.sayHello = function(){
        return "hello!";
    }
}

var instanceA = new ClassA();
instanceA.sayHello();//return "hello!";
//add a method to instanceA
instanceA.sayBye = function(){ return "Bye!"; }

var instanceB = new ClassA();
instanceB.sayBye(); //error, sayBye is not a method of instanceB.

//But, this really works
ClassA.prototype.sayBye = function(){ return "Bye!"; }

また、すべてのインスタンスが単一の を共有するためprototype、すべてのメソッドはメモリ内の 1 つの場所にのみ留まります。2 番目の実装では、各インスタンスに独自のメソッドがあるため、多くのメモリが使用されます。

これは強力な証拠ではありませんが、クラスの定義からメソッドを除外すると、コードがよりクリーンで読みやすくなります。

プロトタイプを使用すると、開発者は OOP スタイルでコードを簡単に記述できます。

 function ClassB(){
 }
 ClassB.prototype = new ClassA();
 // The equivalent approach may be this
 function ClassB(){
     ClassA.apply(this);
 }

2 つのアプローチはどちらも同じ仕事をすることができるので、好きな方を選んでください。

于 2012-08-06T06:54:50.617 に答える
1

あまり違いはありません。主な違いは、プロトタイプを介して作成されたメソッドは、オブジェクトのプライベートメンバーにアクセスできないことです。

function Ball (radius, color) {
    if (radius === undefined) { radius = 40; }
    if (color === undefined) { color = "#ff0000"; }
    this.x = 0;
    this.y = 0;
    this.radius = radius;
    this.rotation = 0;
    this.scaleX = 1;
    this.scaleY = 1;
    this.color = utils.parseColor(color);
    this.lineWidth = 1;
    var privateVar = 0;
    function privateFunction() {
        // anything
    }
}

Ball.prototype.draw = function() {
   privateFunction(); // doesn't work.
   privateVar = 2; // doesn't work
   this.lineWidth = 2; // this will work.
};
于 2012-08-06T06:55:48.730 に答える