About this in javascript, javascriptthis

About this in javascript, javascriptthis

This is a development artifact in JavaScript. if used properly, it not only achieves twice the result with half the effort, but also makes code more powerful. But since it is an artifact, if you do not have enough skill, you should not use it, otherwise it may be self-destroyed. Once upon a time, I accidentally got this artifact. After that, I had to, self-harm, self-harm, and then self-harm... after so many times of self-harm, we can finally have the power to hold this artifact and walk the world. Next, I will teach you how to use the legendary artifacts.

Cough ..

Into the question.

What is this? This indicates the subject of the current running method.

Note: this in a function has no relationship with the definition or execution of the current function. For this reason, please read the following example carefully.

Artifact cheats:

Secret 1: this in the self-made row function will always be windows

var inner = "window";var obj = {inner : "obj",          fn : (function () {console.log(this.inner)})()}

When running the program, the browser automatically runs the methods in obj. fn, because obj. fn is a self-made row function. When executing this function, the program outputs a window.

Why is the output not obj?

Because this is a window in the self-made row function, in fact this. inner is window. inner. Therefore, this inner is defined in the global variable and its value is "window ".

 

Secret 2: the event-driven method of element binding is run. this In the method indicates the currently bound element.

Var oDiv = document. getElementsByTagName ("div") [0]; oDiv. onclick = function () {console. log (this); // when you click this element with the mouse, the oDiv element set is output };

This is easy to understand. Binding an element to a behavior execution method is equivalent to binding this method to this element, so this points to the element itself.

 

Example 3: Method execution. check whether there is "." in front of the method name, "." in front of the method name, "who is in front of the method". If not, "this is the window ".

var obj={fn:fn};function fn(){console.log(this)}fn.prototype.aa=function(){console.log(this)};var f=new fn;fn();  //window..obj.fn(); //Object..fn.prototype.aa(); //fn.prototypef.aa(); //f

Remember this secret !!!

 

Secret 4: In the constructor mode, this in the function body is an instance of the current class.

Function Fn () {this. x = 100; console. log (this); // instance f} var f = new Fn;

The instance generated by the constructor. Therefore, this in the constructor certainly points to the current instance.

 

Example 5: call/apply to change the point of this

var oDiv = document.getElementsByTagName("div")[0];function fn() {    console.log(this);}fn.call(oDiv);

Fn. call (oDiv); // after this statement is executed, this In fn points to the oDiv element. applay is similar to call.

The above four cheats are invalid.

 

The secret account has been shared. If you are not careful about it, you are welcome to correct it ~