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

mainVM

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?

There are some questions about babel conversion for beginners of es6.
originally run directly in the browser (Chrome 65) will report ReferenceError errors, but after babel conversion, and then run, it will be undefined, these two errors are completely different, does it mean that the conversion of babel is not complete? ...

Es6 javascript babel

Feb.26,2021
The question about js this
function foo(){ setTimeout(()=>{ console.log("is:",this.id); 42 },100) } var id = 21; foo.call({id:42}) The this of the function in js is dynamic, depending on who calls it at run time, in which the this inside foo points to an a...

Es6 javascript

Feb.27,2021
How to pass parameters without anonymous functions in ES6 and not execute them immediately?
test(...arg) { console.log("",arg); } render(){ return <View style={{flex:1,backgroundColor:"blue"}}> <TouchableOpacity activeOpacity={1} onPress={this. test("")}&...

React-native es6 javascript

Feb.27,2021
Parameter variables are declared by default, so you can't declare them again with let or const, but why can you declare them with var?
under normal circumstances, variables declared by let or const cannot be declared repeatedly, and an error will be reported even when using var. eg: let a = 123; var a = 456; error prompt: Uncaught SyntaxError: Identifier a has already been declar...

Es6 javascript

Feb.27,2021
How do you use find in es6?
I want to return a data corresponding to id based on the data.id passed in ...

Es6 javascript

Feb.28,2021
Es6 extension operator query
< H1 > Ruan Yifeng: the extension operator (spread) is three dots (.). It is like the inverse operation of rest parameters, converting an array into a sequence of parameters separated by commas. < H1 > what does the inverse operation of rest parameter...

Es6 javascript

Feb.28,2021
What is the understanding of es6's extension operator?
in es6. The extension operator expands the array [1Magol 2pr 3] unfolds as 1Magol 2Jol 3, so what is this 1Magol 2Jol 3? An array is not an array, a string is not a string later, there was also the operation of the object. The operator is called de...

Es6 javascript

Feb.28,2021
Vue traverses the substitution array
first of all, there is such a piece of data list[ zhangsan , lisi , wangmazi ] people[ { name: zhangsan , username: },{ name: lisi , username: },{ name: wangmazi , username: } ] then the qu...

Html vue.js front-end es6 javascript

Mar.01,2021
Axios cancels multiple repeat requests through cancelToken. Why does the last request take so long?
I have a vue project where ajax requests are sent using axios. one of the list pages, clicking on the list will send the details of the corresponding list of the request query. now in order to prevent frequent requests from being sent due to multiple ...

Axios es6 javascript

Mar.02,2021
How to gracefully determine that an element exists in an array and then remove the element and add it if it doesn't exist?
there is a requirement to remove an element from the array when it exists, and to add the element to the array when it does not exist. this is how I implement it. Is there a more elegant or convenient way to write it? Please do not hesitate to give us ...

Es6 javascript front-end

Mar.02,2021
ES6 class inheritance problem
export default class Base extends Component<Props> { constructor(props) { super(props); console.log("Base this",this) this showToast renderModal } * *Toast * * showToast=(msg)=>{ cons...

Function class class es6 javascript

Mar.02,2021
How to abbreviate interdependent asynchronous requests?
The logic goes like this: phone number = "get city name = " get city code = "get city weather the next request will use the result of the last request I have tried the following two ways of writing, and I feel very verbose. Is there any good wa...

Es6 javascript

Mar.03,2021
How does echarts fix the x-axis above
I want to fix the x-axis of an ordinary line chart (considering only the existence of one X-axis) at the top, because the x-axis defaults to the below. top I adjusted {position: top } and that s it. AxisLine and axisTick are at the bottom, on...

Es6 javascript echarts4 echarts3

Mar.03,2021
After vuex uses namespaced: true, how to put actions back into the global
when namespaced is not used, actions is registered globally by default, but after use, actions will become under the module, but I don t want to do this. I also want it to be global. My namespace:true is just for the convenience that I introduce state, ...

Html5 es6 javascript vuex vue.js

Mar.03,2021
There are too many methods in the vue page methods, can you extract a method file?
there are more than 10 methods for methods in one of my .vue files, and this page looks messy. is it because my componentization is not thorough enough; is there any way to make the file more concise ...

Html5 es6 javascript vuex vue.js

Mar.03,2021
Why the data of the component cannot use the value in state in vuex, and what should I do if I want to use it?
I want a variable in the drop-down box v-model data, and the default value of this variable is the constant defined in state, but what if it doesn t change with the value in state? reference: https: codeshelper.com q 10. The value of computed canno...

Html5 es6 javascript vuex vue.js

Mar.04,2021
In es6, if a module is super long, how do you define it?
I haven t thought of a good way. What I lack now is that webstorm cannot automatically quote . is there any way for my colleagues to solve the problem? Or is it that the usage has always been to write an ultra-long file, or that a module that divi...

Es6 javascript

Mar.04,2021
How do I extract the common elements from an array and put them into two arrays?
var arr = [ "2018-04-17T03 ", "2018-04-18T15 ", "2018-04-17T04 ", "2018-04-18T16 ", "2018-04-17T05 ", "2018-04-18T17 ", "2018-04-17T06 ", "2018-04-17T07 ", "2018-04-17T08 ", "2018-04-17T09 ", "2018-04-17T20 ", "2018-04-18T10 ", "2018-04-17T2...

Es6 javascript-array javascript

Mar.04,2021
A very simple variable leakage problem in js
var a = []; for (var i = 0; i < 10; iPP) { a[i] = function () { console.log(i); }; } a[6](); 10 variable leakage causes the above a [6] to become 10; I don t quite understand why a [6] is 10 here. My wrong thinking is as follows a [6]...

Html css es5 es6 javascript

Mar.04,2021
Excuse me, how is this written in JS?
const key = name ; let obj; const res = (obj = {}, obj[key] = John , obj); console.log(res); {name: "John"} I saw it in one place, and I don t understand it. I d like to ask how to write it . ...

Es6 javascript

Mar.06,2021