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

真正去解释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和元素本身：

view source

print ?

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>