码迷,mamicode.com
首页 > 编程语言 > 详细

轻松学习JavaScript二十九:JavaScript中的this详解

时间:2015-12-29 21:17:08      阅读:259      评论:0      收藏:0      [点我收藏+]

标签:

        这几天在看很多的JS的代码,多次出现this关键字,有时候表示不理解,就仔细看了这一方面的知识。

        在JavaScript语言中,this的定义是:this是包含它的函数作为方法被调用时所属的对象。说明:这句话有点咬

嘴,但一个多余的字也没有,定义非常准确,我们可以分3部分来理解它:1包含它的函数。2作为方法被调用时。3所

属的对象。随着函数使用场合的不同,this的值会发生变化。但是有一个总的原则,那就是this指的是,调用函数的那

个对象。

       this是Javascript语言的一个关键字,它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用,比如:

function to_green(){
      this.style.color="green";//this在这里指window对象
}
to_green();//函数调用   

      我们来分析上面的函数:

      包含this的函数是to_green(),该函数作为方法被调用了。函数所属的对象是谁,默认情况下是window对象。因此

this就是指的window对象了,to_green()方法中执行语句也就变为:window.style.color="green";这让window对象很上

火,因为它并没有style这么个属性,所以该语句也就没什么作用。

       我们可以再看一个切合实际的例子:

window.load=function(){
      var example=document.getElementById("example");
      example.onclick=to_green;//赋值给某对象的事件处理函数
      function to_green(){
      this.style.color="green";//这里的this代表example这个对象
      }      
}

      我们再次分析:

      我们知道通过赋值操作,example对象的onclick事件得到to_green()方法,那么包含this的函数就是onclick事件,

那么this就是example引用的html元素对象。因此this的环境可以随着函数被赋值给不同的对象而改变!

      趁着上面的例子我们具体实现一下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS</title>
<style type="text/css">
#example {
   width:100px;
   height:100px;
   background-color:red;
}
</style>
<script type="text/javascript">
window.onload=function(){
     var example=document.getElementById("example");
     example.onclick=to_green;
	 
     function to_green(){
         this.style.backgroundColor="green";//这里的this表示div元素对象
     }
}
</script>
</head>

<body>
<div id="example">点击变绿</div>
</body>
</html>
       点击前的效果:
技术分享
       点击后的效果:
技术分享

       下面分四种情况,详细讨论this的用法。

       情况一:纯粹的函数调用 

       这是函数的最通常用法,属于全局性调用,因此this就代表window对象。请看下面这段代码,它的运行结果是1。

function test(){ 
 this.x = 1; 
 alert(this.x); 
} 
test();//输出:1 

       为了证明this就是window对象,可以对代码做一些改变:
var x=1;//全局变量
function test(){ 
 alert(this.x); 
} 
test();//输出:1 

       运行结果还是1。再变一下: 

var x=1;//全局变量
function test(){ 
 this.x=0; //全局变量x重新赋值为1
} 
test();//函数调用
alert(x);//输出:0

      情况二:作为对象方法的调用 

      函数还可以作为某个对象的方法调用,这时this就指这个上级对象。

function test(){ 
 alert(this.x); 
} 
var obj={};//定义一个对象
obj.x=1;
obj.m=test;
obj.m();//输出:1

       由上述的test()作为方法赋值给obj对象,说明this在这里指的是obj。

       情况三 作为构造函数调用 

       所谓构造函数,就是通过这个函数生成一个新对象(object)。这时,this就指这个新对象。

function test(){ 
 this.x=1; 
} 
var obj=new test()//定义一个对象
alert(obj.x);//输出:1

       运行结果为1。为了表明这时this不是全局对象,再次对代码做一些改变:

var x=2;//全局变量
function test(){ 
 this.x=1; 
} 
var obj=new test()//定义一个对象
alert(obj.x);//输出:1
alert(x);//输出:2,表示全局变量没有改变

       运行结果为2,表明全局变量x的值根本没变。 

       情况四 apply调用 

       apply()是函数对象的一个方法,它的作用是改变函数的调用对象,它的第一个参数就表示改变后的调用这个函数

的对象。因此,this指的就是这第一个参数。 

var x=0;
function test(){ 
 alert(this.x); 
} 
var obj={};//定义一个对象
obj.x=1;
obj.m=test;
obj.m.apply();//输出:0

       apply()的参数为空时,默认调用全局对象。因此,这时的运行结果为0,证明this指的是全局对象。

       如果把上面的代码修改为 

var x=0;
function test(){ 
 alert(this.x); 
} 
var obj={};//定义一个对象
obj.x=1;
obj.m=test;
obj.m.apply(obj);//输出:1

       运行结果就变成了1,证明了这时this代表的是obj对象。

       看完了这些基本也是JS基础教程里面的详解,对于一些高级的JS教程里还有更详细的解释和实例。如果想要了解

更详细的this机制,可以看下面的三篇文章,自认为现在还是不太了解,在后面的学习需要加强对this的了解。这三篇

文章来自CSDNYvetteLau的博文:

       一JavaScript的this词法

            JavaScript的this词法(二)

       三JS this词法(三)

           




轻松学习JavaScript二十九:JavaScript中的this详解

标签:

原文地址:http://blog.csdn.net/erlian1992/article/details/50429179

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!