zoukankan      html  css  js  c++  java
  • 谈谈Javascript的this关键字(this is not this)

    谈谈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     }
    复制代码

       本文就到此结束,如果还是有疑问的地方,或文中有“误人子弟”的描述,希望大家能留言提出!

     
     
    分类: Js,Jquery等
  • 相关阅读:
    9.17 HTML CSS
    9.16
    9.15
    9.14
    9.13
    9.12
    9.11
    9.10
    9.9
    9.8
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/3287568.html
Copyright © 2011-2022 走看看