关闭

帮助理解this用法的几个例子

标签: this
487人阅读 评论(0) 收藏 举报
分类:

真正去解释this这个东西的时候,才发现不是这么简单,花了一些时间,写了几个小demo,让我们来一探究竟。恩,以人为镜,可知得失,看来这句话是很有道理的。

如果是一个全局的function,则this相当于window对象,在function里定义的各种属性或者方法可以在function外部访问到,前提是这个function需要被调用。

01 <script type="text/javascript">
02         //在function中使用this
03         function a() {
04             if (this == window) {
05                 alert("this == window");
06                 this.fieldA = "I'm a field";
07                 this.methodA = function() {
08                     alert("I'm a function ");
09                 }
10             }
11         }
12
13         a();    //如果不调用a方法,则里面定义的属性会取不到
14         alert(window.fieldA);
15         methodA();    
16 </script>

如果使用new的方式去实例化一个对象,则this不等于window对象,this指向function a的实例:

01 <script type="text/javascript">
02         //在function中使用this之二
03         function a() {
04             if (this == window) {
05                 alert("this == window");
06             }
07             else {
08                 alert("this != window");
09             }
10             this.fieldA = "I'm a field";
11         }
12         var b = new a();
13         alert(b.fieldA);
14         
15 </script>

使用prototype扩展方法可以使用this获取到源对象的实例,私有字段无法通过原型链获取:

01 <script type="text/javascript">
02         //在function中使用this之三
03         function a() {
04             this.fieldA = "I'm a field";
05             var privateFieldA = "I'm a var";
06         }
07          
08         a.prototype.ExtendMethod = function(str) {
09             alert(str + " : " this.fieldA);
10             alert(privateFieldA);   //出错
11         };
12         var b = new a();
13         b.ExtendMethod("From prototype"); 
14 </script>

不管是直接引用function,还是实例化一个function,其返回的闭包函数里的this都是指向window。

01 <script type="text/javascript">
02         //在function中使用this之四
03         function a() {
04             alert(this == window);
05             var that = this;
06             var func = function() {
07                 alert(this == window);
08                 alert(that);
09             };
10             return func;
11         }
12          
13         var b = a();
14         b();
15         var c = new a();
16         c();
17 </script>

在HTML中使用this,一般代表该元素本身:

1 <div onclick="test(this)" id="div">Click Me</div>
2     <script type="text/javascript">
3         function test(obj) {
4             alert(obj);
5         }
6     </script>

在IE和火狐(Chrome)下注册事件,this分别指向window和元素本身:

01 <div id="div">Click Me</div>
02     <script type="text/javascript">     
03         var div = document.getElementById("div");
04         if (div.attachEvent) {
05             div.attachEvent("onclick"function() {
06                 alert(this == window);
07                 var e = event;
08                 alert(e.srcElement == this);
09             });
10         }
11         if (div.addEventListener) {
12             div.addEventListener("click"function(e) {
13             alert(this == window);
14             e = e;
15             alert(e.target == this);
16             }, false);
17         }
18     </script>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:37295次
    • 积分:494
    • 等级:
    • 排名:千里之外
    • 原创:0篇
    • 转载:55篇
    • 译文:0篇
    • 评论:0条
    文章分类