在JavaScript中,this这个变量非常让人难以琢磨不透,这个this非常强大的,如果使用好了,我们在编写面向对象的JavaScript程序中能够游刃有余; 网上的说法各有不同,有些有点偏繁琐,简单的说,this就是指当前对象。我的理解就是:首先看这个this在哪个函数,然后看这个函数是哪个对象调用,这个对象就是this所引用的对象。
栗子1:
<script type="text/javascript">
var name='123';
function prit(){
console.log(this.name);
}
prit();//输出123 此时this所引用的对象就是window,全局变量都是window对象的属性,相当于 window.prit()
var obj={
x:'1235',
y:function(){
console.log(this.x);
}
}
obj.y();//输出1235,在执行obj.y()时,函数是作为obj对象的方法调用的,因此,this所引用的对象就是obj
</script>
这段代码非常容易理解的,大家一看就明白了吧。
apply()、call() 的用法
通过apply()、call() 可以重新定义函数的执行环境,也就是可以指定this的指向
栗子call():
<script type="text/javascript">
window.οnlοad=function(){
var main=document.getElementById('main');
setStyle.call(main,'fontSize','300px');
//这个会出现错误“Cannot set property 'fontSize' of undefined”
setStyle('fontSize','300px');
}
function setStyle(type,value){
this.style[type]=value;
}
</script>
出现错误的原因:setStyle('fontSize','300px');这样调用函数,函数是全局方法,函数是作为window对象的方法调用的,因此函数里面的this所引用的对象是window,而window没有style属性。setStyle.call(main,'fontSize','300px');这个能够正确的使用,call指定了该函数将被那个对象调用,也就指定了this所引用的对象;注意setStyle.call()中有三个参数,第一个参数就是指定this所引用的对象,后面两个参数就是setStyle函数里面的type和value形参。
栗子apply():
<script type="text/javascript">
window.οnlοad=function(){
var main=document.getElementById('main');
setStyle.apply(main,['fontSize','300px']);
//这个会出现错误“Cannot set property 'fontSize' of undefined”
//setStyle('fontSize','300px');
}
function setStyle(type,value){
this.style[type]=value;
}
</script>
apply()的用法与call大同小异,唯一的区别是,apply只有两个参数,第一个参数跟call()一样,第二个参数必须是一个数组,数组中的元素对应函数的形参;当apply()没有参数时,表示为全局变量。
this的其他用法,非常诡异,可以学习学习。。。。。。
栗子:
<script type="text/javascript">
var x=50;
var obj={
x:100,
y:function(){
setTimeout(function(){
console.log(this.x);//这里this指向的是window对象,不是我们预期的obj,如果要达到预期的效果,那就要this指向obj
},1000);
}
};
obj.y();//输出50,如果没有定义var x=50,输出undefined
</script>
如下,可以达到预期的效果
<script type="text/javascript">
var x=50;
var obj={
x:100,
y:function(){
var temp=this;
setTimeout(function(){
console.log(temp.x);//这里temp指向的是obj对象
},1000);
}
};
obj.y();//输出100
</script>
事件监听函数中使用this
<script type="text/javascript">
var main=document.getElementById('main');
main.οnclick=function(){
alert(this.innerHTML);//this指向的是调用函数那个对象,main对象
}
</script>
构造函数中的this
<script type="text/javascript">
function prit(){
this.x=345;
}
var o = new print();
alert(o.x);//345
</script>
作为构造函数,就是生成一个新对象,这个this就是指这个对象。
上面这些例子基本上都是常用的,只要多使用this,就会灵活的使用了