类中方法中的this
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script type="text/javascript"> 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() //undefined </script> </body> </html>
![]()
解决类中this指向问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="test"></div> <script type="text/javascript" src="../js/react.development.js"></script> <script type="text/javascript" src="../js/react-dom.development.js"></script> <script type="text/javascript" src="../js/babel.min.js"></script> <script type="text/babel"> //1.创建组件 class Weather extends React.Component { constructor(props) { super(props) //initialize state this.state = { isHot: true } //解决changeWeather中this指向问题 this.changeWeather = this.changeWeather.bind(this) //bind()返回了一个新函数并且把this修改为括号中的内容 } render() { //read state const { isHot } = this.state //解构赋值 return <h2 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}</h2> } changeWeather() { //changeWeather放在哪里？ —— Weather的原型对象上，供实例使用 //由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用 //类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefined console.log(this) } } //2.渲染组件到页面 ReactDOM.render(<Weather />, document.getElementById('test')) </script> </body> </html>
