为什么要bind(this)
React的Class组件中常常会用到bind(this)
来绑定this
,但是究竟为什么要这么做呢?难道Class中的方法拿不到实例的this
吗?
来试验一下:
class Person {
constructor(name) {
this.name = name;
}
say() {
console.log('my name is ' + this.name);
}
}
上面代码的Person
类中,say
方法去获取了this
,然后当我们实例化一个对象时,并调用say()
方法时,结果是:
let p1 = new Person('Jay');
p1.say();
// my name is Jay
结果说明在Class的方法中,是可以直接通过this
获得实例对象的。所以实际上在React的Class中直接使用this
是没有问题的,例如在生命周期函数或者render
中。但是在render
函数中的JSX模板中的事件处理函数,这里面的调用的方法的this
就不会指向组件实例:
export default class Demo5 extends Component {
handleClick() {
console.log(this);
}
render() {
return (
<div onClick={this.handleClick}>
Hello
</div>
);
}
}
上面的handleClick
函数作为JSX中的事件处理函数,其中的this
不会指向组件实例,而是指向了事件响应的上下文环境(非严格环境下是window
,严格环境下是undefined
),而类声明和类表达式的主体以严格模式执行(主要包括构造函数、静态方法和原型方法以及getter
和setter
函数),所以this
指向undefined
为什么this
不能指向组件实例
实际上这与React和JSX语法没有关系,是JavaScript的this
绑定