Using "this" object in JavaScript

Question

I am trying to declare a JavaScript object like so:

var Calculator = function() {
    this.textbox = new Textbox({
        ...
    });
    this.btn1 = new Button ({
        ...
        onClick: function() {
            this.textbox.value += "1";
    });
    ...
};

I did some debugging and found that the this object inside this.btn1 no longer refers to the Calculator object. How can I reference textbox to the Calculator's textbox?

Many thanks in advance!

score 3 · Accepted Answer · answered Jul 21 '17 at 21:31

3

The old trick of var self = this

var Calculator = function() {
    var self = this;  // self is a reference to calculator, always.

    this.textbox = new Textbox({
        ...
    });
    this.btn1 = new Button ({
        ...
        onClick: function() {
            self.textbox.value += "1";
    });
    ...
};

answered Jul 21 '17 at 21:31

corvid

10,733
11
61
130

1

I like `that` more. – PM 77-1 Jul 21 '17 at 21:32
As I know, the problem with using `this` was solved in ES6 via arrow functions (`() => {...}`) – P.S. Jul 21 '17 at 21:34
Many thanks for your quick response! My code works now! I will accept your answer when the timer cools off. – Daniel Hong Jul 21 '17 at 21:36

Using "this" object in JavaScript

1 Answers1