Having trouble understanding the dynamics of this vs self vs nothing.

Question

Consider the following chunk of code:

function Bar() {
    var _self = this;

    this.addPin = function (param1) {
        console.log('addPin');
    }

    function endPin(param1) {
        console.log('endPin');
    }

    _self.addPin(1);
    this.addPin(1);
    addPin(1);        // failse

    endPin(2);
    this.endPin(2);   // fails
}

var foo = new Bar();
foo.addPin(1);  // works
foo.endPin(1);  // does not work

From what I understand from playing with this code, the function declaration of endPin effectively makes it a private method to any outside callers. While this.methodHere type of declaration makes it a public method.

What I am not clear on is the usage of this in the class itself. this refer to the instance of the class. Why, in that case, can't I use this.endPin inside the class. Conversely, why do I have to use this.methodHere syntax when referring to addPin (which was declared using this.methodHere syntax).

Finally the difference between this and _self - I've read that _self preserves the original state of the class (or this). How does it do that if it's a reference supposedly pointing to the same memory location? How is this different from _self in this particular example?

Possible duplicate of [How does the "this" keyword work?](https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work) — Andreas, Mar 13 '18 at 15:29
Related: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new — Teemu, Mar 13 '18 at 15:32
Related: [Do I need to put this.var for every variable in an object?](https://stackoverflow.com/questions/13418669/javascript-do-i-need-to-put-this-var-for-every-variable-in-an-object) — Jonathan Lonowski, Mar 13 '18 at 15:46

score 4 · Accepted Answer · answered Mar 13 '18 at 15:32

You have asked a lots of questions here, so lets try and break them down.

this refer to the instance of the class. Why, in that case, can't I use this.endPin inside the class.

Because endPin is not part of the class, it a local function inside your constructor.

Conversely, why do I have to use this.methodHere syntax when referring to addPin (which was declared using this.methodHere syntax).

Because addPin is part of the class, basically the reverse of the first question. Doing func() does not automatically call the function of class.

How is this different from _self in this particular example?

In this case it's not, but if you used _self inside your local function, it would capture scope so it's still pointing to this of the class, instead of the functions scope.

score 1 · Answer 2 · answered Mar 13 '18 at 15:34

1

You can't use the this.endPin because the function is not defined in the class itself but inside a function.

If you write:

function Bar() {
    // do whatever
    this.endPin(2); // now it should work
}

function endPin(param1) {
    console.log('endPin');
}

answered Mar 13 '18 at 15:34

Andrea Magazzini

35
12

This will only work when `endPin` is defined in the global scope, `Bar()` is called without `new`, and strict mode isn't used. Barring those conditions, `this` will default to the global object, permitting this. But, that's perhaps a rather fragile solution. – Jonathan Lonowski Mar 13 '18 at 15:38
Yes I know, but he was asking so many questions that I was just trying to solve what I assumed was his main problem. – Andrea Magazzini Mar 14 '18 at 08:30

Having trouble understanding the dynamics of this vs self vs nothing.

2 Answers2