es6 Javascript class using this inside a callback

Question

The new es6 class allows you to use the self reference variable this inside methods.
However if a class method has a sub function or a callback, that function/callback no longer has access to the self reference variable this

class ClassName {
  constructor(dir){
    this.dir = dir;
    fs.access(this.dir, fs.F_OK | fs.W_OK, this.canReadDir);//nodejs fs.access with callback
  }

  canReadDir(err){
    this.dir;// NO ACCESS to class reference of this
  }
  //OR
  aMethod(){
    function aFunc(){
      this.dir;// NO ACCESS to class reference of this
    }
  }
}

Is there any solution to this?

You may create an arrow function instead `const aFunc = () => this.dir;` — zerkms, Apr 08 '16 at 11:10
Use [Arrow functions](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Lexical_this). — Rahil Wazir, Apr 08 '16 at 11:10
"*The new es6 class allows you to use the self reference variable this inside methods.*" - uh, no, this has nothing to do with ES6 `class` syntax. The `this` keyword works like it always did in methods. — Bergi, Apr 08 '16 at 11:14
it's not really a duplicate as this is related to the es6 class and not just callback — fredtma, Apr 08 '16 at 11:22
Whether you use a class or not doesn't matter. A function is a function, no matter how it was created. The solutions in the answer you accepted are exactly the same as he ones suggested in the duplicate. — Felix Kling, Apr 08 '16 at 13:56
@FelixKling It is not just related to callback, but to sub function in a class method. I do believe anyone using es6 class may stumble upon the same issue — fredtma, Apr 08 '16 at 17:06
If you are talking about the `aMethod` example, you'd have the same issue if you did `var obj = {aMethod: function() { ... }}`. Again, the issue you are experiencing has nothing to do with classes specifically. It's just how functions work in JavaScript. And I think it's very important to point that out. People should not mistakenly think, like you seem to, that class methods are different in this regard. Rather, people have to learn how functions, and `this`, work in general. — Felix Kling, Apr 08 '16 at 17:11

Dmitri Pavlutin · Accepted Answer · 2023-03-22T10:53:00.933

39

You have the following options:

Use an arrow function:

class ClassName {
  // ...
  aMethod(){
    const aFun = () => {
      this.dir// ACCESS to class reference of this
    }
  }
}

Or the bind() method:

class ClassName {
  // ...
  aMethod(){
    var aFun = function() {
      this.dir;// ACCESS to class reference of this
    }.bind(this);
  }
}

Store this in a specialised variable:

class ClassName {
  // ...
  aMethod(){
    var self = this;
    function aFun() {
      self.dir;// ACCESS to class reference of this
    }
  }
}

This article describes the necessary details about this and arrow functions in JavaScript.

edited Mar 22 '23 at 10:53

answered Apr 08 '16 at 11:12

Dmitri Pavlutin

18,122
8
37
41

Isn't self a preserved word? – Bálint Apr 08 '16 at 11:15
1

@Bálint Nope. `self` can be used. – Dmitri Pavlutin Apr 08 '16 at 11:16
second options works well, using arrow also works – fredtma Apr 08 '16 at 11:20
2

How would you write the canReadDir(err) function (just to make the example complete)? – FORTRAN May 17 '17 at 09:16
The `bind()` method works very well and its easy to read (y) – Vojtech Lacina Apr 18 '18 at 11:12
finally I found the difference between the `function` and the `=>` syntax, thank you. – ocramot Jan 16 '19 at 10:47

score 0 · Answer 2 · answered Apr 08 '16 at 11:07

0

Put a reference to dir in aMethod(), then use that in aFunc like

aMethod() {
    var tempDir = this.dir;
    aFunc() {
        console.log(tempDir);
    }
}

answered Apr 08 '16 at 11:07

Bálint

4,009
2
16
27

Use of `var self = this;` or `var that = this;` and using that later is already a pretty well understood practice for that purpose. – monish001 Mar 30 '17 at 09:43

es6 Javascript class using this inside a callback

2 Answers2

Linked

Related