react中类组件this指向

这是一个标准的类组件

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')