如何实现this指向不丢失问题

Question

问题描述

react 结合eventProxy, this.setState中的this指向为什么是正常的

问题出现的环境背景及自己尝试过哪些方法

个人觉得代码类似于下述:

var obj = {
    name: 'dog',
    sayName() {
        console.log(this.name)
    }
}

var data = {
    name: 'cat',
    fn: obj.sayName
}

data.fn() // => cat

相关代码

// index.jsx
import eventProxy from "./eventProxy";
import React from "react";
const Component = React.Component;

class Parent extends Component {
  render() {
    return (
      <div>
        <Child_1 />
        <Child_2 />
      </div>
    );
  }
}
class Child_1 extends Component {
  componentDidMount() {
    setTimeout(() => {
      eventProxy.trigger("msg", "end");
    }, 1000);
  }
  render() {
    return <p>111</p>;
  }
}
class Child_2 extends Component {
  state = {
    msg: "start"
  };

  componentDidMount() {
    eventProxy.on("msg", msg => {
      // 如何保证了这里的this指向不丢失
      this.setState({
        msg
      });
    });
  }

  render() {
    return (
      <div>
        <p> child_2 component: {this.state.msg} </p>
        <Child_2_1 />
      </div>
    );
  }
}
class Child_2_1 extends Component {
  componentDidUpdate() {
    console.log("Child_2_1 update");
  }

  render() {
    return (
      <div>
        <p>child_2_1 component</p>
      </div>
    );
  }
}
export default Parent;

// eventProxy.js
const eventProxy = {
  onObj: {},
  oneObj: {},
  on: function (key, fn) {
    if (this.onObj[key] === undefined) {
      this.onObj[key] = [];
    }

    this.onObj[key].push(fn);
  },
  one: function (key, fn) {
    if (this.oneObj[key] === undefined) {
      this.oneObj[key] = [];
    }

    this.oneObj[key].push(fn);
  },
  off: function (key) {
    this.onObj[key] = [];
    this.oneObj[key] = [];
  },
  trigger: function () {
    let key, args;
    if (!arguments.length) return false
    key = arguments[0];
    args = [].concat(Array.prototype.slice.call(arguments, 1));

    if (this.onObj[key] !== undefined &&
      this.onObj[key].length > 0) {
      for (let i in this.onObj[key]) {
        this.onObj[key][i](args);
      }
    }
    if (this.oneObj[key] !== undefined &&
      this.oneObj[key].length > 0) {
      for (let i in this.oneObj[key]) {
        this.oneObj[key][i](args);
        this.oneObj[key][i] = undefined;
      }
      this.oneObj[key] = [];
    }
  }
};
export default eventProxy

你期待的结果是什么？实际看到的错误信息又是什么？

个人觉得this.setState中的this 应指向的是eventProxy.onObj.msg(type: array), 这里又没有setState方法，故应该会抛出“this.setState is not a function”的错误，
但是结果却是正常执行

希望哪位大佬指出我考虑不足之处或考虑错误之处，谢谢！！！

补充v1.0.0

执行阶段，eventProxy.obObj.msg 是一个数组，其实就是这样的一个对象

{
    0：msg => { this.setState({msg})}
    // 省略其他属性
}

这种情况执行，即arr[0](), this 能指向原上下文？

Answer 1

因为箭头函数 没有单独的this。
MDN原文：“箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this”。有点所见即所得的意思，定义函数的时候函数体外的 this 指向谁，函数体内的 this 也指向这个谁。