Why this javascript class returns undefined

Question

I have this simple Javascript code to write some modules, but I don't know why I get undefined results even when I'm calling the function from inside:

window.onload = function () {
    function testFunction() {
        this.hours = null;
        function getHours() {
            return this.hours;
        }

        alert(getHours());
        return {
            getHours: function () {
                return getHours();
            }
        }
    }

    var test = new testFunction();
    alert(test.getHours());

}

I think I've problem in understanding THIS keyword in javascript and using it inside javascript constructors.

Thank you.

The this inside your getHours function is not the same this outside of it. — Vsevolod Goloviznin
– Vsevolod Goloviznin, Commented Dec 23, 2014 at 15:22
@VsevolodGoloviznin What is the different? I want to understand THIS really! Thanks for your comment. — Mohammed AlBanna
– Mohammed AlBanna, Commented Dec 23, 2014 at 15:34
@Mohammad it's very simple - if you call obj.myFunc() then this === obj. But if you just call myFunc() then this === window (or null in ES5 strict mode!) — Alnitak
– Alnitak, Commented Dec 23, 2014 at 15:35
Nice! That makes sense for me, as @Alnitak says the problem then in my return public object, but his answer didn't work for me. — Mohammed AlBanna
– Mohammed AlBanna, Commented Dec 23, 2014 at 15:38
@Mohammad yes, because the returned public object doesn't contain the hour property! That could have been added to the returned object too, but then it wouldn't have been private. — Alnitak
– Alnitak, Commented Dec 23, 2014 at 15:44

Alnitak · Accepted Answer · 2014-12-23 15:56:23Z

1

Your (initial) problem is here:

return {
    getHours: function () {
        return getHours();
    }
}

By making a "naked" call to getHours() inside this function you're losing any this context that you had.

Instead, do this:

return {
    getHours: getHours
}

i.e. return an object that contains a reference to the desired function. When you call test.getHours() it'll then correctly pass test as this to getHours.

The other issue is that because you're using return to expose a set of functions, that returned object becomes the newly constructed this and it no longer refers to the this that you added hours to!

This is an unfortunate mishmash of two (or maybe more) JS OOP techniques and they're conflicting with each other.

edited Dec 23, 2014 at 15:56

answered Dec 23, 2014 at 15:26

Alnitak

341k72 gold badges420 silver badges503 bronze badges

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

5 Comments

Mohammed AlBanna Over a year ago

Samething! Undefined results!

Alnitak Over a year ago

OK - there's something else at play then - let me check

Alnitak Over a year ago

Right, you should use var hours, not this.hours.

Mohammed AlBanna Over a year ago

In this point hours var will be public reachable? I just want it private for this class only.

Alnitak Over a year ago

No var variables inside a function have lexical scope (i.e. effectively private)

NovaDev · Accepted Answer · 2014-12-23 15:38:44Z

Well, think about where "this" points to. The first one points to the function it's in, "testFunction()" . The second one points to the function that it is in, "getHours()" but you define getHours twice, and what you return the second time is undefined because you've no longer got "this". By default, javascript returns "undefined" when there isn't something specific you want to return. As I write this I notice another answer which proposes a solution to your problem, so I won't repeat that here.

Collectives™ on Stack Overflow

Why this javascript class returns undefined

2 Answers 2

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Related