this, this, discuss this in javascript again, super comprehensive (classic)_javascript skills

JavaScript is a scripting language and therefore considered by many to be easy to learn. On the contrary, JavaScript supports advanced features such as functional programming, closures, prototype-based inheritance, and more. This article only takes one example: the this keyword in JavaScript, analyzes its meaning in different situations in a simple and easy way, the reasons for this situation, and the method of binding this provided by JavaScript tools such as Dojo. It can be said that only by correctly mastering the this keyword in JavaScript can you enter the threshold of the JavaScript language.

As for this thing in js, many people have explained it. It looks very high-end. I wonder if you understand it?

First quote the more high-end one from Script Home, yes this

Okay, here’s my frustrating explanation

Argument: this is not a variable, not a property, and cannot be assigned a value. It always points to the object that calls it

It feels too vague, just remember the most important thing: "It always points to the object that calls it", so if you find the object that calls this, you will know who this points to

1.

alert(this); 

Look, what pops up? It's either "object window" or "object". In short, it's an object. Which object is it?

alert(this === window); 

The result is 'true', so now the object calling it is window

2.

var test = function(){
  alert(this);
}
test(); 

Guess what pops up above, is it the same as "alert(this)"

var test = function(){
  alert(this === window);
 }
test(); 

Run the above code, does 'true' pop up?

Is this the end of the matter?

If it is so simple, why do so many people discuss this bird?

3.

Come again

var test = function(){
  alert(this === window);
 }
new test(); 

Hey, why is it 'false' this time?

Remember that "this always points to the object that calls it". The direct object that calls this code at "1." is the global object, that is, "window"; although "2." is a function, the call to it is still "window" (don't be confused, although the function is an object, the one that calls it is another object); at "3.", "new" is used. At this time, it has actually changed. This is a Constructor, the constructor creates a new empty object when it is created, that is, "new test()" creates a new object, and then this object points to the code in the function "test", so this is no longer window object, but a new object created by this constructor.

4.

var test ={
  'a':1,
  'b':function(){
   alert(this === test)
  }
 }
test.b(); 

With the above arguments, it is now clear!

5.

var test ={
  'a':1,
  'b':function(){
   alert(this === test)
  }
 }
var test1 = test;
test1.b(); 

so, you don’t think the result is "false", you are wrong, although the value of 'test1' is 'test', isn't 'test1' still the object of 'test', it has a new object, you understand for now They are referenced. Both point to the same object. Here is the code below as proof

var test ={
  'a':1,
  'b':function(){
   alert(this === test)
  }
 }
var test1 = test;
test.a = 2;
alert(test1.a); 

If "1" pops up, come and scold me

6. Then the whole complex

var test ={
  'a':1,
  'b':{
   'b1':function(){
    alert(this === test);
   }
  }
 }
test.b.b1(); 

Is this "true" or "false"?

According to the above theory, at this time "this" is no longer directly called by 'test', but by 'test.b', as evidenced by the following piece of code

var test ={
  'a':1,
  'b':{
   'b1':function(){
    alert(this === test.b);
   }
  }
 }
test.b.b1(); 

7. It’s better to make it more complicated

var test = function(){
  var innerTest = function(){
   alert(this === test);
  }
  innerTest();
 }
test(); 

Don't you think "true" pops up? According to the above theory, 'innerTest' is called by 'test', and then 'this' points to 'test'?
Well, the mistake lies in who called 'innerTest'. In fact, these functions are all called by the 'window' object. Even if you nest a thousand layers, each function is called by the 'window' object. Here is the following. A piece of code as evidence

var test = function(){
  var innerTest = function(){
   alert(this === window);
   var innerTest1 = function(){
    alert(this === window);
   }
   innerTest1();
  }
  innerTest();
 }
test(); 

8. Another special one

var test = function(){
  alert(this === window);
 }
var test1 = {
}
test.apply(test1); 

I think everyone will guess this correctly. The function of this function is to "call a method of an object and replace the current object with another object." So the 'window' object has been replaced by 'test1', naturally it is 'false', here is the following code to prove

var test = function(){
  alert(this === test1);
 }
 var test1 = {
  }
test.apply(test1); 

Then things like 'call' will be similar

9. Another prototype inheritance, which is different from literal inheritance

var test = function(){
 }
 var my = function(){
  this.a = function(){
   alert(this === mytest2);
  }
 }
 var mytest = new my();
 test.prototype = mytest;
 var mytest2 = new test();
 mytest2.a(); 

10. What is left, maybe the 'dom' object

<script>
  var mytest = function(context){
   alert(context.getAttribute('id'));
   alert(this === window);
  }
 </script>
 <div id="test" onclick="mytest(this)">aaaa</div> 

You should understand after reading the above, the 'this' in it respectively represents Shenma