首页 / 脚本样式 / JavaScript / JavaScript中的this实例分析

以人为镜，可知得失，看来这句话是很有道理的。

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

复制代码 代码如下:
<script type="text/javascript">
//在function中使用this
function a（） {
if （this == window） {
alert（"this == window"）;
this.fieldA = "I"m a field";
this.methodA = function（） {
alert（"I"m a function "）;
}
}
}
a（）; //如果不调用a方法，则里面定义的属性会取不到
alert（window.fieldA）;
methodA（）;
</script>

Demo 2 ：
如果使用new的方式去实例化一个对象，则this不等于window对象，this指向function a的实例
复制代码 代码如下:
<script type="text/javascript">
//在function中使用this之二
function a（） {
if （this == window） {
alert（"this == window"）;
}
else {
alert（"this ！= window"）;
}
this.fieldA = "I"m a field";
}
var b = new a（）;
alert（b.fieldA）;
</script>

Demo 3 ：
使用prototype扩展方法可以使用this获取到源对象的实例，私有字段无法通过原型链获取
复制代码 代码如下:
<script type="text/javascript">
//在function中使用this之三
function a（） {
this.fieldA = "I"m a field";
var privateFieldA = "I"m a var";
}
a.prototype.ExtendMethod = function（str） {
alert（str + " : " + this.fieldA）;
alert（privateFieldA）; //出错
};
var b = new a（）;
b.ExtendMethod（"From prototype"）;
</script>

Demo 4 ：
不管是直接引用function，还是实例化一个function，其返回的闭包函数里的this都是指向window
复制代码 代码如下:
<script type="text/javascript">
//在function中使用this之四
function a（） {
alert（this == window）;
var that = this;
var func = function（） {
alert（this == window）;
alert（that）;
};
return func;
}
var b = a（）;
b（）;
var c = new a（）;
c（）;
</script>

Demo 5 ：
在HTML中使用this，一般代表该元素本身
复制代码 代码如下:
<div onclick="test（this）" id="div">Click Me</div>
<script type="text/javascript">
function test（obj） {
alert（obj）;
}
</script>

Demo 6 :
在IE和火狐（Chrome）下注册事件，this分别指向window和元素本身
复制代码 代码如下:
<div id="div">Click Me</div>
<script type="text/javascript">
var div = document.getElementById（"div"）;
if （div.attachEvent） {
div.attachEvent（"onclick", function（） {
alert（this == window）;
var e = event;
alert（e.srcElement == this）;
}）;
}
if （div.addEventListener） {
div.addEventListener（"click", function（e） {
alert（this == window）;
e = e;
alert（e.target == this）;
}, false）;
}
</script>

以上就是我总结的this在javascript中的不同应用场景，可能还有其他的情况不一而足，以后发现了会补充进来。