Losing This
In another context, this won't be reference to its object any more.
/**
* Losing this, problem
*
* Javascrip this, depends on the context of the call
* In another context, it won't be reference to its object
*/
class Button
{
constructor(value) {
this.value = value;
}
click() {
console.log(this.value);
}
}
let button = new Button("hello");
setTimeout(button.click, 1000); // undefined
Bind
We might need to bind the method to object.
/**
* Losing this, solutions
*
* Wrapper-function OR Bind the method
* The bind() method takes an object as an first argument
* and creates a new function
*/
class Button
{
constructor() {
this.click = this.click.bind(this); // method bind
}
click() {console.log("Click")}
focus() {console.log("Focus")}
blur = () => {console.log("Blur")} // wrapper-function
}
let button = new Button();
setTimeout(button.click, 1000); // Click
setTimeout(button.blur, 1000); // Blur
setTimeout(button.focus, 1000); // Blur
setTimeout(
() => button.focus(), 1000 // Focus
);
class User {
getName() {
return this.name;
}
}
let obj = new User();
let user1 = {name: "John"};
let user2 = {name: "Ana"};
console.log(obj.getName()); // undefiend
console.log(obj.getName.bind(user1)()); // John
console.log(obj.getName.bind(user2)()); // Ana
Last update: 595 days ago
