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.ο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,就会灵活的使用了