Как использовать "этот" класс в "обратных вызовах" в ES6?

100
6

Я использую Babel с ES2015. И хотите использовать this внутренний метод callback внутри.

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

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

https://jsfiddle.net/dnthehnt/7/ Я получаю

TypeError: это неопределенный

потому что, насколько я понимаю, это относится к функции обратного вызова в x(). В качестве решения я использую

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.net/dnthehnt/6/ И получите

ххх

Это решение, но если у вас масса кода, он становится очень запутанным и трудным для написания. Есть ли лучшее решение для this? Или любая другая дисциплина для ES6 для использования обратных вызовов и этого.

спросил(а) 2021-01-19T13:06:19+03:00 6 месяцев, 2 недели назад
1
Решение
126

Посмотрите на функции стрелок, и особенно на то, как this обрабатывается функциями стрелок по сравнению с классическими функциями.

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

Ваше решение с использованием классических функций не будет работать, если бар изменился между вызовом x и вызовом обратного вызова.

Так вы должны делать это с помощью классических функций

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

Или вы можете использовать bind, я полагаю.

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

ответил(а) 2021-01-19T13:06:19+03:00 6 месяцев, 2 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема