本文共 892 字，大约阅读时间需要 2 分钟。

一.js的原生事件绑定

1. addEventListener

按钮1

1. onclick

按钮2

3. 标签内onclick事件

按钮3

二.类中的方法this指向

class Person{   	Constructor(name,age){   		this.name = name		this.age = age	}	study(){   		//study方法放在了哪里？--- 类的原型对象上，供实例使用		//通过Person实例调用study时，study中的this就是Person实例		console.log(this)	}	const p1 = new Person('tom',18)	p1.study() // 通过实例调用study方法	const x = p1.study 	x()}

1. const x = p1.study相当于把p1的study属性赋给了x，而x()相当于直接函数调用，类中定义的函数会在局部开启严格模式，所以x()中的this为undefined

三.解决类中this指向问题

• changeWeather放在了哪里？— 类的原型对象上，供实例使用
• changeWeather作为onClick的回调，是在点击之后执行的，所以不是通过实例调用，而是直接调用；类中的方法会在局部开启严格模式，所以直接调用时，this指向为undefined

四.setState的使用

状态必须要通过setState进行更新，且更新是一种合并，不是替换

• 构造器函数调用几次？— 1次
• render函数调用几次？ — 1+n次，1次是初始化的那次，n次是状态更新的次数
• changeWeather函数调用几次？ — 点几次调几次
• render方法的主要作用为：读状态，做展示

五.state的简写方式

六.总结

1. 组件中render方法中的this为组件实例对象

2. 组件自定义的方法中this为undefined,如何解决？

   a.在构造器中强制绑定this：通过函数对象的bind()
   b.箭头函数+赋值语句

3. 状态数据，必须只能通过setState进行更新