React中this指向问题及解决方法

React中this指向问题及解决方法

1.构造函数

类式组件里面的构造器里面的this是指向实例对象的，这是 ES6 类的特性，

众所周知 Javascript 里面是没有像 C++,JAVA 里面的的类的概念，ES6 类的实现也是基于原型链来实现的，

在 ES6 以前实例化一个对象应该这样：

function Animal(name, age) {
  this.name = name
  this.age = age
}
Animal.prototype.say = function () {
  console.log(this.name)
}
const Dog = new Animal('dog', 3)
Dog.say()  //会在控制台打印出dog

其中的 new 运算符，先产生了一个空对象 {}，然后生成一个 this 指针，将 this 指针指向这个空对象；运行构造函数时，就相当于{}.name=dog,{}.age=3一样的为这个对象动态添加属性。最后将这个生成好的对象付给 Dog,

当我们使用 ES6 的 class 来声明上面这个类的话，代码如下:

class Animal {
  constructor(name, age) {
    this.name = name
    this.age = age
  }
  say() {
    console.log(this.name)
  }
}
const Dog = new Animal('dog', 3)
Dog.say()  //会在控制台打印出dog

类实现和上面应该大差不差，所以this是指向实例对象的。

2.render 函数

render 函数里面的 this,也是指向实例的。为啥呢？

首先 render 方法是在类式组件的原型上边的，React发现组件是使用类定义的时候，后边就会 new 出来该类的实例，注意这个实例是 React 帮你 new 出来的，随后实例调用 render 方法，将虚拟 DOM 转换为真实 DOM，所以 render 中的this 就是指向实例咯，毕竟是他调用的嘛！，类似的呢，render 是一个生命周期钩子，那其他的生命周期钩子里面的 this也是指向实例组件的。

3.bind 和箭头函数

解决 this 问题呢，要有两个知识储备

（1）bind
call apply bind 都是定义在函数原型上边的，用来改变函数 this 指向，传入的第一个参数是 this,后面的参数就是fun1的参数

区别：

call 和 bind 传给调用的函数是可以传多个 apply 则是将参数放进一个数组
call 和 apply 返回立即执行函数，bind 返回新的函数，bind()() 也是立即执行
使用 bind 绑定 this 后，该函数里面的 this 不能变化了，不论是谁调用

let aa = {
    fun1: function(a,b){
        console.log(this)
        console.log(a-b);
    }
}        
let bb = {
    fun2: function(a,b){
        console.log(this)
        console.log(a+b);
    }
}
 
aa.fun1.call(bb,11,22);//bb-11
bb.fun2.apply(aa,[11,22]);//aa 33
aa.fun1.bind(bb,11,22)();//bb -11

（2）箭头函数
箭头函数：箭头函数并不会创建自己的执行上下文，所以箭头函数中的this都是外层的this,会向外作用域中，一层层查找this，直到有 this 的定义

const A = {
    arrow:() =>{
        console.log(this)//window
    },
    func:function(){
        this.arrow()//window
        console.log(this)//A
        setTimeout(() => {
            console.log(this)//A
        });
    }
}
A.arrow()
A.func()

结果：

方法一：在构造函数中使用bind

import React, { Component } from 'react'
 
export default class index extends Component {
    constructor(){
        super()
        this.speak = this.speak.bind(this)
        /*解决类中的this问题：this.speak = this.speak.bind(this)，构造器里面的this默认指向实例对象，
      实例对象通过原型链在类的原型上找着fnc函数，通过bind函数将其this指向改为实例对象，并返回一个新的函数
      再将这个新的函数给实例，并取名为fnc*/
    }
    speak(){
        console.log(this)//输出当前实例对象
    }
    render() {
        return (
            <div>
                <button onClick={this.speak}>按钮</button>
            </div>
        )
    }
}

方法二：将箭头函数赋值给类的属性

import React, { Component } from 'react'
 
export default class index extends Component {
    speak = () =>{
        console.log(this)
    }
    render() {
        return (
            <div>
                <button onClick={this.speak}>按钮</button>
            </div>
        )
    }
}//需要传参的话，可以使用函数柯里化的思想

注意：性能存在差异

使用箭头函数来解决性能会比较低，因为箭头函数不是方法，它们是匿名函数表达式，所以将它们添加到类中的唯一方法是赋值给属性。前面介绍ES6的类的时候可以看出来，ES 类以完全不同的方式处理方法和属性

方法被添加到类的原型中，而不是每个实例定义一次。

类属性语法是为相同的属性分配给每一个实例的语法糖，实际上会在 constructor里面这样实现：

constructor(){
    super()
    this.speak = () => {console.log(this)}
}

这意味着新实例被创建时，函数就会被重新定义,丢失了JS实例共享原型方法的优势。而方法一，只是在生成实例时多了一步 bind 操作，在效率与内存占用上都有极大的优势