Javascript basic instanciation

Question

I am a javascript newbie who's trying to transition from processing to javascript.

Using Paper.js, I am simply trying to understand the equivalent of classes and their functions with the code below but keep having this error : Cannot read property 'move' of undefine.

    function Apple (center) {
        this.color = 'red';
        this.center = center;
        this.path = new Path.Circle(this.center, 50);
        this.path.fillColor = 'black';
        return this.path;
    }

    Apple.prototype.move = function(){
        console.log('allo');
    }

var Apples = [];
var nbA = 10;

for(var i=0; i < nbA; i++){
    var center = new Point.random() * view.size;    
    Apples.push(new Apple(center));
}

function onFrame(event){
    for(var i=0; i < Apples.length; i++){
        Apples[i].prototype.move();
        }
    }

Can anybody shed some light ? Thanks !

`prototype` is a special property of **functions**. Normal objects don't have that property, hence `Apples[i].prototype` is `undefined`. Even if you called `Apples[i].move()` it would not work, since the objects you return from `Apple` are instances of `Path.Circle`, which likely don't have a `move` method. It's not clear to me why you do `return this.path;` inside the constructor. I think you would benefit the most from reading tutorials such as http://eloquentjavascript.net/06_object.html and https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript — Felix Kling, May 27 '16 at 02:52
@Felix King: To the best of my knowledge any values returned by javascript constructors are ignored. — Alastair Brown, May 27 '16 at 03:02
@Felix King: Have a look at this: [https://jsfiddle.net/93zctr68/2/](https://jsfiddle.net/93zctr68/2/) — Alastair Brown, May 27 '16 at 03:14
@AlastairBrown: Right, if you return a *primitive value*, the return value is ignored (and `this` is returned instead). If you return an object, the object is returned instead: https://jsfiddle.net/93zctr68/3/ . — Felix Kling, May 27 '16 at 03:18
@Felix King: That makes sense now: [https://jsfiddle.net/93zctr68/4/](https://jsfiddle.net/93zctr68/4/) — Alastair Brown, May 27 '16 at 03:29

Alastair Brown · Answer 1 · 2016-05-27T03:04:37.453

Change this:

function onFrame(event){
    for(var i=0; i < Apples.length; i++){
        Apples[i].prototype.move();
        }
    }

to this:

function onFrame(event){
    for(var i=0; i < Apples.length; i++){
        Apples[i].move();
        }
    }

the special prototype property adds properties (in this case a property that's a function) to all future instances of the specified class (in your case the Apple class).

Also, to incorporate what Felix has said change this:

function Apple (center) {
        this.color = 'red';
        this.center = center;
        this.path = new Path.Circle(this.center, 50);
        this.path.fillColor = 'black';
        return this.path;
    }

to this:

function Apple (center) {
        this.color = 'red';
        this.center = center;
        this.path = new Path.Circle(this.center, 50);
        this.path.fillColor = 'black';
    }

1

See my other comment. – Felix Kling May 27 '16 at 03:03

Javascript basic instanciation

1 Answers1