Back to previous "this"

Question

How can I get "back to previous this? To explain better, I created this sample code:

class MyClass {
    constructor(x,y,z) {
    this.x = x;
    this.y = y;
        setTimeout(function () {
            this.z = z;
        }, 1000);
    }
}

var myVariable = new MyClass(10,15,20);

setTimeout(function () {
    console.log(myVariable.z);
}, 1500);

The problem is that last lane should output 20 but instead it gives me an error.

I understand why though. The this.z was understood as this of setTimeout(), not myClass, making myVariable.z as undefined.

How can I set this of myVariable inside my MyClass?

Do something like `var that = this` in whatever context you want to save the `this` of. — Carcigenicate, Mar 27 '17 at 20:14
Use an arrow function within setTimeout() or do the classic `var me = this;` and use `me` within setTimeout(). — le_m, Mar 27 '17 at 20:14

score 1 · Accepted Answer · edited May 23 '17 at 12:25

1

Use an ES6 arrow function with lexical binding of this:

class MyClass {
    constructor(x,y,z) {
    this.x = x;
    this.y = y;
        setTimeout(() => {
            this.z = z;
        }, 1000);
    }
}

var myVariable = new MyClass(10,15,20);

setTimeout(function () {
    console.log(myVariable.z);
}, 1500);

Using this within an arrow function refers to the this of the surrounding code block (also called static scope).

See also: Do arrow functions not bind `this` inside ES6 classes?

edited May 23 '17 at 12:25

Community

1
1

answered Mar 27 '17 at 20:15

le_m

19,302
9
64
74

My app is Chromium-based, so this solution is perfect. Thanks a lot! I'll accept this answer as soon as I can. – Kajcioch Mar 27 '17 at 20:20

score 0 · Answer 2 · answered Mar 27 '17 at 20:13

0

Your lambda function (closure) gets called asynchronously, so it does not run in object context. You may however save the reference in the upper context and use it in the closure.

e.g. var that = this; then that.z = z;

answered Mar 27 '17 at 20:13

Victor - Reinstate Monica

1,264
9
11

Alternatively you could use "fat arrow" syntax. `setTimeout( () => { this.z = z; }, 1000);` – etchesketch Mar 27 '17 at 20:15
That requires ES6 and as such it won't work in browsers like iOS 9 and below, or IE 11 and below. – Victor - Reinstate Monica Mar 27 '17 at 20:17

Back to previous "this"

2 Answers2