Question

我对面向对象的东西相当新，所以这可能是完成这项工作的错误方法。

这是我目前拥有的非常精简的版本，但概念基本相同。当用户点击我页面上的画布元素时，我在下面创建20个粒子对象实例，将它们附加到数组，同时在30FPS更新画布并根据每个实例的x属性绘制圆形宾语。一旦粒子离开屏幕，它就会从阵列中移除。

var particle = function()
{
    var _this = this;
    this.velocity = 1;
    this.x = 0; 

    this.updateVelocity = function(newVelocity)
    {
        _this.multiplier = newVelocity;
    }

    var updateObject = function()
    {
        _this.x += velocity;
    }

}

我希望用户能够控制使用页面上的输入元素创建的新粒子的速度。当这更新时，我有一个事件监听器调用

particle.updateVelocity(whateverTheUserEntered);

但是我收到错误“粒子没有方法updateVelocity”。在对该主题进行了一些阅读后，我明白要调用该函数我需要创建一个对象实例，但这只会更新该实例的速度值，这对我来说无效。

我的问题是，有没有办法实现我正在做的事情，或者我是以完全错误的方式接近这个？正如我所说，我仍然在处理OOP原则，所以我可能刚刚回答了我自己的问题......

Answer 1

试试这个：

var particle = new (function()
{
    var _this = this;
    this.velocity = 1;
    this.x = 0; 

    this.updateVelocity = function(newVelocity)
    {
        _this.multiplier = newVelocity;
    }

    var updateObject = function()
    {
        _this.x += velocity;
    }

})();

您正在创建一个函数，然后将变量粒子设置为该值。 particle因此而没有任何特殊属性。但是，上面的示例使用new并将函数作为构造函数为particle分配一个（现在是匿名的）类的实例。

Answer 2

我认为你想要的是：

// define a particle "class"
function Particle() {
    var _this = {};

    _this.velocity = 1;
    _this.x = 0; 
    _this.multiplier = 1;

    _this.updateVelocity = function(newVelocity)
    {
        _this.multiplier = newVelocity;
    }

    _this.updateObject = function()
    {
        _this.x += velocity;
    }

    return _this;
}

// make 1 particle
var myParticle = new Particle();
myParticle.updateVelocity(100);

// make a bunch of particles
var myParticles = [];
for (var i=0; i < 100; i++) {
  var p = new Particle();
  p.updateVelocity(Math.random * 100);
  myParticles.push(p);
}

Answer 3

如果您将其更改为

  var particle = new function () {

  }

'new'将导致创建实例。

因此，创建一个为您构建新粒子实例的函数。

Answer 4

使速度静态并使用静态方法更新它。这样，您仍然可以创建粒子实例并更新所有粒子的速度。

var particle = function() {
  // particle stuff
}
particle.velocity = 1;
particle.updateVelocity = function(newVelocity) {
  this.velocity = newVelocity
}

在javascript中更新对象的定义

4 个答案: