How to initialize properties in Javascript constructor
I am playing with html5 canvas to create bouncing balls. I have this all working but I have to call an initia开发者_如何学Pythonlise function to set certain properties. How can I do this automatically in the constructor without having the initializer firing when the properties are accessed?
var test1 = new Ball(20);
test1.setAngleAndVelocity(); //I dont want to have to call this.
function Ball(speed){
this.position = new Vector2(canvas.width / 2, canvas.height / 2);
this.velocity;
this.speed = speed;
this.angle;
this.setAngleAndVelocity = function(){
this.angle = Math.floor(Math.random() * 360) * 0.0174532925;
this.velocity = new Vector2(this.speed/10 * Math.cos(this.angle), this.speed/10 * Math.sin(this.angle));
}
}
Since setAngleAndVelocity()
is a static method, I'd recommend putting it in the prototype of your Ball
class:
function Ball(speed){
this.position = new Vector2(canvas.width / 2, canvas.height / 2);
this.speed = speed;
this.setAngleAndVelocity(); //Sets the additional values
}
Ball.prototype.setAngleAndVelocity = function(speed){
speed = typeof speed != "undefined" ? speed : this.speed;
this.angle = Math.floor(Math.random() * 360) * 0.0174532925;
this.velocity = new Vector2(speed/10 * Math.cos(this.angle), speed/10 * Math.sin(this.angle));
}
this.velocity;
and this.angle;
aren't necessary: They're not defining anything, and the only use they serve is to show the developer what properties may be defined.
After these modifications, your script has become more efficient, and can be used in this way:
var test1 = new Ball(20); //Inititalized
test1.setAngleAndVelocity(22); //Optional, a method to adjust the speed value after the init of the class.
Just inline that computation into the constructor.
function Ball(speed){
this.position = new Vector2(canvas.width / 2, canvas.height / 2);
this.speed = speed;
this.angle = Math.floor(Math.random() * 360) * 0.0174532925;
this.velocity = new Vector2(this.speed/10 * Math.cos(this.angle), this.speed/10 * Math.sin(this.angle));
}
ADDENDUM
If you want to keep the function around to update the angle and velocity at other times in your application, place that function in the prototype:
Ball.prototype.changeSpeed = function (newSpeed) {
this.speed = newSpeed;
this.velocity = new Vector2(this.speed/10 * Math.cos(this.angle), this.speed/10 * Math.sin(this.angle));
}
You can call this method from the constructor if you wish:
function Ball(speed){
this.position = new Vector2(canvas.width / 2, canvas.height / 2);
this.angle = Math.floor(Math.random() * 360) * 0.0174532925;
this.changeSpeed(speed);
}
See http://jsfiddle.net/FnHLX/ for a working example.
You can also write a similar function for angle changes.
精彩评论