Javascript - Что такое свойство прототипа и разница между двумя стилями кодирования, которые его используют - PullRequest
Новая
       4

Javascript - Что такое свойство прототипа и разница между двумя стилями кодирования, которые его используют

1 голос
/ 09 февраля 2012

Я пытаюсь понять объект-прототип Javascript (или это свойство?) И принцип, лежащий в основе прототипного программирования.И я не совсем понимаю, что такое прямые ООП-языки, такие как Java, C # и AS3.Я думаю, это помогло бы мне в этом разобраться, если бы кто-то мог объяснить мне разницу между этими двумя фрагментами, оба из которых в основном делают одно и то же - создать «класс» повторяемого экземпляра Ball (действительно ли это класс?).

Я видел это: 

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; 
    this.speed = 5;
    this.dx = 0;
    this.dy = 0;
    this.xunits = 0;
    this.yunits = 0;
    // Hokey properties
    this.angle = 0;
    this.radians = 0;

}

Ball.prototype.draw = function(context) {
    console.log("ball drawn");
    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();
};

Это пришло ко мне более интуитивно, но другие предложили мне сделать что-то более похожее на это: 

 Ball = function(radius,color) {
        this.radius=radius;
        this.color=color;
    };
    Ball.prototype.x=0;
    Ball.prototype.y=0;
    Ball.prototype.speed=0;
    Ball.prototype.angle=0;
    Ball.prototype.dx=0;
    Ball.prototype.dy=0;
    Ball.prototype.radius=10;
    Ball.prototype.color="#000";
    Ball.prototype.draw=function() {

        context.beginPath();
        context.arc(this.x,this.y,this.radius,0,Math.PI*2,true);
        context.lineWidth = 5;
        context.strokeStyle = this.color; // line color
        context.stroke();
        context.closePath();
    };

Пожалуйста, объясните основнуюразличия здесь для меня.

Спасибо за вашу помощь !!

...