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

这几天在看很多的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词法(三)

时间: 2024-08-02 06:55:01

轻松学习JavaScript二十九:JavaScript中的this详解的相关文章

Android学习笔记二十九之SwipeRefreshLayout、RecyclerView和CardView

Android学习笔记二十九之SwipeRefreshLayout.RecyclerView和CardView 前面我们介绍了AlertDialog和几个常用的Dialog,ProgressDialog进度条提示框.DatePickerDialog日期选择对话框和TimePickerDialog时间选择对话框.这一节我们介绍几个新的API控件SwipeRefreshLayout.RecyclerView和CardView,这几个API控件都是google在Android5.0推出的.下面我们来学

【Unity 3D】学习笔记二十九:游戏实例——简单小地图制作

任何的学习,光看不练是学不好的.所以这次就总结回顾下怎么制作MMROPG类游戏中的小地图.在MMROPG类游戏里,主角在游戏世界里走动时,一般在屏幕右上角都会有一个区域来显示当前游戏场景的小地图.主角在游戏世界里走动,小地图里代表着主角的小标记也会随之移动.那怎么实现咧? 首先需要确定两个贴图,第一个是右上角的小地图背景贴图,应该是从Y轴俯视向下截取主角所在的位置大地图.第二个就是主角的位置大贴图.在本例中,因为没有学习unity地图制作,所以地图用一个面对象代替,主角用立方体代替,使用GUI来

Swift 学习之二十一:?和 !(详解)

Swift语言使用var定义变量,但和别的语言不同,Swift里不会自动给变量赋初始值, 也就是说变量不会有默认值,所以要求使用变量之前必须要对其初始化 .如果在使用变量之前不进行初始化就会报错: [plain] view plaincopyprint? var stringValue : String //error: variable 'stringValue' used before being initialized //let hashValue = stringValue.hashV

qml学习笔记(二):可视化元素基类Item详解(上半场anchors等等)

原博主博客地址:http://blog.csdn.net/qq21497936本文章博客地址:http://blog.csdn.net/qq21497936/article/details/78516201 qml学习笔记(二):可视化元素基类Item详解(上半场anchors等等) 本学章节笔记主要详解Item元素(上半场主要涉及anchors锚),因为所有可视化的界面元素都继承于Item,熟悉Item后,不同的继承子类,有其定制的属性(从几个到几十个不等). <Qt实用技巧:在Qt Gui程

二十、异常捕获及处理详解

代码中被[]包含的表示可选,|符号分开的表示可选其一. 需求背景 我们在写存储过程的时候,可能会出现下列一些情况: 插入的数据违反唯一约束,导致插入失败 插入或者更新数据超过字段最大长度,导致操作失败 update影响行数和期望结果不一致 遇到上面各种异常情况的时,可能需要我们能够捕获,然后可能需要回滚当前事务. 本文主要围绕异常处理这块做详细的介绍. 此时我们需要使用游标,通过游标的方式来遍历select查询的结果集,然后对每行数据进行处理. 本篇内容 异常分类详解 内部异常详解 外部异常详解

[傅里叶变换及其应用学习笔记] 二十九. 高维Ш函数修改版

一维Ш函数复习 我们前面(十六课,十七课)已经学习过一维的Ш函数,标准的Ш函数表现为无数个脉冲函数分布在整数点上, 我们定义Ш为 $Ш(x) = \displaystyle{ \sum_{k=-\infty}^{\infty}\delta(x-k) }$ 而Ш函数最为深刻的一个性质就是:Ш的傅里叶变换是它自身 $\mathcal{F}Ш=Ш$ 进一步推广到脉冲间隔为$p$的函数$Ш_p$ $\displaystyle{ Ш_p(x)=\sum_{k=-\infty}^{\infty}\delta

javaweb学习总结(二十九)——EL表达式

一.EL表达式简介 EL 全名为Expression Language.EL主要作用: 1.获取数据 EL表达式主要用于替换JSP页面中的脚本表达式,以从各种类型的web域 中检索java对象.获取数据.(某个web域 中的对象,访问javabean的属性.访问list集合.访问map集合.访问数组) 2.执行运算 利用EL表达式可以在JSP页面中执行一些基本的关系运算.逻辑运算和算术运算,以在JSP页面中完成一些简单的逻辑运算.${user==null} 3.获取web开发常用对象 EL 表达

OpenFire源码学习之二十九:集群

集群 Openfire的给集群提供了多种方案.一种是基于Hazelcast插件,还有基于Oracle的coherence插件. Linux集群配置 一.修改配置文件 /etc/hosts文件 openfire1 192.168.2.104 openfire2192.168.2.240 每台主机都需要配置 二.添加jar包 将coherence.jar.coherence-work.jar.tangosol.jar添加到lib目录 将clustering.jar放到plugins下面 Hazelc

JMeter学习(二十九)自动化badboy脚本开发技术

一般人用badboy都是使用它的录制功能,其它badboy还是一款自动化的工具,它可以实现检查点.参数化.迭代.并发.报告.断点等功能.本文就这些功能简单介绍下. 环境准备: 下载地址:http://www.badboy.com.au/,下载后安装即可. 工具:BadboyInstaller-2.2.exe 一.检查点 1.打开badboy,默认是录制状态,在地址栏中输入:http://http://www.sogou.com/,点击,如下图: 2.在文本框中输入yangxia-test,点击搜