Detailed explanation of the usage of this in Javascript

I used this during the interview a few days ago. The interviewer said that my understanding was a bit biased. I went back to read the book and some blogs, and did some tests. I found that my understanding was indeed wrong.

1. Global variables

It should be the most commonly used one. Call this in the function, and this is actually a global variable

 var value="0"; function mei(){ var value="1"; console.log(this.value); //0 console.log(value); //1 } mei();

The output is 0 because this points to the global

2. Constructor

This is the usage I am more familiar with. Use this in the constructor. After new a new object, this points to this new object.

 var value="window"; function mei(){ this.value=1; this.show=function(){ console.log(this.value) } } var m=new mei(); console.log(m.value); //1 m.show(); //1

You can see that the output is 1 instead of window. It can be seen that due to the constructor, this here has pointed to a new object instead of a global variable.

3.call and apply

Borrow the examples from my call and apply blog directly

 var p="456"; function f1(){ this.p="123"; } function f2() { console.log(this.p); } f2(); //456 f2.call(f1()); //123 f2.apply(f1()); //123

The output of the first line is easy to understand. This points to the global. The 123 is because after using call or apply, this in f2 points to f1, and p in f1 is 123. Please click on the blog post for details.

4. The function is called as a method of an object (where I made an error)

At that time, I asked me to write an object with several methods. I defined a global variable in my mind, and then called this in the object's method. The interviewer asked me what this is? I said it should be window, because I used this method very little, and thought that only new or call would change the direction of this, so he said it was wrong and asked me to go back and see it myself. Now I have tried it, I am really wrong. Post the code

 var value="father"; function mei(){} mei.value="child"; mei.get=function(){console.log(this.value)}; mei.show=function(){console.log(value)}; mei.get(); //child mei.show(); //father

Since get is called as a method of mei, this here points to mei.value so output child

As for father, I understand this way. The function pointed to by show is defined in the global environment. Due to the scope chain, no value is found in the show, so I define his environment and find it. This finds the global value. If there is an error in understanding here, I hope a friend can point it out!