es6 解构赋值 使用方法的时候，会导致丢失this

Question

今天在使用es6 解构赋值 引入方法的时候，发现在方法里获取不到this，具体详情我贴图吧

先贴代码：

    /*mainVM文件里的方法*/
    @observable planDetailList = [];
    @action
    ajaxPlanDetailList(id,callback){
        Helper.ajax(Api.planList+'/'+id,{
            method:'GET'
        }).then(res => {
            console.log(this);
        })
    }

    /*在componentDidMount时调用mainVM里的方法*/
    componentDidMount() {
        const { ajaxPlanDetailList } = this.props.mainVM;
        ajaxPlanDetailList(this.props.id);
    }

会显示以下错误

换一种方式，直接调用mainVM里的方法，

    componentDidMount() {
        this.props.mainVM.ajaxPlanDetailList(this.props.id);
    }

拿到了this

不是很懂其中的缘由，请大神详解，跪谢

Answer 1

两种思路
1 把ajaxPlanDetailList写成箭头函数
2 ajaxPlanDetailList绑定一下this 类似 ajaxPlanDetailList.bind(this)

Answer 2

函数是不能使用结构的吧

 const { ajaxPlanDetailList } = this.props.mainVM;
 //ajaxPlanDetailList(this.props.id);
        打印 ajaxPlanDetailList是什么？

已关注问题后续

Answer 3

你不解构赋值也会丢失，this上下文是谁调用它就是谁的，比如obj.ajaxPlanDetailList()，那this就是obj，你直接ajaxPlanDetailList()的话this就是全局对象window。

function fun() {
  console.log(this.a);
}

let obj1 = {
  a: 1,
  fun: fun
};

let obj2 = {
  a: 2,
  fun: fun
};

let a = 3;

obj1.fun();  // 1
obj2.fun();  // 2
fun();  // 3