0
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?

3
  • 2
    Where are you calling addError?
    – Wayne
    Feb 4, 2014 at 19:24
  • 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
    Feb 4, 2014 at 19:27
  • 1
    Read the introduction to this at MDN. For "what am I referencing by this?" - it's undefined as your error message says
    – Bergi
    Feb 4, 2014 at 19:32

2 Answers 2

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.

1
  • Plus the comment from Bergi (nice link - there is written that in strict mode this will be undefined - what a surprise!)
    – Paul
    Feb 4, 2014 at 19:52
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.

3
  • 1
    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). Feb 4, 2014 at 19:25
  • 1
    @Carpetsmoker: It's totally fine when used in a local scope with var.
    – Bergi
    Feb 4, 2014 at 19:29
  • @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 :-) Feb 5, 2014 at 17:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.