Usage of this in Javascript _ basic knowledge

This article is mainly to review your understanding of this and find that your understanding is indeed somewhat biased. record it and hope to help you with this during the interview several days ago, the interviewer said that my understanding was a little biased. I came back to read my book and some blogs and did some tests. I found my understanding was indeed incorrect.

1. Global Variables

It should be the most commonly used. The function calls this, 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 is because this points to the global

2. Constructor

This is a familiar usage. this is used in the constructor. After a new object is created, 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

We can see that the output is 1 rather than window. As a result, the constructor points to a new object instead of a global variable.

3. call and apply

Directly borrow examples from my call and apply blogs

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

Output 456 in the first row is easy to understand. this points to the global state. The following 123 is because after call or apply is used, this in f2 points to f1, while p in f1 is 123, directly stamp the blog

4. Call a function as a method of an object (where an error occurs)

At that time, I was asked to write an object using several methods. I had to define a global variable in my mind and then use this to call the object method. The interviewer asked me what this is? I said it should be a window, because I used less in this way, and thought that only new or call would change the point of this, so he said no, let me go back and check it myself, now I have tried it. I am really wrong. paste 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

Because get is called as the mei method, this points to mei. value, so the output is

As for father, I understand it in this way. The function pointed to by show is defined in the global environment. Because of the scope chain, no value is found in show, so we can find the global value in the definition of his environment. If there is any misunderstanding here, We hope some friends can point it out!