When es6 deconstructs the method of assignment, it will result in the loss of this.

Today, when I was using es6 to deconstruct the assignment introduction method, I found that I could not get the details of this, in the method.

paste code first: 

    /*mainVM*/
    @observable planDetailList = [];
    @action
    ajaxPlanDetailList(id,callback){
        Helper.ajax(Api.planList+"/"+id,{
            method:"GET"
        }).then(res => {
            console.log(this);
        })
    }
    /*componentDidMountmainVM*/
    componentDidMount() {
        const { ajaxPlanDetailList } = this.props.mainVM;
        ajaxPlanDetailList(this.props.id);
    }

displays the following error

clipboard.png

mainVM

clipboard.png

got the this

I don"t quite understand the reason. Please explain it in detail and kneel down and thank you

.
Es6 javascript
Mar.03,2021

two ideas
1 write ajaxPlanDetailList as an arrow function
2 ajaxPlanDetailList bind this similar to ajaxPlanDetailList.bind (this)

functions cannot use structures, right? 

 const { ajaxPlanDetailList } = this.props.mainVM;
 //ajaxPlanDetailList(this.props.id);
         ajaxPlanDetailList

follow-up issues have been followed

if you don't deconstruct the assignment, you will lose the this context, for example, obj.ajaxPlanDetailList () , then this is obj , and if you directly ajaxPlanDetailList () , this is the global object 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

Previous: WeChat Mini Programs uses the wx.showModal pop-up box, and the mask will disappear when you click on the Android phone.

Next: How to call the camera in create-react-native-app?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b31f4e-2bdcc.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b31f4e-2bdcc.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?