this this again this in javascript super comprehensive of classic

  • 2020-11-18 06:07:31
  • OfStack

JavaScript is a scripting language, so it is considered by many to be easy to learn. Instead, JavaScript supports advanced features such as functional programming, closures, and prototype-based inheritance. This paper only picks one example: the this keyword in JavaScript, and analyzes its meaning in different situations in simple terms, the reasons for the formation of this situation, and the method of binding this provided in Dojo and other JavaScript tools. It can be said that the correct mastery of the this keyword in JavaScript is considered to enter the threshold of JavaScript language.

As for js, this has been explained a lot. It looks so high-end. Do you understand it?

I'm going to start with a reference to yes this, which is at the high end of the site

Well, here's my humble explanation

Argument: this is not a variable, not a property, cannot be assigned a value, it always points to the object calling it

It feels like TM is too small, just remember the most important one: "It always points to the object calling it", so find the object calling this and you'll know who this is pointing to

1.


alert(this); 

If you look at it, it's either "object window" or "object" or whatever object it is. What 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, is it the same as "alert"


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

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

Is that all?

If it's that simple, why do so many people talk about this bird?

3,

Come again


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

Hey, how about 'false' this time?

Remember that "this" always points to the object calling it ", "1", "the immediate object calling this piece of code is the global object, that is "window"; "2" is a function, but it is still called by "window" (not to be confused, the function is an object, but it is called by another object); First 3, "" place, use the" new "is already changed at this moment, this is a constructor, created when the constructor to create a new empty object, namely" new test () "to create a new object, and then by the object pointed to function" test "in the code, so this time this not is window object, but the constructor to create a new object.

4,


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

With the above argument, this next quick clear!

5,


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

so, you don't think it's "false", no, even though 'test1' has the value 'test', but 'test1' is still 'test' object, it has new objects, which you read as references, both of which point to one object, as shown by the following piece of code


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

If a "1" pops up, you call me names

6. 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, "this" is no longer called directly by 'test', but by 'test.b', as shown in the following code


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

7. Ok, a little more complicated


alert(this === window); 
0

Don't you think that "true" pops up, that 'innerTest' is called by 'test', and that 'this' points to 'test'?
Well, the mistake is who is calling 'innerTest', which is actually called by 'window' objects, even if you have a thousand layers of nested objects that call each function by 'window' objects, as this code shows


alert(this === window); 
1

8. One more special paragraph


alert(this === window); 
2

The 'window' object has been replaced by 'test1', which is 'false', as shown below


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

So something like 'call' is similar

9. Inherit one more prototype, which is different from the literal inheritance


alert(this === window); 
4

10. What is left, possibly an 'dom' object


alert(this === window); 
5

What does 'this' stand for


Related articles: