Detailed explanation of the usage of this in Javascript_Basic knowledge

I used this during an interview a few days ago. The interviewer said that my understanding was a bit wrong. I came back and read some books and some blogs, did some tests, and found that my understanding was indeed wrong

1. Global variables

should be the most commonly used one. This is called in a function, which is actually a global variable

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

Output 0 because this points to the global

2.Constructor

This is a usage I am more familiar with. Use this in the constructor. After new a new object, this will point to the 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 already points to a new object instead of a global variable

3.call and apply

Directly borrow the examples from my call and apply blog

 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 first line outputs 456 which is easy to understand. This points to the global situation. The following 123 is because after using call or apply, this in f2 points to f1, and p in f1 is 123. For a specific explanation, just click on that article Blog

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

I was asked to write an object with several methods. I suddenly defined a global variable, and then used this to call it in the object's method. The interviewer asked me what this is? I said it should be window, because I rarely use this method, and thought that only new or call would change the direction of this. He said that was wrong and asked me to go back and see for myself. Now that I have tried it, I was really wrong. Post 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 child is output

As for father, I understand it this way. The function pointed to by show is defined in the global environment. Due to the scope chain, the value is not found in show, so I look for it in the environment where it is defined, and then I find the global environment. value, if there is any misunderstanding here, I hope someone can point it out!