Accessing variables in objects in javascript without "this"

Question

function Peon(number) {
  this.number = number;

  this.inc = function() {
    number = number + 1;
  };

  return true;
}
var p = new Peon(10);

function returnNumber() {
  p.inc();
  alert(p.number);
}

<input id="b00" type="button" value="Click" onclick="returnNumber()">

This code doesn't work as intended. Is there a way to make it work without having to write

this.number=this.number+1;

Here it is a trivial choice, but in bigger codes not having this.* would make it a lot more readable. Is it possible?

mplungjan · Accepted Answer · 2023-08-07 13:24:21Z

3

You can make number "private", but then you need a getter:

function Peon(number) {
  var number = number;

  // increment
  this.inc = function() {
    number++;
  };

  // a simple getter
  this.getNumber = function() {
    return number;
  }
}

var p = new Peon(10);

function returnNumber() {
  p.inc();
  alert(p.getNumber());
}

<input id="b00" type="button" value="Click" onclick="returnNumber()">

You should read Douglas Crockfords "The Good Parts" for more information on how to use this pattern, there's (limited) a preview available at Google Books.

Also you don't need to return something from the constructor, your return true is superfluous.

edited Aug 7, 2023 at 13:24

mplungjan

180k29 gold badges183 silver badges246 bronze badges

answered Nov 23, 2010 at 17:31

Ivo Wetzel

46.8k17 gold badges102 silver badges112 bronze badges

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

2 Comments

T.J. Crowder Over a year ago

You can read about Crockford's private members pattern on his website: javascript.crockford.com/private.html It's very important to note that if you're going to have a lot of Peons, this private member pattern consumes markedly more memory than just using a property, because each individual object will have its own copy of both functions defined within the constructor. They are not, and cannot be, shared between objects. So the tradeoff is privacy v. memory use. Memory consumption is a major problem on IE and Firefox. If you're only going to have a few Peons, it doesn't matter.

Tim Down Over a year ago

return true is indeed superfluous and essentially ignored at the end of a constructor, but returning an object rather than a primitive would not be ignored and would return that object rather than the new Peon object.

T.J. Crowder · Accepted Answer · 2023-08-07 14:15:19Z

1

No, you have to use this to reference properties on the this object. Note that this in JavaScript is very different from this in some other languages, like C or Java. More here and here.

What your code is doing is accessing the number argument that was passed into the Peon constructor function, rather than the this.number property you created in the constructor. Which is why it doesn't work as intended, but doesn't fail, either.

There's no reason to define your inc operation within the Peon constructor function, BTW, and some good reasons not to (every individual object created via Peon will get its very own copy of that function). So instead, you can define it like this:

function Peon(number) {
    this.number = number;
  
    // Don't return values out of constructor functions, it's
    // an advanced thing to do. In your case, you were returning
    // `true` which was being completely ignored by the JavaScript
    // engine because it's not an object. If you had returned an
    // object, the `this` object created for the `new Peon()` call
    // would have been thrown away and the object you returned
    // used instead.
}

Peon.prototype.inc = function() {
    ++this.number;
};

var p = new Peon(10);

function returnNumber() {
    p.inc();
    console.log(p.number); // shows 11, then 12, etc.
}

<input id="b00" type="button" value="Click" onclick="returnNumber()">

Or using modern JavaScript features (ES2015+):

class Peon {
    constructor(number) {
        this.number = number;
    }
    
    inc() {
        ++this.number;
    }
}

const p = new Peon(10);

function returnNumber() {
    p.inc();
    console.log(p.number); // shows 11, then 12, etc.
}

<input id="b00" type="button" value="Click" onclick="returnNumber()">

edited Aug 7, 2023 at 14:15

answered Nov 23, 2010 at 17:24

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

3 Comments

Matt Over a year ago

+1 to both you and @Ivo. The combination of the two makes for a great answer overall.

Matt Over a year ago

as a side note - why ++this.number instead of this.number++? I know they evaluate slightly differently, but in this use case would be interchangeable. Just curious since I tend to see the this.number++ form more frequently.

T.J. Crowder Over a year ago

@Matt: My native language is English, in which "verb-noun" is a dramatically more common speech pattern than "noun-verb", and so I write "increment x" (++x) rather than "x increment" (x++). If I were a native German speaker, I suspect I'd write x++. :-) In the vast majority of cases, there's no real-world difference. (I emphasize "real-world" because otherwise lurkers will pounce and try to micro-optimize. :-) )

Coin_op · Accepted Answer · 2010-11-23 17:23:03Z

0

Not really, but this is a little more concise

this.number++

Actually, as a side note, you'd be better off declaring .inc outside the constructor of Peon. You could do this with prototype. That way the inc function is not reconstructed each time you create an object of type Peon.

Peon.prototype.inc = function(){
    this.number++;
}

Or instead of using p.inc() you could do p.number++. That's the only way I can think of avoiding the this keyword.

answered Nov 23, 2010 at 17:23

Coin_op

10.8k4 gold badges38 silver badges47 bronze badges

Comments

Stephen · Accepted Answer · 2010-11-23 17:23:06Z

0

The only readable way I can see doing it would be:

this.inc = function() {
   this.number++;
};

Otherwise, in your "bigger codes" postulation, you could do something like this:

this.inc = function() {
   var number = this.number; // obviously simple here.  Imagine more complexity
   number++;
};

answered Nov 23, 2010 at 17:23

Stephen

19k10 gold badges62 silver badges98 bronze badges

Comments

mplungjan · Accepted Answer · 2023-08-07 13:25:26Z

0

Yes, you do not need to use 'this' in javascript. You can access variables via closure instead of 'this'

function createPeon(number) {

  function inc() {
    number = number + 1;
  };

  function getNumber() {
    return number;
  }

  return {
    inc,
    getNumber
  };
}
var p = createPeon(10);

function returnNumber() {
  p.inc();
  alert(p.getNumber());
}

<input id="b00" type="button" value="Click" onclick="returnNumber()">

edited Aug 7, 2023 at 13:25

mplungjan

180k29 gold badges183 silver badges246 bronze badges

answered Jun 17, 2017 at 17:30

Doug Coburn

2,60531 silver badges27 bronze badges

Collectives™ on Stack Overflow

Accessing variables in objects in javascript without "this"

5 Answers 5

2 Comments

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related