react中类组件&this指向

这是一个标准的类组件

import React,{Component} from 'react';
class View extends Component{
	constructor(props){
		super(props)
	}
	state={}  //写在这里跟写在constructor中一样，都可以起到初始化的效果,并且可以省去this
	fn(){}
	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种方法

1. 在contructor写入this.fn=this.fn.bind(this)

   会在实例的属性中添加一个fn属性，指向改变this指向之后的fn(),原型链的的fn()并无变化。
   使用bind是因为不会自执行，而call，apply都会自执行

2. 方法使用箭头函数的写法fn=()=>{}

   箭头函数this指向特性

3. 调用时使用箭头函数，可以传参()=>{this.fn("text")}
4. 调用时使用bind改变this指向，也可以传参this.fn.bind(this,'text')