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

详解 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不再是坑~

增强用户体验 让网站和APP更具动感的几点建议 《近匠》蒲公英:一站式免费应用内测平台 用Swift开发iOS 8新应用:斯坦福免费课程上线iTunes U Swift开发必备技巧:static和class的使用 你可能没听过的11个Python库 移动Web技术的春天来了?Facebook发布React Native,用JavaScript开发移动原生应用 开发不易!2015年移动应用开发趋势总结 .NET开发者必备的工具箱 热情不减!七款Swift应用开源项目推荐 如何给苹果提交Bug或功能需求? 深入钻研Augular两年 谈谈其究竟适用于哪些场合 唐巧:谈谈React Native 在Swift中,如何更优雅地处理网络返回数据? Spark生态系统解析及基于Redis的开源分布式服务Codis 阿里巴巴技术专家杨晓明:基于Hadoop技术进行地理空间分析 Bowery为什么放弃Node.js,转向Go? 《近匠》有了APM,用户快到碗里来——专访听云CTO Wood 联通WO+梦工厂唐敏:走进厦门 构建移动数字生态 HTML5 VS 原生,世界究竟是谁的? 完全开放 微软开源.NET Core的执行引擎CoreCLR Swift与Objective-C的兼容“黑魔法”:@objc和Dynamic 网络技术,从“数制”开始学起——跟随王达老师一步步学习 UPYUN CTO黄慧攀:UPYUN这些年,一段“刚好”的旅程 2015移动游戏重中之重:需成功把握1%付费用户的心 UNITE 2015 BEIJING 20大议题首爆 死路一条?智能硬件免费没有未来 APICloud推出“模块 Store” 公布APP创业 “Time to Market”战略 极路由加入海尔U+联盟 可跨品牌控制多款家居设备 《近匠》Amaze UI:做最懂中国程序员的开源HTML5框架 Testin CTO徐琨:要做测试领域的阿里云! TIOBE 2015年2月编程语言排行榜:JavaScript排名达历史最高点 谁有linux下的mod_webapp.so DW UltraDev里rs.source="select * from stu where banci=request.QueryString("banci")这样是不是不行? Microsoft JDK nmake生成的EXE文件反编译问题!!! 各位大虾:请问谁能告诉我哪里能找到win xp home edition plus???如果能让我找到,送1000分 请问如何将PaintBox.Canvas的当前内容保存至内存, Linux下c语言程序该怎样运行? 请问:vb.net中oracle数据库能否支持blob格式? .ceb文件如何打开? 什么地方能够找到《Exploring Requiremengs:Quality Before Design》这本书? 关于制作一个classwizard的设计思路,欢迎大家讨论 weblogic server console: java.lang.NullpointerException 如何得到本局域网上所有主机的ip? 请问: 如果在网上可以通过网页上传某些文件到服务器空间上,并显示一些关于上传文件的信息~ 一段检测光软驱的程序,大家帮忙除Bug! 为何会死机? 高分放送,木马病毒求救! tomcat下的分布怎么做? 各位使用手机的老鸟,2000左右的手机什么牌子的好 喜欢硬件朋友请进来看看。 如何复原被Linux改写的引导扇区呢 请问各位大虾,怎样将c++同数据库结合起来 大哥......你继续看!!!??? 喜欢硬件朋友请进来看看。 在哪里调用方法?是在cpp文件还是在.h文件里? 初学者关于显示的问题? depunf朋友,您好,stringgrid那里有delete啊?敬请赐教! formula one报表打印问题 d3d头文件的错误? 执行了insert语句之后我怎么得到刚刚插入的id值啊?快快,在线等待 为什么找不到服务器? 如何禁止用户调整窗体大小?但最大化、最小化和关闭按钮仍在。 各位: 如何让系统认识带小数的字体如:7.5? 没有经验,请有实际经验的朋友回答:) 请问pb8.0+sqlserver2000怎么配置数据源!(sqlserver2000与asa7.0连接数据库时有什么不一样!) 光盘能装超过700MB的数据吗? 考程序员要考的内容? 100分呀,哪里有钱能的C++电子书下载? 同学的一台电脑,放mp3有声音,但是放mtv却没有了声音,是怎么回事? 在线等待,我的excel密码忘了,长度大约为6个到8个,请大家帮帮忙 请问,我在使用Excel制作表格的时候,有一项需要输入身份证号码。可是填入18位身份证号码后,一换行,号码的后3位会自动变为000。请大家 请教如何处理JSP网页中的路径问题? SQL 中如何与用户交互? 如何把参数传到框架页中的子页(aspx页)? google怎么了?~我这几天一直都不能访问,我重装了系统,不知道是不是这个原因。谢谢了^_^ About RowMoved 40分,只要一个类似XP菜单的插件,请帮忙? 请教高手gcc/g++、dev c++是干什么的? 善待自己 NO.2 与往事干杯 帮帮我 我刚学delphi !!!!!谁知道那里有他的中文帮助?! 关于手动生成Doc/Frame/View的问题,我已经写一个失败的例子,各位帮我看看错在哪了? 电脑发烧友看看怎么折腾这老爷机? 教育人类认为,教育具有文化的多种功能,其中本质的功能是什么? A加油站标价5元每升,B加油站标价5元每千克,由计算说明应选择哪里加油?那啥、因为时间紧急.快点把、先不赏.答完再赏. 烟灰能否像催化方糖一样催化白糖燃烧? 草履虫的营养方式是什么? 填写从古至今信息传递方式的主要发展历程,并写出自己的感受古代:近代:现代:当代:通过以上信息传递方式的比较,我的感受是: 家里要装修,水管走天还是走地面?我不想做吊顶,所以想走地,但听说走地不太好,以后漏水不好处理. 关于草履虫的生物论文,600字左右 从古至今信息传递方式的变化. 装修水管到底是走吊顶还是地面? 描述大自然中一种动物或植物的感人故事 今天之内 举例说明信息传递的发展给我们生活带来的影响 如何装饰水管 加油站如何使用计量桶测量发油误差? 那种细胞置于水中会破裂?a 洋葱表皮 b 人的口腔上皮细胞c 草履虫 d 黄瓜果肉细胞. 有人说,绿色植物在白天进行光合作用,晚上进行呼吸作用.你认为这种说法是否有道理?为什么? 加油站计算油高我就知道在收银机上查出量,然后查表做油高,我会查表,具体一点 聚氯乙烯能使酸性高锰酸钾溶液和溴水褪色吗? 世界上什么生物寿命最长? 有没有关于人们救助大自然中的动物或植物的感人故事最好短一点. 聚苯乙烯能否使酸性高锰酸钾溶液褪色 世界上寿命最长的树是什么树?哪人国家的 种是生物分类的( ),)和自然( )的产物.同一种类的各个个体具有( )的遗传性状. 人的口腔上皮细胞和黄瓜表层果肉细胞的共同结构 材料作文 鹿和狼的故事材料:在美国阿拉斯加涅利英自然保护区,老百姓为了保护鹿而把狼消灭了鹿没有了天敌,终日无忧无虑地饱食于林中.十几年后,鹿群由四千只发展到四万只,但鹿的体态 生物遗传计算题:二倍体结球甘蓝的叶子有紫色和绿色两种,该性状的遗传与两对等位基因有关.二倍体结球甘蓝的叶子有紫色和绿色两种,该性状的遗传与两对等位基因有关.为探究二倍体结球 聚苯乙烯能否让高锰酸钾溶液褪色 家里装修,水电工为什么铺设3根水管,一根热水,一根冷水,还有一根的目的是? 月亮上有没有动物和植物? 加油站与加气站安全距离已有一座加油站现要在加油站旁边再建一加气站,请问一下加油机与加气机安全距离要有多远,还有就是储存油的地与储存汽的地安全距离是多少,像我这种情况还需要 秸杆气化炉产气成份氢15.27%、氧3.12%、氮56.22%、甲烷1.57%、一氧化碳9.76%、二氧化碳13.75%、乙烯0.10%、乙烷0.13%、丙烷0.03%、丙烯0.05%,合计100%这些气体中哪些是可然气体,哪些是不可然气体,哪些 月宫上有什么动物 在细胞免疫中起主要作用的细胞与在体液免疫中起主要作用的细胞或物质是为第二个什么是抗体 不是浆细胞 产生的沼气用气袋装好放在空气中一段时间,为什么沼气的成分含量发生变化?沼气中二氧化碳含量降低,氧气含量升高 湿垃圾干垃圾每天产生量可以的话告诉我一个问题:湿垃圾和干垃圾的每天在你家产生的量是多少?(千克,暑假生活15页,一个星期哦!)我实在不好写,求求大家帮帮忙!格式如下:日期: 下列不属于RNA功能的是 a.在细胞间传递信息 B.在细胞内运输某种物质 C.催化某些化学反应 计算下面图形中阴影部分的面积.图可能不是特别清楚,请见谅~ 月宫中有什么动物 加油站和居民房的安全距离怎么算油罐离多远安全 3.草履虫是单细胞原生动物,能够完成以运动、摄食、消化、呼吸、排泄、生殖等生命活动的基础是( ).A.具有纤毛 B.具有细胞核 C.具有完整的细胞结构 D.具有收缩泡 就女人会月金?有什么动物会吗 加油站与通信基站的安全距离是多少?我有个加油站边上有个联通基站,现安全局的人说我们存在安全问题,请问加油站与通信基站的安全距离是多少?要有相关法律说法两站都是21世纪建成的,听 草履虫用______呼吸,在_______进行消化吸收营养. 铁矿采选行业 废水产生量怎么计算 什么具有来自细胞内外的化学信号或识别其他细胞的作用 简述细菌RNA聚合酶的组成、结构和催化特点. 人体内氧气浓度最低的地方是 月亮对动物的影响求月亮对动物的种种影响,不管什么动物都可以……满月新月都行……TAT,拜托了亲们,妖在线等 草履虫没有肠子是怎样排泄的? 关于和平号空间站的设计寿命,下列说法中哪一种是正确的 草履虫等单细胞生物是怎样繁殖下一代的? 草履虫是怎样消化和排泄的谢谢了, 人体内氧浓度最大的是?A 肺泡里 B组织细胞里 C肺部毛细血管内 D 心脏内 应该是B 脱硫化学蝶阀 D71X-16C DN50 这型号中的字母个代表什么意思? 奥迪R8的发动机进气孔在哪里,并说明各进气孔的功能,还有,R8为什么不用涡轮增压?奥迪R8中间的超大进气孔是什么? 蒙古包的 作用 材料 结构 和文化特征 草履虫常用什么方式繁殖 乙烯水制酒精条件 北京四合院的位置,作用,材料,结构,文化特征 急 明天要用啊 加油站不给日本车加油? 催化燃烧的原理与应用
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘