如何确保我的对象有自己的 x 和 y

Question

我猜互联网上某个地方可能有关于此的答案，但我找不到。我正在制作一个图形计算器，我试图让 "plots" 遵循某个函数 y = 2x。虽然我似乎无法找到如何让地块有自己的 x 和 y（它们独特的 x 和 y）。

function CreateDot() {
this.ix = 1; //this is the x value of the function and is also used in y = 2x
this.fy = this.ix * 2; //this is the y value of the funciton y = 2x

    this.newDot = function() {
//this is defining the x value of the plot and scaling the value to have it follow the grid
        this.x1 = spacing * this.ix;


// this is defining the y value of the plot and scaling the value to have it follow the grid
        this.y1 = 500 - spacing * this.fy; //


//this is the code for creating the "plot" which is a dot on the screen and red in colour
        stroke(255,0,0);
        strokeWeight(25);

//this is defining the position of the point with the values above x1 and y1
        point(this.x1,this.y1);


//this is supposed to allow the next value of x=2 in the function y = 2x and so allowing the next coordinates of the plot to be ( 2, 4 ) and the next dot (3, 6) and so on.
        this.ix = this.ix + 1;
}
}

我注意到的是，在我将其设为构造函数并将新点放入数组并将其限制为 5 之后，我运行它和一个点一直飞到右边。我打印了每个对象 x 和 y，它们具有相同的值。

所以我的问题是如何确保每个对象都有自己独特的 x 和 y 值？

提前致谢！

Answer 1

您必须将函数放在原型上并以这种方式调用它，或者您必须将点作为参数传递给更新函数：

// Prototype
function CreateDot( spacing ) {
  this.ix = 1;
  this.fy = this.ix * 2;
  this.x1 = spacing * this.ix;
  this.y1 = 500 - spacing * this.fy;
}
CreateDot.prototype.addOne = function() {
  // this refers to: 'the dot you call addOne upon'.
  this.ix = this.ix + 1;
};
var myDot = new CreateDot( 250 );
console.log( 'before myDot.addOne() : ' + myDot.ix );
myDot.addOne();
  console.log( 'after myDot.addOne() : ' + myDot.ix );
// Seperate function
var addOne_f = function( dot ) {
  // this refers to 'the window instance', so you need to use the 'dot' parameter to refer to the dot.
  dot.ix = dot.ix + 1;
};
console.log( 'before addOne_f( myDot ) : ' + myDot.ix );
addOne_f( myDot );
console.log( 'after addOne_f( myDot ) : ' + myDot.ix );

//  Inside an array:
var dots = [
  new CreateDot( 200 ),
  new CreateDot( 225 ),
  new CreateDot( 250 )
];
//  Update all dots
dots.forEach( dot => dot.addOne());
//  Update the second dot again to show they're not linked
dots[ 1 ].addOne();
console.log( dots.map( dot => dot.ix ));

如何确保我的对象有自己的 x 和 y

How to make sure my object has their own x and y

javascript

p5.js