'this' is assigned to a var before being used?

Question

I often see Javascript code where this is assigned to a variable to be used to refer to the current instance of the object.

var me = this;
me.someproperty_or_method

why are they coding like that? ? Here is a more complete code snippet,

var Preload = function(game){};

Preload.prototype = {

  init: function() {
    var me = this;

    var style = {
      font: "32px Arial",
      fill: "ffffff",
      align: "center"
    };



this.text = this.add.text(me.game.world.centerX, me.game.world.centerY, "Loading: 0%", style);
    this.text.anchor.x = 0.5;
  }

  preload: function(){ 
    this.game.load.text('dictionary', 'assets/dictionary.txt');

  },

  create: function(){
    this.game.state.start("Main");
  }
}

I'm pretty sure this not a duplicate, the answers given on other posts are not definitive.

`me` probably get used in a callback function where `this` will be different in that context — Fabricator, May 13 '16 at 00:39
This code does not make any sense. They should use `this.someproperty_or_method` here. If they need a `var me` referencing the `this` value, that's a separate thing. — Bergi, May 13 '16 at 00:49

Joseph · Answer 1 · 2016-05-13T01:00:29.467

this pertains to the function's execution context, a value that's determined during execution of a function, depending on how it is called.

In the case of nested functions, you may want to access the this of the outer function instead of the this in an inner function. Assigning it to a variable, the inner function can access the outer function's this.

function foo(){
  var foosThis = this;

  function bar(){
    var barsThis = this;

    // `this` is bar's `this` which is null.
    // You can't access foo's `this` via `this`
    // But you can access foo's `this` via foosThis
  }

  // Call bar with null as context
  bar.call(null);
}

// Call foo with an object as context
foo.call({});

function.call is just one of the many ways the context of a function can be changed.

Re "*this pertains to the function's context*" should probably be "*this pertains to the function's **execution** context*". ;-) — RobG, May 13 '16 at 00:59

novalagung · Answer 2 · 2017-04-20T07:31:01.707

1

It's usually used to hold another context. If you want to pass another context into another block, you could use bind(). Example:

function People() {
    // current `this` is context of `People`
    var I = this;

    var beHappy = function () {
        // current `this` is context of `beHappy`
        var me = this;

        console.log("=== beHappy()");
        console.log("I and me =",    (I === me));    // false
        console.log("this and me =", (this === me)); // true
    };

    var beSad = function () {
        // current `this` is context of `beSad`
        var me = this;

        console.log("=== beSad()");
        console.log("I and me =",    (I === me));    // true
        console.log("this and me =", (this === me)); // true
    }.bind(this);

    var beSleepy = function () {
        console.log("=== beSleepy()");
        console.log("this and I =", (this === I));   // false
    };

    beHappy();
    beSad();
    beSleepy();
}

new People();

As you can see on the beHappy, value of I is different than me, because it holds another context. But on beSad, both hold same context (which is reference to People).

edited Apr 20 '17 at 07:31

answered May 13 '16 at 00:47

novalagung

10,905
4
58
82

1

Only that `var me = this;` in your example does *not* hold another context. You should omit it, and only compare `I === this` directly. – Bergi May 13 '16 at 00:50
1

this example is just for comparison, I hope the OP will get easier to understand it – novalagung May 13 '16 at 00:53
2

Yes, but it also is a good example for one of the cases where a `var me` is unnecessary and does get used nonetheless :-) – Bergi May 13 '16 at 00:55
2

*this* can't "hold a \[execution\] context". It's a property of an execution context that holds a value that is set by how the function is called (or *bind* or lexically in arrow functions). ;-) – RobG May 13 '16 at 01:01

score 1 · Answer 3 · answered May 13 '16 at 00:54

1

Q: "'this' is assigned to a var before being used?"

A: The this contextual value is always present: actual, current, and up to date.

You can assign it from whichever context you wish and store the reference to its past value from wherever you are or any time you reach for its handle.

Factually: The assignment will in fact happen as it's being read/executed - not before & not after it has been used.

answered May 13 '16 at 00:54

Bekim Bacaj

5,707
2
24
26

1

Just answer the question, don't repeat it :-) – Bergi May 13 '16 at 00:57
1

Thanks @Bergi, I always think that providing the context to your answer is helpful in maintaining the clarity and the meaning of your answer, especially when it's positioned way below the visible part of the question. I think it's a good practice and I would like to encourage others to use it. :) – Bekim Bacaj May 13 '16 at 01:04
Oh, I do that myself all the time, to cite (blockquote) the part of the question post I am discussing. But repeating the *title* of the question is pretty useless. – Bergi May 13 '16 at 01:07
This seems to be one of those rare cases when title contains the core meaning of the entire question. :) - would you like me to edit it - because I can... – Bekim Bacaj May 13 '16 at 01:14

'this' is assigned to a var before being used?

3 Answers3