CODEWITHSUNDEEP
javascriptclosuresscopeinstance-variables
Newbie Coder
Newbie Coder

Reputation: 35

JavaScript OOPS Question

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!

Upvotes: 3

Views: 576

Answers (3)

jmc
jmc

Reputation: 538

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");

Upvotes: 1

Christian C. Salvadó
Christian C. Salvadó

Reputation: 828200

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();
//...

Upvotes: 4

Felix Kling
Felix Kling

Reputation: 817238

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.

Upvotes: 3

Related Questions