JavaScript OOPS Question

Question

Hey guys,

A JavaScript newbie here. I have this following code:

function testObject(elem) {
    this.test = "hi";
    this.val = elem;
    console.log(this.test+this.val);
    echo();

    function echo () {
        console.log(this.test+this.val);
    }
}

var obj = new testObject("hello");

When it is run, I expect "hihello" to be outputted twice in the console. Instead it outputs as expected the first time but returns NaN the second time.

I'm sure I'm missing something here. I thought that the internal function can access the vars held outside. Can someone please guide me? I'm more of a functional UI developer and don't have much experience with OO code.

Thanks!

Answer 1

The problem is that inside echo the this value points to the global object, and this.test and this.val (which are referring to window.test and window.val) are undefined.

You can set the this value of echo by invoking it like:

echo.call(this);

That happens because you were invoking the function by echo();, then the this value is implicitly set to the global object.

Give a look to this question to learn how the this value works.

Edit: For being able to calling just echo(); you should persist the this value from the outer function context, there are a lot of ways to do it, for example:

//...
var instance = this; // save the outer `this` value
function echo (){
  console.log(instance.test+instance.val); // use it
}
echo();
//...

Or

//...
var echo = (function (instance) {
  return function () {
    console.log(instance.test+instance.val);
  };
})(this); // pass the outer `this` value
echo();
//...

Answer 2

You could also do this:

function testObject(elem) {
    this.test = "hi";
    this.val = elem;
    console.log(this.test+this.val);

    this.echo = function () {
        console.log(this.test+this.val);
    }
    this.echo();
}

var obj = new testObject("hello");

​Whenever you call this.echo() or obj.echo(), this will be bound to the object invoking the function.

Answer 3

Personally, I find it elegant to declare class methods like this:

function testObject(elem) {
    this.test = "hi";
    this.val = elem;
    this.echo();
}

testObject.prototype = {
    echo: function () {
        console.log(this.test + this.val);
    }
}

var obj = new testObject("hello");