I was trying to execute something like this:
class A {
functionA() {
setTimeout(function() {
console.log(this);
}, 1000)
}
}
const a = new A();
a.functionA();
But this always refers to the window object. I know that you could setup something like var a = this, but is there a more elegant way to pass this down from the object to the inner function?
You can use an arrow function instead of a regular function to keep the this context:
class A {
functionA() {
setTimeout(() => {
console.log(this);
}, 1000)
}
}
const a = new A();
a.functionA();Another way is to .bind(this) which will create a function with bounded this context:
class A {
functionA() {
setTimeout((function() {
console.log(this);
}).bind(this), 1000)
}
}
const a = new A();
a.functionA();
In order to meet the OP's expectation of coming up with a more elegant way I suggest the proper usage of setTimeout before thinking about any other approach ...
class A {
constructor() {
this.delay = 3000;
}
functionA() {
setTimeout(console.log, this.delay, this);
}
}
const a = new A();
a.functionA();.as-console-wrapper { max-height: 100%!important; top: 0; }Along with Sebastian's answer, another solution can be
class A {
functionA() {
const that = this
setTimeout(function() {
console.log(that);
}, 1000)
}
}
a = new A();
a.functionA();
functionA() { setTimeout(console.log, 3000, this);... make a proper use of setTimeout.