constructor() {
super();
console.log("constructor");
console.log(this); // App {props: undefined, context: undefined, refs: {…}, updater: {…}}
}
render() {
console.log("render");
console.log(this); // App {props: {…}, context: {…}, refs: {…}, updater: {…}, _reactInternals: FiberNode, …}
return <button onClick={this.show}>显示</button>;
}
show() {
console.log("show");
console.log(this); // undefined
}
}
root.render(<App />);
1. 类中的 constructor 函数的 this 指向实例对象
2. render 函数是实例创建好之后,通过实例对象调用的,所以this是指向实例对象的。
3. show 方法不是实例对象调用的,所以是 undefined
为什么 this 会丢失?
class App {
show() {
console.log("show");
console.log(this);
}
}
const app = new App();
let temp = app.show;
app.show(); // App {}: Object
temp(); // undefined
为什么调用 temp 没有指向 window 却是 undefined ?
类中的方法都开启了严格模式。
return <button onClick={this.show}>显示</button>;
show 是 onClick 函数的回调,不是实例对象调用的,是直接调用的,类中有严格模式,所以 show 中的 this 是 undefined。
解决方式:
1. bind
class App {
constructor() {
this.show = this.show.bind(this);
}
show() {
console.log("show");
console.log(this);
}
}
2. 箭头函数(show函数中没有 this,用了类中的 this)
const root = ReactDOM.createRoot(document.querySelector("#root"));
class App {
show = () => {
console.log(this);
};
}
const app = new App();
app.show();
let temp = app.show;
temp();
3. 直接传入一个箭头函数
btnClick() {
console.log("btnClick", this);
this.setState({ counter: 9999 });
}
render() {
return <button onClick={() => this.btnClick()}>按钮3</button>;
}
onClick 函数回调时,执行箭头函数,箭头函数再执行 btnClick 函数。this.btnClick()这里的 this 是组件实例对象。