说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

详解 JavaScript 中的 this

HTML文档下载 WORD文档下载 PDF文档下载
JavaScript中的this总是让人迷惑,应该是js众所周知的坑之一。 个人也觉得js中的this不是一个好的设计,由于this晚绑定的特性,它可以是全局对象,当前对象,或者…有人甚至因为坑大而不用this。

其实如果完全掌握了this的工作原理,自然就不会走进这些坑。来看下以下这些情况中的this分别会指向什么:

1.全局代码中的this

alert(x);// 全局变量x值为2

全局范围内的this将会指向全局对象,在浏览器中即使window。

2.作为单纯的函数调用

function fooCoder(x) {this.x = x;}fooCoder(2);alert(x);// 全局变量x值为2

这里this指向了全局对象,即window。在严格模式中,则是undefined。

3.作为对象的方法调用

var name = "clever coder";var person = {name : "foocoder",hello : function(sth){console.log(this.name + " says " + sth);}}person.hello("hello world");

输出 foocoder says hello world。this指向person对象,即当前对象。

4.作为构造函数

new FooCoder();
函数内部的this指向新创建的对象。

5.内部函数

var name = "clever coder";var person = {name : "foocoder",hello : function(sth){var sayhello = function(sth) {console.log(this.name + " says " + sth);};sayhello(}person.hello("hello world");//clever coder says hello world

在内部函数中,this没有按预想的绑定到外层函数对象上,而是绑定到了全局对象。这里普遍被认为是JavaScript语言的设计错误,因为没有人想让内部函数中的this指向全局对象。一般的处理方式是将this作为变量保存下来,一般约定为that或者self:

var name = "clever coder";var person = {name : "foocoder",hello : function(sth){var that = this;var sayhello = function(sth) {console.log(that.name + " says " + sth);};sayhello(sth);}}person.hello("hello world");//foocoder says hello world

6.使用call和apply设置this

person.hello.call(person, "world");
apply和call类似,只是后面的参数是通过一个数组传入,而不是分开传入。两者的方法定义:

call( thisArg [,arg1,arg2,… ] );  // 参数列表,arg1,arg2,...apply(thisArg [,argArray] );     // 参数数组,argArray

两者都是将某个函数绑定到某个具体对象上使用,自然此时的this会被显式的设置为第一个参数。

简单地总结

简单地总结以上几点,可以发现,其实只有第六点是让人疑惑的。

其实就可以总结为以下几点:

  1. 当函数作为对象的方法调用时,this指向该对象。
  2. 当函数作为淡出函数调用时,this指向全局对象(严格模式时,为undefined)
  3. 构造函数中的this指向新创建的对象
  4. 嵌套函数中的this不会继承上层函数的this,如果需要,可以用一个变量保存上层函数的this。

再总结的简单点,如果在函数中使用了this,只有在该函数直接被某对象调用时,该this才指向该对象。

obj.foocoder();foocoder.call(obj, ...);foocoder.apply(obj, …);

更进一步

我们可能经常会写这样的代码:

$("#some-ele").click = obj.handler;
如果在handler中用了this,this会绑定在obj上么?显然不是,赋值以后,函数是在回调中执行的,this会绑定到$(“#some-div”)元素上。这就需要理解函数的执行环境。本文不打算长篇赘述函数的执行环境,可以参考《javascript高级程序设计》中对执行环境和作用域链的相关介绍。这里要指出的时,理解js函数的执行环境,会更好地理解this。

那我们如何能解决回调函数绑定的问题?ES5中引入了一个新的方法,bind():

fun.bind(thisArg[, arg1[, arg2[, ...]]])thisArg

当绑定函数被调用时,该参数会作为原函数运行时的this指向.当使用new 操作符调用绑定函数时,该参数无效.

arg1, arg2, ...
当绑定函数被调用时,这些参数加上绑定函数本身的参数会按照顺序作为原函数运行时的参数.

该方法创建一个新函数,称为绑定函数,绑定函数会以创建它时传入bind方法的第一个参数作为this,传入bind方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数.

显然bind方法可以很好地解决上述问题。

$("#some-ele").click(person.hello.bind(person));//相应元素被点击时,输出foocoder says hello world

其实该方法也很容易模拟,我们看下Prototype.js中bind方法的源码:

Function.prototype.bind = function(){  var fn = this, args = Array.prototype.slice.call(arguments), object = args.shift();  return function(){    return fn.apply(object,      args.concat(Array.prototype.slice.call(arguments)));  };};

明白了么?

相信看完全文以后,this不再是坑~

监视POP3信箱-Delphi资料 开发WEBMAIL程序-Delphi资料 开发响应用户输入的数据库web Server-Delphi资料 利用Delphi编程发送E-mail 利用Delphi编写Socket通信程序 利用Delphi开发网络数据库应用 在许多系统中,出于安全或其它原因,常常要求随时对键盘进行监控,一个专-Delphi资料 链接的视觉效果-Delphi资料 如何从域名名得到IP?-Delphi资料 如何动态改变/添加网络设置中的 TCP/IP 的 DNS 地址-Delphi资料 如何获取CapsLock 、 Insert 等键的状态?-Delphi资料 如何在程序中动态取得Win95/98的网络邻居中的工作组及计算机名?-Delphi资料 提高客户机/服务器应用系统性能的一些方法-Delphi资料 网络和通讯编程-Delphi资料 WebBrowser流程讲解及如何判断下载网页成功-Delphi资料 用Delphi 3.0实现运行于浏览器内的客户 用Delphi编写ASP的ActiveX 用Delphi编写CGI程序(五) 用Delphi编写CGI程序返回图象 用Delphi程序获取拨号连接的动态IP地址 用Delphi创建Internet快捷方式 用Delphi实现NetBIOS广播收发 用Delphi实现网络驱动器的映射和断开 用Delphi实现远程屏幕抓取 用DELPHI制作留言板 再谈用Delphi程序获取拨号连接的动态IP地址 在DELPHI程序中拨号上网 在DELPHI程序中获取网络资源信息 在Delphi程序中应用IE浏览器控件 在Delphi中调用NetscapeNavigator 在Delphi中使用flash控件 我想看世界杯,但电视偏偏坏了,还正好从开赛的时候开始坏,真是受不了啊,天哪 世界杯开始了。。没地方看球。。惨啊。。 请大家讨论中专生与 VC++(UP 者有分!) 一个极菜极菜的代码问题。。。。---此恨绵绵无绝期 New transaction cannot enlist in the specified transaction coordinator 我很遵守纪律的.为什么我的信誉分数少了几分不公平啊! 请问有长沙的软件朋友吗?能否介绍份工作!熟悉DELPHI及PB编程,SQL SERVER数拒库。能用VC++SDK编程,了COM技术。万份感谢!zongpenghou@ 紧急问题 请问有长沙的软件朋友吗?能否介绍份工作!熟悉DELPHI及PB编程,SQL SERVER数拒库。能用VC++SDK编程,了COM技术。万份感谢!zongpenghou@ jobuson兄请进 在C++Builder中怎样使Mediaplayer控件实现连续播放多个文件的功能? HELP ME!!(vb调用AIP涵数) 请问有长沙的软件朋友吗?能否介绍份工作!熟悉DELPHI及PB编程,SQL SERVER数拒库。能用VC++SDK编程,了COM技术。万份感谢!zongpenghou@ 动态菜单的实现及关联方式? 请问有长沙的软件朋友吗?能否介绍份工作!熟悉DELPHI及PB编程,SQL SERVER数拒库。能用VC++SDK编程,了COM技术。万份感谢!zongpenghou@ 请问有长沙的软件朋友吗?能否介绍份工作!熟悉DELPHI及PB编程,SQL SERVER数拒库。能用VC++SDK编程,了COM技术。万份感谢!zongpenghou@ 帮我看看,51476905 有关tc的一些问题? 我的电脑上发现Folder.HTT病毒,怎么办? 拆了硬盘,再安装,但进不了win98,急 ! jsp调用javabean需要做那些步骤啊?在线等待,马上接贴! 有重庆的考程序员的吗?重庆什么时候考(留下你的联系方法) 立项建议书 vb画圆 立项建议书 请教关于数据库的问题 如何信达地翻译这句话? 请大家 推荐一些比较难的书(散分) 请问那里有isa server的中文教程下载?谢谢。 高手助我! 在VB中,用SQL语句时,怎样用函数。 图标在上网的时候改变,请问这是怎么回事? 编一个电话簿程序都需要哪些控件? powerbuild 在社会上用在那些方面 ? 请教一个问题:在word中能实现双面打印吗? 关于写文本文件的问题 怎么改密码啊?! 哪里有pb的电子图书下?在线等待 高分求avi播放器源代码(不使用控件) cab文件 关于crystal report export 的问题 XML带的?是什么?? 如何实现数据库CLIENT的用户之间的交互,即一旦一个用户更改了某项数据,其它用户能立刻知道,并能作出反应? 没有控制面板如何设置Delphi快捷键? 连接上网成功后会产生什么事件或者消息? 怎么定位treeview和listview? 哪里有DEIPHI5程序员参考这本书可以下载? ds,dt,dv数据绑定的时候,那个是最佳选择? 谁有串口通讯的控件comm32.zip,spcomm.zip,async32.zip,commst.zip? 游戏开发需要具备哪些知识? 在DELPHI中怎么命令调用外部exe文件?1 什么东西根据经过凸透镜焦点的光线平行原理做成 在磁场中,由感应电动势产生的感应电流,感应电流所做的功就是安培力做功吗 北京至天津的铁路线全长多少千米? 油压泵种类很多,怎样选择油压泵? 日光灯的电流大小为 i₁=150mA,电冰箱的电流约为i₂=0.8A,计算器中电源的电流为i₃=100u则电流由小到大的排列顺序为:()<()<() "<"是小于符号 大气压与压力锅的初二上问题在1大气压下水的沸点是100℃,如果气压增大,沸点也会升高,家用气压锅就是应用这个原理设计的.已知水的沸点跟气压的关系如图所示.测得气压锅盖出气孔的直径 水泵如何选型 卡西欧计算器的太阳能电池怎么充电啊?普通日光灯够吗? 北京——上海铁路线多少KM 怎么判断摩擦力是动力还是阻力 怎样才能一个遥控器控制一个接收器呢,因为我买的两辆遥控车能互相控制. 冰箱工作原理中压缩机有什么意义?没有它不也一样可以吸放热吗? 如何判断摩擦力是阻力还是动力 凸透镜和凹透镜的三条特殊光线怎么画 初二物理上凸透镜和凹透镜的三条重要光线怎么画 1.25吨氢气的体积是多少?(倾其密度为0.09g/L) 凸透镜的三条特殊光线 一种压路车,后轮直径是前轮直径的2倍,后轮滚动4周,前轮滚动( )周. 怎样判断滑动摩擦力是动力还是阻力 能不能用安培力做功等于焦尔热这道方程解决呀 设计建造我们的桥:桥的设计方案《设计建造我们的桥》计划表 设计简图 桥结构的说明 需要材料 制作步骤 其他应该考虑的因素 摩擦力有没有用?摩擦力可能是动力也可能是阻力是什么意思? 为什么克服安培力做功会等于产生的焦尔热 修建性详细规划完成之后,是不是可以直接进入初步设计阶段,而省略掉建筑设计的方案设计阶段?修建性详细规划完成之后,是不是可以直接开展只有商务标的建筑设计招标? 一辆汽车从甲地开往乙地,开始以72km/h的速度行驶45min,然后又以15m/s的速度行驶了27km,才到达乙地,求:(1)甲、乙两地间的路程是多少?(2)汽车从甲地到乙地共用了多少时间?(3)汽车在甲、乙两地 高锰酸钾与皮肤接触,污染皮肤致黑色怎么清除 瓶子加热,瓶子内气体对外做功,瓶塞冲出,瓶口白雾是如何产生? 如图所示,下列用电器的额定电流最接近4A的是() A.家用电冰箱 B.电视机 C.节能灯 D.电压力锅 通过凸透镜的几条特殊光线 家里电器为什么会被雷击坏? 两辆汽车从甲地开往乙地,先以30km/h的速度行驶30km,然后又以54km/h的速度行驶45min才到达乙地.求:(1)甲乙两地间的路程 (2)汽车从甲地到乙地所用时间(3)汽车在甲乙两地间的平均速度 建筑设计方案指的是什么? 北京到上海的铁路长度 如图,S'是光源S经过透镜折射后所成的像,画出折射光线,并确定此凸透镜的焦点.算了,已经会做了 小车的哪些地方会产生摩擦力?这些摩擦力是滑动摩擦还是滚动摩擦?quick! 关于建筑设计方案怎么写你是说需要出图,还有,平立剖面图和效果图,需要文字说明吗? 雾化器压缩和超声的有什么区别?哪个适合小孩用 用小车做“物体的滑动摩擦力、滚动摩擦力的比较实验”时,应改变的条件是什么? 建筑设计方案是什么意思? 如图,试画出光线a的折射光线并确定凸透镜的焦点 汽车前后轮受什么摩擦力?是滑动摩擦还是静摩擦还是滚动摩擦力?为什么?方向如何? 皮肤上弄上高锰酸钾了怎么才能清洗掉啊 一般电机修理价格是多少 勤俭节约都有什么方法 [求助]同浓度的氢氧化钾的碱性为什么比氢氧化钠强?同浓度的氢氧化钾的碱性为什么比氢氧化钠强?氢氧根的浓度不是相同吗? 氯化氢的电子式怎么写快 遥控车接收天线替代品车上的天线用什么替代也可以? 为什么用力挤压瓶子,瓶盖飞出后,瓶口会有白烟 氯化氢的电子式清楚 看得懂就行 遥控车天线断了,怎么办怎么办? 用手捏矿泉水瓶子,盖子飞出后,瓶口的白烟是怎样形成的 HCL中H和CL之间形成共价键,CL的其他电子还按照原来的轨道运动吗? 遥控车遥控器都是27MHZ有天线的 80元 控制距离很短 只有3 到4米 有时就比较远有5到6米 有什么方法可以解决我不会什么拆遥控器什么的 有没有什么简单的方法? 三极管基极和集电极为什么必须加个电阻?如题,就是共射极放大电路里的三极管 关于"Hcl中H+与Cl-共用电子”这句话是否正确?请注意符号. 加大遥控车遥控器天线的横截面积,会使遥控距离增加吗? 我想问下普通火车工作原理, 正确的是 A乙烯的结构式:CH2CH2 B氯化氢的电子式:H:CL C乙烷的结构式:CH3CH3 D 乙酸的分子式C2H4O2 三极管的集电极与电源之间接一个电阻,可将电流放大转换成电压放大 北京到上海的铁路总长度是多少急求
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘