Classes in JavaScript

Question

I am defining a class in JavaScript

function Pen(parent){
    this.color = "#0000ff";
    this.stroke = 3;
    this.oldPt;
    this.oldMidPt;
    this.isActive = false;
    this.parent = parent; //app that owns this pen
    this.points = [];
    this.curShape;
        console.log(this);
    return(this);
}

In the console.log statement I am getting way more than just this class, I am getting all kinds of information about basically everything else going on. Why is that?

If you call your constructor 'Pen' without the new keyword this refers to the global Object (window probably) thus you see all window's properties — Moritz Roessler
– Moritz Roessler, Commented Mar 18, 2013 at 18:14
Thanks guys, I can't believe I spent the amount of time looking at this thing without noticing that I omitted new! — user1118684
– user1118684, Commented Mar 18, 2013 at 18:16
just use this library classjs.weew.ch, it does all the tricky stuff for you — M K
– M K, Commented Aug 10, 2013 at 7:04

Justin Bicknell · Accepted Answer · 2013-03-18 18:14:35Z

4

the keyword this is dependent on the caller, so if you are initializing the function without the "new" keyword "this" might very well be referencing the window and not the object.

Try:

function Pen(parent){
    var context = this;
    this.color = "#0000ff";
    this.stroke = 3;
    this.oldPt;
    this.oldMidPt;
    this.isActive = false;
    this.parent = parent; //app that owns this pen
    this.points = [];
    this.curShape;
        console.log(context);
    return(this);
}
 var pen = new Pen();

answered Mar 18, 2013 at 18:14

Justin Bicknell

4,81620 silver badges27 bronze badges

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

Comments

veddermatic · Accepted Answer · 2013-03-18 18:16:14Z

0

Because your "class" inherits (transparently, in your case) from other javascript base classes. If you want to introspect only the properties you've created on your object, use hasOwnProperty(keyName) to filter those out.

answered Mar 18, 2013 at 18:16

veddermatic

1,0827 silver badges16 bronze badges

Comments

Santiago Benitez · Accepted Answer · 2013-03-18 18:30:39Z

0

Javascript is prototype based and not class based. Every new custom object as default
has pre built functionlity provided by the base object called Object.
So everytime you ask if a property or method belongs to a given object, in the worst
case it will fall until the Object object, and if that property/method is not there
then it will throw an error. Therefore when you are using the log function it is
printing all the object structure including properties and method of its "base" class.

answered Mar 18, 2013 at 18:30

Santiago Benitez

3622 silver badges12 bronze badges

Collectives™ on Stack Overflow

Classes in JavaScript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related