How to use this-this in Javascript! (Copy)

The usage of this summarized by one of my colleagues is quite comprehensive. I would like to share it with you.

Original article: http://blog.163.com/hongshaoguoguo@126/blog/static/18046981201251935720333/

It has been a long time since I started learning Javascript. Today, thanks to the careful explanation of the new sauce, I have finally made this "Misty flower" clear.

First of all, I would like to thank the new sauce for explaining some basic usage of this and share it with you: view the rule of a sentence that this points: Always point to the owner of the FunctionIf there is no owner, point to window. UnderstandingThisKey points: the key is to separate functions from function names. The same functionThe same execution method has different effects.. How to understand it? Let's look at several instances. 1) this in the global function points

FunctionTest(){
Alert(This);// The test function has no owner. Therefore, this points to the window
}

2) This in the object method points

O.Test=Function(){

Alert(This=O);// Output True. O. test indicates that the owner of the test function is the object O, so this should point to O.

}

3) This 1 when binding a function

As follows: Code , This is not the same in test1 and Test2

VaRTest2=O.Test1;// The function Test2 has no owner,Here, although Test2 calls the function test1, this still points to the window, rather than to the owner of test1: Object o
Test2();
O.Test1=Function(){

Alert(This===O);

}

This is what we mentioned above. We need to separate functions from function names.

4) when binding the function this 2, if we modify the code in 3:

Function Test () {
Alert ( This === O );
}
Test (); // This points to window
VaR O = {};
O . Test2 = Test ;
O . Test2 (); // At this time, the owner of Test2 is O, and test has no owner. This points to o
Alert ( O . Test2 );

5) When you click an event to bind a function, this points

Document.Onclick=Function(){

Alert(This===Document);// The output is true. The owner of The onclick event is document. Therefore, this points to document. We can understand document. onclick as an object method, just like O. Test2 in Example 4.

}

6) setTimeout and other passing parameters. This points

Do not look at the owner of the function in the passed parameter, and view all var OBJ ={} of the executed function {};

OBJ . X = 1 ;
OBJ . Y = 2 ;
Window . X = 100 ;
Window . Y = 200 ;
OBJ . Add = Function () {
Alert ( This . X + This . Y );
}
SetTimeout ( OBJ . Add , 1000 ); // This points to window, and the output is 300
SetTimeout ( Function (){ // This points to OBJ, and the output is 3
OBJ . Add ();
}, 1000 );

Change this method: Call, apply Call and apply (the two are used to change the function scope)

VaROo={};
Oo.Test3=Function(){
Alert(This=Oo);// Return false
}
VaROoo={};
Oo.Test3.Call(Ooo);// This points to the first parameter in (), which is ooo

 

Window.X=100;
VaROo={};

Oo . Test3 = Function ( Y , Z , K ){ // The function parameter corresponds to the second and later parameters in apply and call.
Alert ( This . X + Y + Z + K );
}
VaR Arr = [ 2 , 3 , 4 ]
Oo . Test3 . Call ( Window , 2 , 3 , 4 ); // This points to window, and the output is 109
Oo . Test3 . Apply ( Window ,[ 2 , 3 , 4 ]); // Same as above. enclose all parameters with brackets [] when listing elements using apply.
Oo . Test3 . Apply ( Window , Arr ); // Same as above. Use Apply to access an array. Use the array name.
Oo . Test3 . Call ( Window , Arr [ 0 ], Arr [ 1 ], Arr [ 2 ]); // Same as above