javascript - 了解 this 在类方法中的使用

Question

我很难理解 Javascript 中 this 关键字的使用。

我在 stackoverflow 上偶然发现的其他问题更多的是关于使用 this 关键字调用方法或函数。比如使用bind或者ES6箭头函数等等..

所以我在 React 中有这个有状态组件，我们使用 Axios 来拦截请求

import React, { Component } from 'react';
import Modal from '../../components/UI/Modal/Modal';
import Aux from '../Aux/Aux';

const withErrorHandler = ( WrappedComponent, axios ) => {
    return class extends Component {
        state = {
            error: null
        }

        componentWillMount () {
            this.reqInterceptor = axios.interceptors.request.use(req => {
                this.setState({error: null});
                return req;
            });
            this.resInterceptor = axios.interceptors.response.use(res => res, error => {
                this.setState({error: error});
            });
        }

        componentWillUnmount() {
            axios.interceptors.request.eject(this.reqInterceptor);
            axios.interceptors.response.eject(this.resInterceptor);
        }

        render () {
            return (
                <Aux>
                    <Modal 
                        //Something
                    </Modal>
                    <WrappedComponent {...this.props} />
                </Aux>
            );
        }
    }
}

export default withErrorHandler;

类似于上面的代码，在上面的代码中，我们调用拦截器，当我们需要 componentWillMount 时我们要删除它(以避免内存泄漏)

为此，讲师在 componentDidMount 中做了类似的事情，然后

this.reqInterceptor = axios.interceptors.request.use(req => {
                this.setState({error: null});
                return req;

这在组件WillUnmount中

 axios.interceptors.request.eject(this.reqInterceptor);

[问题]有人可以在这里解释一下this.reqInterceptor吗？就像我们不应该创建一个构造函数并在那里声明它然后使用它(也许我认为这是错误的)？

Answer 1

要回答您的问题，我们首先需要很好地理解 React.Component 的结构。

React 有状态组件经过精心设计，可以利用一些面向对象的编程(尽管您可以在其他范例中实现相同的模式。)您可以使用 this 来引用整个组件类。处理。您可以通过引用作用域内的 this 来检索属性值或为其赋值，或者调用组件的有界方法。

在有状态组件中，当 DOM 准备好并安装时，React 会执行 componentDidMount()，然后根据您的代码，通过 为组件的 reqInterceptor 属性分配一个值>this.reqInterceptor = value...，this 基本上是我们从函数 function withErrorHandler { return class extends Component {... } }。

这是动态创建组件的常见模式。我们可以在下面的示例中应用相同的内容来演示它如何在 ES6 类的范围内工作:

class Service {
  constructor(x) {
    this.x = x;
  }
}
function getMyService(extra) {
  return class extends Service {
    getExtra() {
      return extra; // extra value like WrappedComponent or axios
    }
    getX() {
      return this.x;
    }
  };
}

// result
const MyService = getMyService('some extra value'); // Returns the class
const myServiceInstance = new MyService(1); // This is what React does to instantiate your component
console.log(myServiceInstance.getX()); // -> 1
console.log(myServiceInstance.getExtra()); // -> 'some extra value'

更新:我更新了上面的示例，使其在语义上接近 React.Component