"this" in a nested JavaScript function

Question

function TheTable(calculateButtonId)
{
    this.errorsBlock = document.getElementById("Some Value");

    var addError = function(text) {
        this.errorsBlock.innerText += text + "\n";
    }

    var customHandler = function(desc, page, line, chr) {
        addError("[" + line + "] " + desc);
        return true;
    }
    this.init = function() {
        window.onerror = customHandler;
        ......................
    }
    this.init();
}

var table = new TheTable("BtnId");

as soon as I changed this.addError to var addError it started to thow an error:

Cannot set property 'innerText' of undefined

Could you clarify, what am I referencing by this inside of var-function?

The question doesn't make sense, because addError is now local to TheTable but you never call it there. You are leaving something out. — Wayne
– Wayne, Commented Feb 4, 2014 at 19:27
Read the introduction to this at MDN. For "what am I referencing by this?" - it's undefined as your error message says — Bergi
– Bergi, Commented Feb 4, 2014 at 19:32

Wayne · Accepted Answer · 2014-02-04 19:45:08Z

2

A couple things:

Whenever you invoke a function using the new keyword -- e.g. new TheTable("BtnId") -- you create a new instance of that type. The value of this inside that constructor refers to this new instance.
You can add arbitrary properties to this new instance.
In general, when you invoke a function that has been assigned to this new object, then the value of this inside the function is that same instance.
The var keyword creates a variable scoped to its nearest enclosing function. In general, when you invoke functions of this type (i.e. functions created as global or local variables), the value of this inside them is window.

So when you do this:

this.errorsBlock = document.getElementById("Some Value");

this.addError = function(text) {
    this.errorsBlock.innerText += text + "\n";
}

this.addError("whatever");

...then the value of this inside addError refers to the same object that errorsBlock was assigned to and the call succeeds. However, when you change it to this:

var addError = function(text) {
    this.errorsBlock.innerText += text + "\n";
}

addError("whatever");

...then the value of this inside addError is window and window probably doesn't have any function property named errorsBlock and the call fails.

edited Feb 4, 2014 at 19:45

answered Feb 4, 2014 at 19:34

Wayne

60.5k15 gold badges135 silver badges129 bronze badges

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

1 Comment

Paul Over a year ago

Plus the comment from Bergi (nice link - there is written that in strict mode this will be undefined - what a surprise!)

Bergi · Accepted Answer · 2014-02-04 19:30:00Z

1

function TheTable(calculateButtonId) {
    this.errorsBlock = document.getElementById("Some Value");
    var self = this;
    var addError = function(text) {
        self.errorsBlock.innerText += text + "\n";
    }
}

this in javascript is always context under which function is running.

edited Feb 4, 2014 at 19:30

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

answered Feb 4, 2014 at 19:24

Giridhar Prakash Yellapu

1372 silver badges5 bronze badges

3 Comments

Martin Tournoij Over a year ago

I would avoid using self, since self is a predefined variable (it refers to window). This can lead to really confusing bugs (since self is never undefined).

Bergi Over a year ago

@Carpetsmoker: It's totally fine when used in a local scope with var.

Martin Tournoij Over a year ago

@Bergi Yeah, ddin't say it doesn't work. But once someone, somewhere makes a mistake (like, forgets to declare self in the current scope, or assumes a higher scope already declared id) it can (& probably will) cause extra confusion :-)

Collectives™ on Stack Overflow

"this" in a nested JavaScript function

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related