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

今天在使用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);
    }

会显示以下错误

clipboard.png

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

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

clipboard.png

拿到了this

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

回复
阅读 3.3k
3 个回答

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

函数是不能使用结构的吧

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

已关注问题后续

你不解构赋值也会丢失,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
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏