JavaScript中的this实例分析-javascript技巧

时间：2016-04-10

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

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中的不同应用场景，可能还有其他的情况不一而足，以后发现了会补充进来。

上一条：js 事件处理函数间的Event物件是否全等-javascript技巧 下一条:通过jquery的$.getJSON做一个跨域ajax请求试验-jquery

JavaScript中的this实例分析-javascript技巧

相关文章

最新文章