在react项目中，失去this指针，为什么？

Question

import React from 'react';
import Red from './images/red.png'
import Yellow from './images/yellow.png'
import Green from './images/blue.png'

class Warn extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dataHeader:  '',
            dataContent: ''
        }
        this.tableTimer = null;
    }

    /**
     * 动态创建表格
     * @private
     */
    _createTable() {

        const self = this; // 指向本对象的指针

        console.log('=================创建表格开始=================');
        console.log(self);
        console.log('=================创建表格结束=================');



        var warning = document.getElementsByClassName('warning')[0];

        // 开始轮播
        self.tableTimer = self._setInterval(self._replaceTable, 5000, this.state.dataContent);

    }

    /**
     * 替换表格内容
     */
    _replaceTable(content){


        const self = this;

        console.log('=================replaceTable=================');
        console.log(self);
        console.log('=================replaceTable=================');

    }

    /**
     * 可带参数的定时去
     * @param callback
     * @param timeout
     * @param param
     * @private
     */
    _setInterval(callback,timeout,param){


        const self = this;

        console.log(self)

        var _sto = setInterval;

        // slice() 方法可从已有的数组中返回选定的元素
        // arrayObject.slice(start,end)
        var args = Array.prototype.slice.call(arguments,2);

        console.log(args)

        var _cb = function()
        {
            callback.apply(null,args);
        }

        var stoTimer = _sto(_cb,timeout);


        return stoTimer;
    }

    componentDidMount() {
        this._createTable();
    }

    // 组件接收到新的props时调用,并将其作为参数nextProps使用
    componentWillReceiveProps(nextProps) { // 接收新的参数
        var dataFlowPercentage01 = []

    }

    componentDidUpdate() {
        console.log('表格正式更新')
        const self = this;

    }


    render() {
        let self = this;

        var divStyle = {
            width: 632,
            height: 210,
            position: 'absolute',
            left: 235,
            top:120,
            color: '#D8D8D8',
            fontSize: 50
            //backgroundColor: 'yellow'
        }


        return (
            <div className={'warning'} style={divStyle}>
                这个
            </div>
        );

    }
}

export default Warn;

Answer 1

// 将你的_createTable方法重写如下编写
_createTable(){
    const self = this; // 指向本对象的指针
    console.log('=================创建表格开始=================');
    console.log(self);
    console.log('=================创建表格结束=================');
    var warning = document.getElementsByClassName('warning')[0];
    // 开始轮播 //TODO 这里代码重构
    //self.tableTimer = self._setInterval(self._replaceTable, 5000, this.state.dataContent);
    self.tableTimer = self._setInterval(()=>{
        self._replaceTable();
    },5000,this.state.dataContent)
}

Answer 2

下面这段代码将_setInterval的回调函数的this都指向了null。

另外如果只修改下面这段代码，this的会指向undefined。根本原因是回调函数运行环境的this并不指向当前组件。解决方法是在构造函数中用bind绑定方法，或者使用箭头函数

var _cb = function()
        {
            callback.apply(null,args);
        }

//1.bind绑定
constructor() {
  // ...
  this.method = this.method.bind(this)
}

//2.箭头函数
class XXX extend Component {
  constructor() {}

  method = () => {
    // ...
  }

}