Javascript: using a function as an object and accessing properties

Question

This is probably simple, but I'm not getting it. I'm declaring a function to draw a shape on an html canvas like so:

function res08(ctx, color){
    this.color = color;
    ctx.save();
    ctx.fillStyle = color;  
    ctx.beginPath();
    ctx.moveTo(649, 143);
    ctx.lineTo(649, 158);
    ctx.lineTo(661, 158);
    ctx.lineTo(664, 154);
    ctx.bezierCurveTo(665, 155, 666, 157, 666, 158);
    ctx.lineTo(683, 158);
    ctx.lineTo(683, 144);
    ctx.lineTo(674, 144);
    ctx.lineTo(674, 137);
    ctx.lineTo(678, 137);
    ctx.lineTo(678, 111);
    ctx.lineTo(648, 111);
    ctx.lineTo(648, 143);
    ctx.lineTo(649, 143);
    ctx.closePath();
    ctx.fill(); 
}

I thought because the function is an object that after it was called I would be able to access the color property like so:

var ctx = document.getElementById('theCanvas').getContext('2d');    
var blue = '#9ec3de';
res08(ctx, blue);
console.log( res08.color );

But that's returning undefined. I also tried declaring the function as a variable:

var res08 = function(ctx, color){

What am I missing? Thanks!

Why do you want to do this? It's kind-of weird. Wouldn't you be better off returning a new object from the function? — Pointy
– Pointy, Commented Jan 9, 2014 at 17:45
well there's more than just this one... and the person who wrote the original code doesn't know oop ;) — Andy
– Andy, Commented Jan 9, 2014 at 17:49
Well my point kind-of is that this is not really "object-oriented programming". It's not unheard-of to store properties on a function, but storing results of function calls on the function itself is unusual. What is it intended to do? — Pointy
– Pointy, Commented Jan 9, 2014 at 17:50
so there's about 20 of these, and each is one of three different colors. we want to highlight each on mouseover, so I want to have my mouseover function store the original color so that it can be changed back on mouseout. — Andy
– Andy, Commented Jan 9, 2014 at 17:55

Joeytje50 · Accepted Answer · 2014-01-09 17:59:07Z

1

You should instead use it as a class, calling it via a new keyword: new className(). Here is a demo of how that would work. With your code, it would be something like this:

function res08(ctx, color){
    this.color = color;
    ctx.save();
    ctx.fillStyle = color;  
    ctx.beginPath();
    ctx.moveTo(649, 143);
    ctx.lineTo(649, 158);
    ctx.lineTo(661, 158);
    ctx.lineTo(664, 154);
    ctx.bezierCurveTo(665, 155, 666, 157, 666, 158);
    ctx.lineTo(683, 158);
    ctx.lineTo(683, 144);
    ctx.lineTo(674, 144);
    ctx.lineTo(674, 137);
    ctx.lineTo(678, 137);
    ctx.lineTo(678, 111);
    ctx.lineTo(648, 111);
    ctx.lineTo(648, 143);
    ctx.lineTo(649, 143);
    ctx.closePath();
    ctx.fill(); 
}

var ctx = document.getElementById('theCanvas').getContext('2d');    
var blue = '#9ec3de';
var res = new res08(ctx, blue);
console.log( res.color );

This works, because the this keyword now refers to the variable res.

edited Jan 9, 2014 at 17:59

answered Jan 9, 2014 at 17:46

Joeytje50

19.2k15 gold badges69 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Joeytje50 Over a year ago

I think this guide (pun intended) might be useful to use as a kind of reference for what the this keyword is defined as in different situations. Really getting familiar with it, as with all other coding habits, just means that you just need to use it often enough though :P

Andy Over a year ago

ha! hence why I'm trying to use it here ;)

Joeytje50 Over a year ago

@Andy Oh by the way, in this particular situation, you could also add return color; to your function, and omit the new keyword. Then you can just get the color by just using the variable res.

Niet the Dark Absol · Accepted Answer · 2014-01-09 17:42:35Z

0

this refers to the context, not to the calling function. You can either call your function like this:

res08.call(res08, ctx, blue);

Or change your this.color = color line to this:

arguments.callee.color = color;

Or your console.log line to this:

console.log( ctx.fillStyle );

There are a number of options ;)

answered Jan 9, 2014 at 17:42

Niet the Dark Absol

326k85 gold badges478 silver badges604 bronze badges

3 Comments

Andy Over a year ago

arguments.callee.color = color; works great and does exactly what I need. Thanks so much!

Pointy Over a year ago

@Andy you really shouldn't use arguments.callee - it's going away in future versions of the language.

Andy Over a year ago

Good to know - I'll try the .call method

Jonathan Lonowski · Accepted Answer · 2014-01-09 17:49:22Z

0

You can refer to the function within its body by its name:

function res08(ctx, color) {
    res08.color = color;
    // ...
}

The context (value of this) of a function is rarely a reference to the function itself:

function foo() {
    console.log(this);
}

foo(); // [object Window]

edited Jan 9, 2014 at 17:49

answered Jan 9, 2014 at 17:44

Jonathan Lonowski

124k35 gold badges203 silver badges202 bronze badges

1 Comment

Andy Over a year ago

that's closer to what I originally was thinking, thanks!

Collectives™ on Stack Overflow

Javascript: using a function as an object and accessing properties

3 Answers 3

3 Comments

3 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

1 Comment

Related