JavaScript中this的常见用法

在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.onload=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.onload=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.onclick=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,就会灵活的使用了