使用JavaScript構造函數來重新初始化現有對象

Question

我使用這個功能來創建我的粒子系統的粒子：

function particle() 
{ 
    this.speed = {x: -1.5+Math.random()*3, y: -12+Math.random()*12}; 
    this.location = {x: 50, y: 150}; 
    this.radius = 5+Math.random()*8; 
    this.life = 4+Math.random()*8; 
    this.remaining_life = this.life; 
    this.r = 255; 
    this.g = 140; 
    this.b = 30; 
} 

和我使用這個功能來更新過程中的粒子特性我的動畫過程：

particle.prototype.updateparticle = function() 
{ 
    this.remaining_life--; 
    this.radius--; 
    this.location.x += this.speed.x; 
    this.location.y += this.speed.y; 

    if(this.remaining_life < 0 || this.radius < 0) 
    { 
     this.speed = {x: -1.5+Math.random()*3, y: -12+Math.random()*12}; 
     this.location = {x: 50, y: 150}; 
     this.radius = 5+Math.random()*8; 
     this.life = 4+Math.random()*8; 
     this.remaining_life = this.life; 
     this.r = 255; 
     this.g = 140; 
     this.b = 30;  
    } 
} 

有沒有一種方法可以避免冗餘代碼？

另外我嘗試使用this = new particle()它沒有工作。我想不出它不應該起作用的原因。爲什麼不呢？

而在完全不相關的說明中，Firefox是否無法處理粒子動畫？ Chrome使用我CPU的5％。火狐使用大約30，仍然滯後！我有一個i5 2500k，所以不應該是一個問題。我正在運行兩者的最新版本。

Answer 1

Apply功能，傳遞當前對象作爲this參數：

particle.prototype.updateparticle = function() 
{ 
    this.remaining_life--; 
    this.radius--; 
    this.location.x += this.speed.x; 
    this.location.y += this.speed.y; 

    if(this.remaining_life < 0 || this.radius < 0) 
    { 
     particle.apply(this); 
    } 
} 

Answer 2

創建原型函數初始化值

function particle() { 
    this.init(); 
} 

particle.prototype.init = function(){ 
    this.speed = {x: -1.5+Math.random()*3, y: -12+Math.random()*12}; 
    this.location = {x: 50, y: 150}; 
    this.radius = 5+Math.random()*8; 
    this.life = 4+Math.random()*8; 
    this.remaining_life = this.life; 
    this.r = 255; 
    this.g = 140; 
    this.b = 30; 
} 

particle.prototype.updateparticle = function() { 
    this.remaining_life--; 
    this.radius--; 
    this.location.x += this.speed.x; 
    this.location.y += this.speed.y; 

    if(this.remaining_life < 0 || this.radius < 0) { 
     this.init(); 
    } 
} 

Answer 3

你可以把它的另一個功能，並在需要時調用。

function particle() 
{ 
    this.initialize(); 
} 

particle.prototype.initialize = function(){ 
    this.speed = {x: -1.5+Math.random()*3, y: -12+Math.random()*12}; 
    this.location = {x: 50, y: 150}; 
    this.radius = 5+Math.random()*8; 
    this.life = 4+Math.random()*8; 
    this.remaining_life = this.life; 
    this.r = 255; 
    this.g = 140; 
    this.b = 30;  
} 

particle.prototype.updateparticle = function() 
{ 
    this.remaining_life--; 
    this.radius--; 
    this.location.x += this.speed.x; 
    this.location.y += this.speed.y; 

    if(this.remaining_life < 0 || this.radius < 0) 
    { 
     this.initialize(); 
    } 
} 

Answer 4

function particle(x, y, r, g, b) { 
    this.location = {x: x, y: y}; 
    this.r = r; 
    this.g = g; 
    this.b = b; 

    // Group everything that randomises in update() 
    this.update = function() { 
    this.speed = {x: -1.5+Math.random()*3, y: -12+Math.random()*12}; 
    this.radius = 5+Math.random()*8; 
    this.life = 4+Math.random()*8; 
    this.remaining_life = this.life; 
    } 

    this.update(); 
} 


particle.prototype.updateparticle = function() { 
    this.remaining_life--; 
    this.radius--; 
    this.location.x += this.speed.x; 
    this.location.y += this.speed.y; 

    if(this.remaining_life < 0 || this.radius < 0) { 
    this.update(); 
    } 
} 

//Instantiation 
var p1 = new particle(50, 150, 255, 140, 30);