javascript - How to use "this" of class in "callbacks" in ES6? - Stack Overflow

admin管理员组

文章数量:1390756

I'm using Babel with ES2015. And want to use this inside callback inside method.

class baz {
  bar = "xxx";
  foo() {
    x(function() {
      console.log(this.bar);
    });
  }
}

function x(callback) {
  return callback();
}
var y = new baz();
y.foo();

/ I'm getting

TypeError: this is undefined

because as far as I understand this refers to the callback function in x(). As a solution I use

class baz {
  bar = "xxx";
  foo() {
    var bar = this.bar;//<=====
    x(function() {
      console.log(bar);//<=====
    });
  }
}

function x(callback) {
  return callback();
}
var y = new baz();
y.foo();

/ And get

xxx

This is solution, but if you have mass of code it's getting very confusing and hard to write. Is there any better solution for using this? Or any other discipline for ES6 for using callbacks and this.

I'm using Babel with ES2015. And want to use this inside callback inside method.

class baz {
  bar = "xxx";
  foo() {
    x(function() {
      console.log(this.bar);
    });
  }
}

function x(callback) {
  return callback();
}
var y = new baz();
y.foo();

https://jsfiddle/dnthehnt/7/ I'm getting

TypeError: this is undefined

because as far as I understand this refers to the callback function in x(). As a solution I use

class baz {
  bar = "xxx";
  foo() {
    var bar = this.bar;//<=====
    x(function() {
      console.log(bar);//<=====
    });
  }
}

function x(callback) {
  return callback();
}
var y = new baz();
y.foo();

https://jsfiddle/dnthehnt/6/ And get

xxx

This is solution, but if you have mass of code it's getting very confusing and hard to write. Is there any better solution for using this? Or any other discipline for ES6 for using callbacks and this.

• javascript
• ecmascript-6
• babeljs

Share Improve this question Follow asked Apr 10, 2016 at 11:14 ShekspirShekspir 8922 silver badges1212 bronze badges 3

• 1 That's not valid ES2015. It's invalid as of the second line (bar = "xxx";). You'd need A) To put that code in constructor() { /*...*/ } and B) To use this. in front of bar. – T.J. Crowder Commented Apr 10, 2016 at 11:21
• I think putting in constructor is not necessary. I think it'll be better to put in constructor variables which will be added on initialization. – Shekspir Commented Apr 10, 2016 at 11:29
• 2 It's not a matter of "thinking" one way or another. That code is not valid ES2015 code. There is a Stage 1 proposal for allowing instance fields to be defined that way, but it's just Stage 1 (there are stages 0 through 4, where 4 is "ready to include in the next spec"). It didn't make the ES2016 spec cutoff, and unless it progresses faster, looking iffy for ES2017. So while Babel may transpile it (Babel has many non-standard features), the syntax could well change before it's put in the spec, leaving you with nonstandard code. – T.J. Crowder Commented Apr 10, 2016 at 11:38

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

Look into arrow functions, and especially the way this is handled by arrow functions in parison to classic functions.

class baz {
  constructor() { this.bar = "xxx"; }
  foo() {
    x(() => {
      console.log(this.bar);
    });
  }
}

Your solution using classic functions would not work if bar was changed between the call to x and the call to the callback.

This is how you should do it with classic functions

class baz {
  constructor() { this.bar = "xxx"; }
  foo() {
    const self = this;
    x(function () {
      console.log(self.bar);
    });
  }
}

Or you could use bind, I suppose.

class baz {
  constructor() { this.bar = "xxx"; }
  foo() {
    x((function () {
      console.log(this.bar);
    }).bind(this));
  }
}

本文标签： javascriptHow to use quotthisquot of class in quotcallbacksquot in ES6Stack Overflow