This, this, again discuss this in javascript, ultra-comprehensive (Classic), javascriptthis

This, this, again discuss this in javascript, ultra-comprehensive (Classic), javascriptthis

JavaScript is a scripting language, so many people think it is easy to learn. However, JavaScript supports functional programming, closures, prototype-based inheritance, and other advanced functions. This article only collects an example of this keyword in JavaScript to analyze its meaning in different situations, the cause of this situation and the binding this method provided by JavaScript tools such as Dojo. It can be said that a correct grasp of the this keyword in JavaScript is a step into the threshold of the JavaScript language.

As for this in js, I have explained a lot about it and it looks very high. I don't know if you understand it?

First, reference the relatively high-end, helper's home, yes this

Well, the following is a poor explanation.

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

It seems that TM is too imaginary. Just remember the most important one and you can "always point to the object that calls it". So find the object that calls this and you will know who this actually points.

1,

alert(this); 

Look, what is popped up is a child, either "object window" or "object". In short, the object is the object. What is the object?

alert(this === window); 

The result is 'true'. Now the object that calls it is window.

2,

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

Guess what is popped up above, isn't it the same as "alert (this )"?

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

Run the above Code. Is 'true' popped up '?

It's all done?

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

3,

Come back

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

Why is it 'false' this time?

Remember that "this always points to the object that calls it". "1." The direct object that calls this code is a global object, that is, "window "; although "2" and "" are functions, they are still called as "Windows" (do not confuse them. Although a function is an object, it is called as another object ); when "3" and "" are used, "new" has actually changed. This is a constructor. When a constructor is created, a new empty object is created, that is, "new test ()" creates a new object and points it to the Code in the function "test". Therefore, this is not a window object, the new object created by the constructor.

4,

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

With the above arguments, it's clear now!

5,

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

So, you don't think the result is "false". Wrong. Although the value of 'test1' is 'test', isn't 'test1' a 'test' object, it has a new generation object. Now you understand it as a reference. Both of them point to an object and provide the following code to prove it.

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

If "1" is displayed, scold me.

6. The entire 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 not directly called by 'test', but is called by 'test. B '. The following code is provided to prove it.

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

7. The entire complexity

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

You don't think that the pop-up "true" is not based on the above theory that 'inittest' is called by 'test', and then 'I' points to 'test?
Yes, the error lies in who calls the 'innertest'. In fact, this type of function is called by the 'window' object. You can nest the layer one thousand in time, each function is called with a 'window' object. The following code is provided to demonstrate the function.

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

8. A special section

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

I don't think everyone can guess this. The function is used to call a method of an object, replace the current object with another object. "So the 'window' object has been replaced with 'test1', which is naturally 'false'. The following code is provided to prove that

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

The call is similar.

9. Another prototype inheritance is different from the 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 else is left? It may be the 'dom 'object.

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

After reading the above information, you should understand it. The 'this' in it represents the magic horse.

Articles you may be interested in:

• Javascript this keyword Usage Analysis
• Js error Object doesn' t support this property or method Cause Analysis
• Onclick (this) usage in javascript
• Js binding event this points to the problem solution that has changed
• Details about the this keyword in js
• Introduction to the use of this variable in JS
• Summary of self and this usage in javascript
• Functions of Javascript learning notes (ii): Working Mechanism of this
• In-depth understanding of the scope of this in Javascript
• This in javascript
• Example Analysis of JS function this usage
• Introduction to the application of this in events in javascript