Issue with Javascript Classes

Question

I am playing around with javascript, so it might sound as a trivial question. In a piece of code like this:

function timeFunction(fn, nameOfFn){
var start = Date.now();
fn();
var end = Date.now();
var time = end - start;
console.log(nameOfFn + ' took ' + time + 'ms');
}

function Person(name){
this.name = name;
this.sayName = function(){
    console.log(this.name);
}
}

var bob = new Person('bob');
timeFunction(bob.sayName,'sayName');

Output is:

result
sayName took 7ms

(time will differ everytime you run the code)

Not sure where 'result' comes from and why 'Bob' is not shown.

I don't get result in the console when I run that code - are you doing anything else? — Qantas 94 Heavy
– Qantas 94 Heavy, Commented Oct 8, 2013 at 11:11

nnnnnn · Accepted Answer · 2013-10-08 11:14:06Z

4

Within your sayName() function this is not what you are expecting. It's actually window, and so you are logging the window.name property (which happens to be "result" in your case - I would guess you're testing your code in jsfiddle?).

That's because this in JavaScript is set according to how a function is called, it's not automatically whatever object the function "belongs" to. (In fact, functions don't really "belong" to objects at all - your bob object doesn't "own" .sayName(), it just has a reference to it.)

MDN explains this in detail.

One way to get your code to behave the way you expect is to use the .bind() method:

timeFunction(bob.sayName.bind(bob),'sayName');

answered Oct 8, 2013 at 11:14

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

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

2 Comments

Kanan Farzali Over a year ago

yes, I am testing in jsfiddle. Thanks, didn't pay attention to tricky this :)

nnnnnn Over a year ago

Cool. I didn't want to go into too much detail about ways to set this, because I'd just be reproducing the MDN article in my answer, but now you know where to focus.

Fabrizio Calderan · Accepted Answer · 2013-10-08 11:20:53Z

2

Bob is not shown because of the different scope of this inside sayName method: try

function Person(name){
   var _this = this;

   this.name = name; 
   this.sayName = function(){
      console.log(_this.name);
   }
}

or, even better, use bind() as also suggested by @nnnnnn in a previous answer.

(and I can't see the "result" string when I execute your code, maybe it comes from another piece of code)

edited Oct 8, 2013 at 11:20

answered Oct 8, 2013 at 11:14

Fabrizio Calderan

124k26 gold badges172 silver badges183 bronze badges

Collectives™ on Stack Overflow

Issue with Javascript Classes

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related