JavaScript: change a variable with a prototype function inside the constructor

Question

i'm new to "classes" in JavaScript so i hope i've used the right terms in my question.

I tought the this.Variables in the Constructor could be used through all the functions defined with prototype. This seems right in one direction but i'm not able to update the variable from within a function.

Here is a little jsfiddle https://jsfiddle.net/2g4vnL9b/

var littleTest = function() {
  this.testVar = "blub";
}
littleTest.prototype = {
  changeTestVar: function(val) {
    this.testVar = val;
  },
  changeTestVar2: function(val) {
    return val;
  }
}

var myTest = new littleTest();
console.log(myTest.testVar); // -> blub

myTest.changeTestVar = "foo";
console.log(myTest.testVar); // -> blub

myTest.testVar = myTest.changeTestVar2("foo");
console.log(myTest.testVar); // -> foo

i'm trying to update the this.testVar from the function test.changeTestVar, but it isn't saved inside the object for later use. Only if i set it directly it is saved. Can somebody explain me why my code behaves like it behaves and what i have to change?

thank you very much

I think this line is wrong myTest.changeTestVar = "foo"; Probably you mean myTest.changeTestVar("foo"); ? — MysterX
– MysterX, Commented Feb 8, 2016 at 15:23
In changeTestVar2 you are not setting this.testVar2 you are just returning what is passed in — Ruan Mendes
– Ruan Mendes, Commented Feb 8, 2016 at 15:23
Notice, that after getting this to work, setting this.testVar in the method creates an own property to the instance called the method. testVar in the prototype keeps its value, and when you create new instances of littleTest, testVar in those instances will be "blub". — Teemu
– Teemu, Commented Feb 8, 2016 at 15:44

TbWill4321 · Accepted Answer · 2016-02-08 15:23:52Z

1

You need to call changeTestVar as a function, not overwrite it with a new value.

Try the following:

myTest.changeTestVar("foo");
console.log(myTest.testVar);

Also, changeTestVar2 doesn't change this variables at all, it just returns the value passed in. That's normally called an "identity" function, but it doesn't have any persisting effect on your object.

answered Feb 8, 2016 at 15:23

TbWill4321

8,6863 gold badges30 silver badges25 bronze badges

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

Comments

adeneo · Accepted Answer · 2016-02-08 15:24:57Z

0

ChangeTestVar is a function, and it's written in different case

var myTest = new littleTest();
console.log(myTest.testVar); // -> blub

myTest.changeTestVar("foo");
console.log(myTest.testVar); // -> foo

FIDDLE

edited Feb 8, 2016 at 15:24

answered Feb 8, 2016 at 15:23

adeneo

319k29 gold badges410 silver badges392 bronze badges

2 Comments

celevra Over a year ago

after i've read my question again i felt so stupid... it needs 10 minutes that i can mark your answer as my answer, thank you

adeneo Over a year ago

No problem, we all make silly and strange mistakes from time to time.

santi6291 · Accepted Answer · 2016-02-08 15:26:08Z

0

The reason you code won't work is because your overwriting your prototype functions

myTest.changeTestVar = "foo"; //this is replacing the function for a string
console.log(myTest.testVar); // -> blub

since your calling a function the value should be passed like any other fucntion

myTest.changeTestVar("foo");
console.log(myTest.testVar); // -> foo

answered Feb 8, 2016 at 15:26

santi6291

1642 silver badges9 bronze badges

Comments

Paco q · Accepted Answer · 2016-02-08 15:42:07Z

0

you were wrong when passing the parameter to the function, by the way you can change the variable directly

var myTest = new littleTest();
console.log(myTest.testVar);

myTest.testVar="foo";
console.log(myTest.testVar);

answered Feb 8, 2016 at 15:42

Paco q

745 bronze badges

Collectives™ on Stack Overflow

JavaScript: change a variable with a prototype function inside the constructor

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related