Can't get object constructor to pass other objects as parameters

JavaScript
1

I have a code set up something like this:
////////////////////////////////////////
function person()
{
this.age = 25;
}

function dog()
{
this.breed = “Retriever”;
}

function house(a_person,a_dog)
{
this.dad = a_person;
this.dog = a_dog;
}

var Andy = new person();
var Fluffy = new dog();
var Family = new house(Andy,Fluffy);
/////////////////////////////////////////

The problem is I keep getting an error along the lines of:

TypeError: Result of expression ‘house’ [[object Object]] is not a constructor.

It seemed to work when I wasn’t passing the other objects as parameters in the constructor. I just created and assigned them later. As in:

/////////////////////////////
function house()
{
this.dad;
this.dog;
}
var Andy = new person();
var Fluffy = new dog();
var Family = new house();
Family.dad = Andy;
Family.dog = Fluffy;
//////////////////////////////

So what’s wrong with passing them as parameters in the constructor itself?

2

Have a read of this Object-oriented JavaScript?constructor arguments

3

I see a lot about prototypes and inheritance in there (I’m not proficient enough with javascript to really have a good grip on everything that page was saying), but I’m not actually using any inheritance.

The only thing I’m trying to do is pass one object as a different object’s constructor argument. Javascript is supposed to take care of referencing and pointers and all that jazz so I’m not sure exactly what’s going on with my code.

As far as your link goes, most of that is way over my head. Is there any way you or someone could explain it to me like I’m 12? (I’m 18, but my programming skills are still going through puberty)

4

I’m looking over my code again, and I think it may just be some kind of syntax error on my part. So here’s my actual code I’m trying to use in conjunction with html5…

function point(x,y)
{
this.x=x;
this.y=y;

}
function line(start,end)
{
this.start = start;
this.end = end;
this.context;
}


draw = new Object();
draw.drawLine = function(acanvas,x,y,endx,endy)
{
start = new point(x,y);
end = new point(endx,endy);
aline = new line(start,end);
var c=document.getElementById(acanvas);
var cxt=c.getContext("2d");
cxt.moveTo(x,y);
cxt.lineTo(endx,endy);
cxt.stroke();
aline.context = cxt;
return aline;
}
draw.addPoint = function(aline,x,y)
{
start = new point(aline.end.x,aline.end.y);
end = new point(x,y);
aline.context.lineTo(x,y);
aline.context.stroke();
newline = new line(start,end);
return newline;
}

draw.addPointRelative = function(aline,x,y)
{
start = new point(aline.end.x,aline.end.y);
end = new point(x,y);
aline.context.lineTo(aline.end.x,aline.end.y); //THIS IS LINE 53
aline.context.stroke;
newline = new line(start,end);
return newline;
}

This is supposed to just be functions and objects with methods that will make it really easy for me to draw lines and be able to access their points and the x and y coordinates of those points, etc.

Let me know if you see a syntax error, or a similar careless mistake of mine.

And the error is supposedly on line 53, and the error is now:
TypeError: Result of expression ‘aline.context’ [undefined] is not an object.

5

Apart from issues of formatting, you do have the functions defining global variables, which is almost certainly responsible for clobbering variables.

Declare them as variables, so that they don’t end up affecting any similar global variables.


draw.drawLine = function(acanvas, x, y, endx, endy) {
    var start = new point(x, y),
        end = new point(endx, endy),
        aline = new line(start, end),
        c = document.getElementById(acanvas),
        cxt = c.getContext("2d");
    cxt.moveTo(x, y);
    ...
};

Functions that are constructors should have a capital initial letter for their name:


function Point(x, y) {
    this.x = x;
    this.y = y;
}

and likewise for the Line constructor.

Also, the last line of the Line constructor doesn’t appear to assign anything to the context.


this.context;

Instead of using new Object() it’s preferred to use {} instead


draw = {};

And there’s a stroke statement in the addPointRelative function that’s missing parenthesis:


aline.context.stroke;

Here’s a cleaned-up version of the code, but without a test page to help exercise the code, it’s unknown whether this will help with your problem.


function Point(x, y) {
    this.x = x;
    this.y = y;
}
function Line(start, end) {
    this.start = start;
    this.end = end;
}
var draw = {};
draw.drawLine = function (acanvas, x, y, endx, endy) {
    var start = new Point(x, y),
        end = new Point(endx, endy),
        aline = new Line(start, end),
        c = document.getElementById(acanvas),
        cxt = c.getContext("2d");
    cxt.moveTo(x, y);
    cxt.lineTo(endx, endy);
    cxt.stroke();
    aline.context = cxt;
    return aline;
};
draw.addPoint = function (aline, x, y) {
    var start = new Point(aline.end.x, aline.end.y),
        end = new Point(x, y),
        newline = new Line(start, end);
    aline.context.lineTo(x, y);
    aline.context.stroke();
    return newline;
};
draw.addPointRelative = function (aline, x, y) {
    var start = new Point(aline.end.x, aline.end.y),
        end = new Point(x, y),
        newline = new Line(start, end);
    aline.context.lineTo(aline.end.x, aline.end.y); //THIS IS LINE 53
    aline.context.stroke();
    return newline;
};