访问数组中的对象属性

Question

I'm working with paper.js and I want to create a method that dynamically alters the color property of each "Ball" object instance once every second. Imagine I have an object:

var Ball = function(point, vector) {

    this.point = point;
    this.dampen = .6;
    this.gravity = 0;
    this.bounce = -.6;


    var radius = this.radius = 10 * Math.random() + 30;

    var ball = new Path.Circle({
        radius: radius,

        fillColor: palette[Math.floor(Math.random()*palette.length)]
    });

    this.item = new Group({
        children: [ball],
        transformContent: false,
        position: this.point
    });
}

I want to add a new object method to "Ball" via "prototype" like so

Ball.prototype = {
    recolor: function() {
        // do stuff here
    }
}

Obviously I need to be able to access the "fillColor" property of the variable "ball", but I'm struggling to find a way to do so, I thought from within the recolor method I would be able to use the following:

this.item.children[i].fillColor 

or

this.item.children[i].Path.fillColor 

However both return "undefined" so obviously I'm being stupid! What would be the correct way to setup a prototyped method to change the color of the Ball object every second?

Answer 1

I tried your example with little changes and it works for me. Just guessing your objects.

Think its something related to how you have defined Group object. I tried :

function Group(obj) {
        this.children = [];
        this.transformContent=false;
        this.position=0.0;
       $.extend(this, obj);
   }

Also you can try this.item.children.push(ball); after you initialise this.item.

See the fiddle

 (function Init(){ function Circle(obj) { this.radius = 0; this.fillColor=0; $.extend(this, obj); } function Group(obj) { this.children = []; this.transformContent=false; this.position=0.0; $.extend(this, obj); } var Ball = function(point, vector) { this.point = point; this.dampen = .6; this.gravity = 0; this.bounce = -.6; var radius = this.radius = 10 * Math.random() + 30; var ball = new Circle({ radius: radius, fillColor: 10 }); this.item = new Group({ children: [ball], transformContent: false, position: point }); } Ball.prototype = { recolor: function() { // do stuff here var f = this.item.children[0].fillColor; console.log("f:"+f) } } var b = new Ball(6,7); b.recolor(); })(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>