Object Oriented this point

I have not understood the object-oriented this problem before, today I watched the video tutorial, add yourself to learn 2 examples, finally understand the point.

When we write the object program, we want to keep this always pointing to the object , but the facts often backfire.

The normal situation of this point is no problem, such as the following

1 //constructor Function2 functionCreateperson (name,age) {3      This. name=name;4      This. age=Age ;5      This. ShowName (); 6 }7 //Prototyping Methods8Createperson.prototype.showname=function(){9Console.log (' My name is: ' + This. name+ ' My age is: ' + This. Age); Ten } One //call result for my name is: Programmer my age is: A NewCreateperson (' Programmer ', ' 27 '); -  - //you can see this here always points to the Createperson object

But the writing code of the work is not so simple. Alert a value, often join the event, and so on, what is the point of this? Do you still point to the object? Look underneath.

1 functionTabswitch (ID) {2          This. odiv=document.getElementById (ID);3          This. btn= This. Odiv.getelementsbytagname (' input ');4          This. div= This. Odiv.getelementsbytagname (' div ');5     }6tabswitch.prototype.tab=function(){ 7          for(vari=0;i< This. btn.length;i++){            8              This. btn[i].index=i;9              This. btn[i].onclick=function(){TenAlert This);//Object Htmlinputelement One             } A  -         } -}

See this, become a node of the HTML, and then continue to write the code below, it must be wrong. At this point I need to change the direction of this and let this point back to the object. Go on

1 functionTabswitch (ID) {2          This. odiv=document.getElementById (ID);3          This. btn= This. Odiv.getelementsbytagname (' input ');4          This. div= This. Odiv.getelementsbytagname (' div ');5     }6tabswitch.prototype.tab=function(){ 7         //save this object to an assignment of _this8         var_this= This;9          for(vari=0;i< This. btn.length;i++){            Ten              This. btn[i].index=i; One              This. btn[i].onclick=function(){ Aalert (_this);//Object -             } -  the         } -}

Using the _this variable cache to point to the object's this can be used in the right place to point. (A little bit around the dizzy)

The last previous try some of the more complicated examples: left and right click on the button sliding switch ul

1 functionSlidemove (moveul,arrowleft,arrowright,marginright) {2      This. moveul=$ (' # ' +Moveul);3      This. lilength=$ (' # ' +moveul). Find (' Li '). length;4      This. liwidth=$ (' # ' +moveul+ ' >li '). EQ (0). Innerwidth () +marginright;5      This. arrowleft=$ (' # ' +arrowleft);6      This. arrowright=$ (' # ' +arrowright);7      This. path=0;8      This. Moveul.css (' width ', This. liwidth* This. lilength);9      This. Init ();//InitializeTen } Oneslidemove.prototype.init=function(){ A     var_this= This;//Object -      This. Arrowleft.on (' click ',function(){  - _this.clickleft (); the     }); -      This. Arrowright.on (' click ',function(){  - _this.clickright (); -     }); + } -slidemove.prototype.clickleft=function(){  +      AConsole.log ( This. Path) at     //to the left, return it. -     if( This. path<=0){  -          This. path=0; -         return false; -     } -      This. path--; in      This. Moveul.stop (). Animate ({' Left ':- This. path* This. Liwidth}); - } toslidemove.prototype.clickright=function(){  +      -Console.log ( This. Path) the     //go to the right and return. *     if( This. path>= This. liLength-4){  $          This. path= This. liLength-3;Panax Notoginseng         return false; -     } the      This. path++; +      This. Moveul.stop (). Animate ({' Left ':- This. path* This. Liwidth}); A } the //called + varslide1=NewSlidemove (' moban_ul1 ', ' arrow_left1 ', ' arrow_right1 ', 22);

Object Oriented this point