函数中的this
在标准函数中，this引用的是把函数当成方法调用的上下文对象，这时候通常称其为this值（在网页的全局上下文中调用函数时，this指向window）。
这个this值到底引用哪个对象，必须到函数被调用的时候才能确定，因此这个值在代码执行过程中可能会变。
箭头函数中的this
在箭头函数中，this引用的是定义箭头函数的上下文。也可以说this值取决于该函数外部非箭头函数的this值，且不能通过call(), apply(), bind() 方法来改变this值。
类中的this
类的声明基本上还是基于自定义类型声明的语法糖
class Person {
constructor(name) {
this.name = name;
}
getName() {
return this.name
}
}
typeof Person // function
等价于
function Person(name) {
this.name = name
}
Person.prototype.getName = function() {
return this.name
}
class中的方法，除了静态方法，都是原型链上的，其中的name属性则是自由属性，不会出现在原型上，且只能在类的构造函数或方法中创建。
因为方法是原型上的，所以函数中的this指向的上下文就是实例对象。
const joey = new Person('joey')
joey.getName();
//getName中的this，指向的是joey实例。
在react中
class ButtonDemo extends PureComponent {
componentDidMount() {
console.log(this); 实例
console.log(typeof this); object
console.log(this instanceof ButtonDemo); true
}
hello() {
console.log(this); // undefined
}
render() {
return (<Button block={true} onClick={this.hello}>Click Me</Button>);
}
}
在react中，hello虽然是ButtonDemo实例的方法，但是调用的上下文是在Button的onClick方法中，这边的上下文指向已经不是ButtonDemo的实例了，最终点击后打印出来的this是undefined。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！