鍍金池/ 問答/HTML/ es6 解構(gòu)賦值 使用方法的時候，會導(dǎo)致丟失this

es6 解構(gòu)賦值 使用方法的時候，會導(dǎo)致丟失this

今天在使用es6 解構(gòu)賦值 引入方法的時候，發(fā)現(xiàn)在方法里獲取不到this，具體詳情我貼圖吧

先貼代碼：

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

會顯示以下錯誤

clipboard.png

換一種方式，直接調(diào)用mainVM里的方法，

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

clipboard.png

拿到了this

不是很懂其中的緣由，請大神詳解，跪謝

回答
編輯回答
下墜

兩種思路
1 把a(bǔ)jaxPlanDetailList寫成箭頭函數(shù)
2 ajaxPlanDetailList綁定一下this 類似 ajaxPlanDetailList.bind(this)

2017年6月12日 19:03
編輯回答
乞許

你不解構(gòu)賦值也會丟失，this上下文是誰調(diào)用它就是誰的，比如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
2018年5月4日 23:59
編輯回答
只愛你

函數(shù)是不能使用結(jié)構(gòu)的吧

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

已關(guān)注問題后續(xù)

2017年8月13日 11:32