真正去解释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> |