这是一个标准的类组件
import React,{Component} from 'react';
class View extends Component{constructor(props){super(props)}state={} //写在这里跟写在constructor中一样,都可以起到初始化的效果,并且可以省去thisfn(){}fn1(){}render(){return(<div><button onClick={this.fn}>按钮</button><ul>{this.fn1()}</ul></div>) }
}
接下来是this指向的问题
主要分三个模块:
-
constructor:this指向new生成的实例,这里也就是我们的View组件了
-
render():this指向也是组件实例View
-
方法:
fn(): this指向是undefind fn1(): this指向是组件实例
为什么fn()的指向是undefined?
分析:
1、我们知道调用都是有()的,所以这里只是把onClick指向堆中的fn,调用时也就没有实例————所以this会指向window
2、使用babel编译后就是严格模式(严格模式下this不能指向window),所以this就会变为undefined
改变方法this指向的4种方法
- 在contructor写入
this.fn=this.fn.bind(this)
会在实例的属性中添加一个fn属性,指向改变this指向之后的fn(),原型链的的fn()并无变化。
使用bind是因为不会自执行,而call,apply都会自执行 - 方法使用箭头函数的写法
fn=()=>{}
箭头函数this指向特性
- 调用时使用箭头函数,可以传参
()=>{this.fn("text")}
- 调用时使用bind改变this指向,也可以传参
this.fn.bind(this,'text')