正文

详解React中的this指向

︶ㄣ米米素材网 メ
米米素材网V管理员 / 阅读
0630

这篇文章主要介绍了React中的this指向的相关资料，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下

打算记流水账一般细数一下 React 中的 this 指向问题，具体流程按事件三要素：起因，经过，结果。哈哈哈哈哈！

起因：

众所周知，React 的设计是响应式的，使用者无需操纵 DOM,操纵数据，页面就会渲染更新。

数据一变就更新，是更新所有的 DOM 吗？当然不是，哪些变了就重新渲染哪些。那就要对数据变化前后的 DOM 进行比较。直接对比真实 DOM 吗？这样性能会很低，React 比较的是虚拟 DOM，虚拟 DOM 也是对象，只不过相较真实 DOM而言，少了很多属性，更“轻”。

如何写虚拟 DOM 呢？原生JS我们可以使用 document.createElement() 方法，创建节点。React 中也可以通过 React.createElement(component, props, children)，但是呢这种写法遇见多层嵌套，就能让人眼花缭乱。于是 JSX “横空出世”，JSX 其实就是,React.createElement 的语法糖，但是我们用起来更加方便，可以直接写成 <p id="test">hello</p> 这种形式。

但是呢问题又又来了！JSX 语法是不被 webpack 识别的，webpack 默认只能处理 .js 后缀名的文件，所以需要借助 Babel 这个 JavaScript 编译器，而 babel 开启了严格模式 **

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React, { Component } from 'react'
 
export default class index extends Component {
    // speak(){
    //     console.log(this)//输出undefined
    // }
    speak = () => console.log(this)//输出该组件
    render() {
        return (
            <div>
                <button onClick={this.speak}>按钮</button>
            </div>
        )
    }
}

this 本质上就是指向它的调用者，this 是在函数运行时才绑定,JS 里边普通函数都是 window 调用的，所以指向 window,开启了严格模式之后是 undefined。

?
1
2
3
(function(){
    console.log(this)//window
})()

在 JSX 中传递的事件不是一个字符串（在原生 JS 的中监听事件，采用的是回调函数的形式，在Vue中给监听事件传递的是字符串变量），而是一个函数（如上面的:onClick={this.speak}），此时onClick即是中间变量，最终是由React调用该函数，而因为开启了严格模式的缘故，this 是undefined,所以处理函数中的this指向会丢失。

经过：

事实上我们需要的是 this 指向当前实例化对象,无疑会使代码编写方便很多。类式组件里边有两地方的this恰好指向当前实例化对象。

1.构造函数

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

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

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

?
1
2
3
4
5
6
7
8
9
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 来声明上面这个类的话，代码如下:

?
1
2
3
4
5
6
7
8
9
10
11
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 不能变化了，不论是谁调用
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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 的定义

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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>
        )
    }
}

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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里面这样实现：

?
1
2
3
4
constructor(){
    super()
    this.speak = () => {console.log(this)}
}

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

以上就是详解React中的this指向的详细内容，更多关于React中的this指向的资料请关注米米素材网其它相关文章！

原文链接：https://juejin.cn/post/6954636599892279304