Can't change a class variable within javascript function

Question

The method, foo() is called, sx++ won't change. When I alert(sx) I get NaN. Should I define the method using prototype?

function fooClass(sx) {
    this.sx = sx;
    this.foo = function() {
      if(booleanIsTrue) this.sx++;
    };
}

*Ignore syntax errors, if any. This is not a copy paste. It is correct in my project.

Moving sx++ out side the if statement works.

Any ideas as to why this is happening?

_“Moving sx++ out side the if statement works”_ – well than maybe the if condition does not evaluate to true …? — CBroe, Nov 12 '13 at 12:57
@CBroe that is possible, I will test that when I get back to my project computer. — Keely, Nov 12 '13 at 12:58
Yes, I think you should use prototype if only so you won't create closure(s) every time you create a fooClass. It's also better to capitalise constructor methods so you know it's not meant to be invoked. I have tried to create a as complete as possible answer about prototype and constructor functions here: http://stackoverflow.com/a/16063711/1641941 Think your current problem is most likely related to the if statement, you can console.log in chrome or firefox (preferably with firebug plugin) but if you're using IE it only works after pressing F12. To see the console you can just press F12 — HMR, Nov 12 '13 at 13:14

score 0 · Answer 1 · answered Nov 12 '13 at 12:54

0

You're having this problem because you're adding to the wrong variable. You want to change the class variable sx.

As someone pointed out, class is a reserved word, usually you use klass instead.

Also, you should be using {}, try entering you code into JSLint and see what it returns.

Try this out:

function klass(sx) {
    this.sx = sx;
    this.foo = function(booleanIsTrue) {
      if(booleanIsTrue === true) {
        this.sx++;
      }
    };
}

var a = new klass(3);
a.foo(true);
console.log(a.sx); // 4

answered Nov 12 '13 at 12:54

Alexander Kuzmin

1,120
8
16

1

did you change anything? oO – Dennis Nov 12 '13 at 12:55
I added some code to instantiate the class and everything now, try it out! – Alexander Kuzmin Nov 12 '13 at 12:57
I will try to instantiate it, but should it not log within the method. I need to change `this.sx` within the method in order to `this.render()` an object differently. All within the class. – Keely Nov 12 '13 at 13:05
Log within the method? – Alexander Kuzmin Nov 12 '13 at 13:37

Hugo Tunius · Accepted Answer · 2013-11-12T17:57:23.947

0

As you said this looks like a case were you would want to use the prototype chain instead of creating new functions for each object created by the function. That would look like this

var FooClass = function (sx) {
    this.sx = sx;
};

FooClass.prototype.foo = function () {
  if (booleanIsTrue) { //Where is booleanIsTrue coming from?
    this.sx++; 
  }
};


var a = new FooClass(0);
a.foo();
console.log(a.sx); //1

edited Nov 12 '13 at 17:57

answered Nov 12 '13 at 16:26

Hugo Tunius

2,869
24
32

1

I'm sorry but you're wrong, the `this` value is the invoking object and since the OP didn't include how the function is invoked we can't see what `this` is. Function foo is a member of fooClass instances (would be better on fooClass.prototype but for other reasons) so we assume it's invokied with `fooClassInstance.foo();` the invoking object would be fooClassInstance that would have a `this.sx` member as well. http://stackoverflow.com/a/16063711/1641941 under "The this variable" – HMR Nov 12 '13 at 16:58
You are right it does depend on the way the function is invoked, usage of `call` or `apply`, but I am assumed as you said that it was called with `fooClassInstance.foo()`. I can see how saying that a function has an implicit `this` without stating that it's the invoking object is not clear enough. I will fix it. – Hugo Tunius Nov 12 '13 at 17:06
1

I don't fully follow the first part of the answer but do agree with defining the function on the prototype. Even though that will not solve the OP's problem since he/she stated that removing the if statement would make it behave like OP expected. If I were to do `var inst=new fooClass();inst.foo();` with the code as OP provided than `this` inside the foo function would be `inst` and not window. – HMR Nov 12 '13 at 17:21
Oh you are right I was mixing up having the function in a variable and not attaching it to `this` in my answer. – Hugo Tunius Nov 12 '13 at 17:54

Can't change a class variable within javascript function

2 Answers2