如何在JavaScript構造函數中初始化屬性

Question

我正在玩HTML5畫布來創建彈跳球。我有這一切工作，但我必須調用初始化函數來設置某些屬性。如何在構造函數中自動執行此操作，而不會在訪問屬性時觸發初始化器？

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)); 
    } 
} 

Answer 1

由於setAngleAndVelocity()是一個靜態方法，我建議你把它放在你的Ball類的原型：

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;和this.angle;是沒有必要的：他們不是什麼定義，而唯一他們所使用的用途是向開發人員展示可以定義哪些屬性。

這些修改之後，你的腳本已經變得更有效率，並能以這種方式使用：

var test1 = new Ball(20); //Inititalized 
test1.setAngleAndVelocity(22); //Optional, a method to adjust the speed value after the init of the class. 

Answer 2

只是內聯計算到構造。

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)); 
} 

附錄

如果你想保持功能在你的周圍應用程序更新在其他時間的角度和速度，把該函數原型：

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)); 
} 

如果您願意，您可以從構造函數中調用此方法：

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); 
} 

查看http://jsfiddle.net/FnHLX/作爲一個工作示例。

您還可以編寫一個類似的角度變化函數。