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