谈谈Javascript的this关键字(this is not this)
前言：
看文章标题你就知道，这篇文章我只讲一个简单的Javascript的this关键字，说它简单——它又不简单，因为曾几何时我也对this关键字有些困惑，它也确实会让不少程序员感到不解——它像是一个身份多变的“指针”，有时仅看代码都很难分辨出其当前所指向的对象；恰好这两天我突然想到应该写篇关于Javascript方面的博客，也算是为以后的公司技术培训做点儿准备。这篇文章，我可能更倾向于，用代码来直接的体现我要描述的内容。好的文章不在于它的篇幅长、内容丰富，而在于或者说更重要的是——应该用言简意赅的内容让读者快速、没有歧义的明白你所要讲解的内容；而对于技术文章，代码往往就是最好的描述。好了，直接切入正题...
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <script src="jquery.js" type="text/javascript"></script> 6 </head> 7 <body> 8 <input id="btnTest" type="button" value="Test" /><br /> 9 <input id="btnTest2" type="button" value="Test2" /><br /> 10 <input id="btnFun" type="button" value="Inner Fun" onclick="this.value=new Date().getSeconds();alert(this);" /><br /> 11 <script type="text/javascript"> 12 //#region 全局this对象，即可以通过this访问到当前页面中的所有(标签或jquery等)对象，此this没有什么实际意义，也很少会这样使用 13 this.$.trim(); 14 alert(this.btnFun); 15 alert(this.window.location); 16 //#endregion 17 18 $("#btnTest").click(function () { 19 alert(this.value); //此this是btnTest标签对象，输出:Test 20 $("#btnTest2").click(function () { 21 alert(this.value); //此this是btnTest2标签对象，输出:Test2 22 }); 23 }); 24 </script> 25 26 <script type="text/javascript"> 27 function UserInfo(name, age) { 28 var _mySecret = "Can't tell you!"; 29 this.Name = name; 30 this.Age = age; 31 32 this.GetMySecret = function () { 33 /// <summary>获取我的秘密</summary> 34 alert(_mySecret); 35 } 36 37 this.IntroduceMySelf = function () { 38 /// <summary>自我介绍</summary> 39 alert("Hello,My Name is:" + this.Name + ", Age is:" + this.Age); 40 } 41 } 42 43 var userObj = new UserInfo("Tom", 23); 44 userObj.GetMySecret(); 45 userObj.IntroduceMySelf(); 46 </script> 47 <br /> 48 </body> 49 </html>
上面的代码，就是我们常见的this关键字的使用，也在其中添加了必要的代码注释，以说明其当前所指代的对象。
this关键字：可以理解为是对象的指针，其具体所指向(对应)的对象要看其(使用)所处的(上下文)环境。其常见的使用场景，所代表的对象大致可以分为以下两类：
1.html标签(元素)对象：即在html标签绑定的事件(onclick,onmouseover...)中，this关键字表示当前标签的Dom对象，通过this即可完全控制、操纵此html标签，如：设置其样式或绑定其它事件等。
2.function(类)对象：首先，你可能会有疑问——为什么叫做function(类)对象？众所周知，javascript不存在类(class)的概念，但它所具有的特性却可以比较好的实现"模拟类"，如上面的代码中的：function UserInfo(name, age)方法。在此对象中this关键字可以很自然的理解为当前的function(类)对象，其作用和用法跟面向对象编程语言(如：C#)里的this关键字很类似，所以，UserInfo这个方法(类)，如果转换为C#代码，想必你会能更直观的理解。代码如下：
1 public class UserInfo 2 { 3 string _mySecret = "Can't tell you!"; 4 5 public string Name { get; set; } 6 public int Age { get; set; } 7 8 public UserInfo(string name, int age) 9 { 10 this.Name = name; 11 this.Age = age; 12 } 13 14 public string GetMySecret() 15 { 16 return _mySecret; 17 } 18 19 public string IntroduceMySelf() 20 { 21 return ("Hello,My Name is:" + this.Name + ", Age is:" + this.Age); 22 } 23 }
本文就到此结束，如果还是有疑问的地方，或文中有“误人子弟”的描述，希望大家能留言提出！